HTML简介

秒速五厘米 2022-09-11 06:12 106阅读 0赞

9北212 乔波老师

9月13日

第一周 周一 一大

上课内容：

简单介绍课程设计安排、打分规则

# 第一章 网页开发基础 #

# 1.1 HTML简介 #

### 1.1.1 HTML简介 ###

HTML Hyper Markup Language 超文本标记语言

主要作用：通过HTML标记对网页中的文本、图片、声音等内容进行描述

HTML网页文件格式：.html .htm

**<!DOCTYPE>文档类型声明**

位于文档第一行，用于向浏览器说明当前文档使用的HTML标准规范种类。

该标记和浏览器的兼容性相关。若删除该标记，会把展示HTML页面效果的权利交给浏览器，此时，有多少种浏览器，页面就有多少种显示效果。在实际开发中，这是不被允许的。

**<html>根标记**

作用：告知浏览器其自身是一个HTML文档，<html>HTML文档的开始，</html>HTML文档的结束

**<head>头部标记**

用于封装其它位于文档头部的标记，例如<title><meta><link><style>等

**<body>主体标记**

用于定义HTML文档所要显示的内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    
    </head>
    
    <body></body>
    
    </html>

### 1.1.2 单标记和双标记 ###

单标记：也称 空标记，用一个标记符号即可完整地描述某个功能的标记。比如<hr />、<br />

注：hr和/之间有个空隔，虽然在显示效果上没有啥区别，但是按规范要求，建议加上空隔。

双标记：也称 体标记，由开始和结束两个标记符号组成的标记。

<标记名>内容</标记名>
    <p>好好吃饭，好好睡觉，好好爱自己</p>

### 1.1.3 文本控制与文本样式标记 ###

段落标记

<p>我爱这个世界</p>

换行标记

<br />

文本样式标记

<font face="微软雅黑" size="16px" color="red">今天又是崭新的一天呀</font>

### 1.1.4 图像标记 ###

<img src="图像的相对路径或者绝对路径" width="16px" height="16px" border="0px"/>
    //  width 宽度      height 高度     border 图像边框

### 1.1.5 表格标记 ###

<table border="1px">
        <tr>
            <td>第一行第一列</td>
        </tr>
    </table>

### **小结：** ###

### ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oeS56yR57-7_size_14_color_FFFFFF_t_70_g_se_x_16][] ###

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第一周第一节课</title>
    </head>
    <body>
    好好吃饭，好好睡觉，好好爱自己;
    好好吃饭，好好睡觉，好好爱自己;
    <br/>
    好好吃饭，好好睡觉，好好爱自己;
    <hr/>
    <p>
        遇见对的人是什么感觉？<br/>
        因为有了他，你身上突然有了力量。<br/>
        就算是前路有着荆棘遍地，你也会敢披荆斩棘的一路向前。<br/>
        因为有了他，你开始热爱这个世界。<br/>
        世界在你眼中，橘子辉煌，玻璃晴朗。<br/>
        因为有了他，你开始憧憬未来。<br/>
        你会开始期待有他的余生是什么样子，他变成了你的软肋，也成为了你的铠甲。<br/>
        在他的面前，你可以勇敢做回自己，卸下伪装。
    </p>
    <font face="微软雅黑" size="6" color="#6495ed">
        共产党人是最先锋的人，因为他们真诚地信仰马克思主义，为了实现心中的理想，为了中国人民的解放事业，他们心甘情愿献出自己的一切。
    </font>
    <br/>
    <img src="lovely.png" width="300px" height="220px" alt="lovely很可爱，当图片无法显示的时候会显示alt中的内容">
    <table border="1px">
        <tr>
            <td>这是第一行，第一列</td>
            <td>这是第一行，第二列</td>
        </tr>
        <tr>
            <td>这是第二行，第一列</td>
            <td>这是第二行，第二列</td>
        </tr>
    </table>
    </body>
    </html>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oeS56yR57-7_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oeS56yR57-7_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/5a64794c2df74c8c80b43f437ee686e1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oeS56yR57-7_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d1dd3d5452aa495390f420a795ed7963.png