1. 超链接标签及媒体元素标签

（1）超链接标签<a>

简介

超链接可以用于跳转到新的文档或网页或者当前文档中的某个部分，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，一块区域等等
超链接标签内可以包裹其他任意标签（超链接标签本身除外）

属性

• href 定义指向一个文件或是一个网址的 url 或是一个 url 片段
• target 定义超链接的跳转方式
  • _self：在当前页面中打开超链接【默认值】
  • _blank：在新页面中打开超链接
• download 定义下载 url 指向的文件而不是打开链接，会提示用户保存该文件

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- 跳转到网页 -->
<a href="https://baidu.com">百度</a>

<!-- 新窗口打开网页 -->
<a href="https://baidu.com" target="_blank">百度</a>

<!-- 链接到同目录下另一个 html 文件 -->
<a href="another.html">HTML</a>

<!-- 页面书签 -->
<a name="label">看这里</a>
<a href="#label">书签</a>

<!-- 页面书签：利用元素id属性实现 -->
<p id="label">看这里</p>
<a href="#label">书签</a>
<!-- 特别的：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端，不会产生任何错误 -->
<a href="#">去顶部</a>

<!-- # 可作为超链接路径占位符 -->
<a href="#">我是假的超链接</a>
<!-- 也可用 javascript 方式占位 -->
<a href="javascript:;">我是假的超链接</a>

<!-- 发送电子邮件：将用户的电子邮件程序打开来发送新邮件 -->
<a href="mailto:nowhere@mozilla.org">Send email to us.</a>

（2）图像标签<img>

简介

图像标签可以用于向网页中嵌入一幅图像

属性

• src 规定图片的 url 路径
• alt 规定图片的描述
  • 当图片无法加载时会显示 alt 属性内的描述
  • 同时屏幕阅读器会将 alt 属性内的描述读给需要使用阅读器的使用者听，便于理解图像的含义
  • 搜索引擎会根据 alt 中内容识别图片，不给出 alt 属性不会收录图片
  • 空alt属性表明该图像不是内容的关键部分
  • 建议：alt 属性的值应能够清晰、简洁地描述图像的内容而不仅仅是图片文件名或是用于体现图片的存在
• width 及 height 指定图片的宽与高
  • 图片实行的是等比例缩放
  • 建议仅指定 width 和 height 属性中其一，不同时使用，否则可能会扭曲图片的比例
  • 建议仅使用像素px作为图片标签的单位，不推荐使用百分比作为图片标签的单位
  • 可以用CSS的width属性和height属性替代
• decoding 规定图片的解码方式
  • sync 同步解码图片，会阻碍其他内容的显示，可能会导致页面渲染时间增长
  • async 异步解码图片，不会阻碍其他内容显示
  • auto 浏览器自动决定 【默认值】
• importance 规定图片加载时的优先级
  • high 规定图片加载优先级较高
  • low 规定图片加载优先级较低，图片可能会延后显示
  • auto 图片加载优先级由浏览器自动决定 【默认值】
• loading 规定图片的加载方式
  • eager 立即加载图片 【默认值】
  • lazy 延迟加载图片，直至其与浏览器视窗接近一定距离再开始显示，可以加快网页页面的显示

图片格式

• jpeg（jpg）
  • 支持颜色比较丰富，不支持透明效果，不支持动图
  • 一般用来显示照片
• gif
  • 支持的颜色比较少，支持简单透明，支持动图
  • 颜色单一的图片，动图
• png
  • 支持颜色丰富，支持复杂透明，不支持动图
  • 颜色丰富、复杂透明图片（转为网页而生）
• webp
  • 新推出的专用于表示网页中表示图片的格式，具备其他图片格式的所有优点，而且图片特别小
  • 缺点：兼容性较弱（IE 等）

（3）音频标签<audio>

简介

用于向当前页面嵌入一个外部音频文件

属性

• src 音频的 url 路径
• controls 规定向用户提供显示控制元件，比如播放按钮
  • 唯一合法取值 controls
• loop 规定音频应循环播放
  • 唯一合法取值 loop
• autoplay 规定音频应自动播放，无需等待整个音频文件加载完成
  • 唯一合法取值 autoplay
• muted 规定音频是否静音
  • 默认取值为 false，即不静音；true 代表静音
• preload 建议音频的加载方式
  • none 提示浏览器无需缓存音频
  • metadata 提示浏览器获取音频元信息但不加载
  • auto 提示浏览器需缓存音频
  • 空字符串 等效于auto属性

其他

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息

1
2
3
4
5
6
7
8
9
10
11
12

<!-- 常规用法 -->
<audio src="someaudio.wav" controls="controls" autoplay="autoplay" loop="loop">
  您的浏览器不支持 audio 标签
</audio>

<!-- 考虑音频文件兼容性的写法 -->
<!-- 仅做了解即可 -->
<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  <embed height="100" width="100" src="song.mp3" />
</audio>

（4）视频标签<video>

简介

用于向当前页面引入一个外部视频文件，也可以用来引入一个外部音频文件（但建议使用 audio 标签）

属性

• src 规定视频 url 路径
• controls 规定向用户显示控制元件，比如播放按钮
  • 唯一合法取值 controls
• loop 规定视频循环播放
  • 唯一合法取值 loop
• autoplay 规定视频应自动播放，无需等待缓存完成
  • 唯一合法取值 autoplay
• width height 规定视频播放器宽度及高度
  • 单位是像素
  • 推荐在使用<video>标签时都规定视频播放器的高度和宽度
• muted 规定视频是否默认静音
  • 默认取值为 false，即不静音；true 代表静音
• poster 规定视频的海报帧，默认未指定时使用视频的第一帧替代
• preload 建议视频的加载方式
  • none 提示浏览器无需缓存视频
  • metadata 提示浏览器获取视频元信息但不加载
  • auto 提示浏览器需缓存视频
  • 空字符串 等效于auto属性

其他

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- 建议用法 -->
<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

<!-- 考虑兼容 IE 8 -->
<!-- 仅做了解即可 -->
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

2. 表格

（1）表格简介

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

1
2
3
4
5
6
7
8
9
10
11

<!-- 一个简单的表格示例 -->
<table>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

效果如图

（2）<th> 标签

表格的表头单元格使用 标签进行定义

一般表头会显示为粗体居中的文本

（3）合并单元格

colspan 属性规定单元格可横跨的列数

rowspan 属性规定单元格可横跨的行数

以上两个属性具有最大值 65534，超出的值会自动当作 65534 处理

（4）<caption> 标签

<caption> 标签用于定义表格标题

<caption> 标签必须紧随 table 标签之后。只能对每个表格定义一个标题，通常标题会居中于表格主体内容之上

（5）空单元格问题

如果某个单元格是空的（没有内容），部分浏览器可能无法显示出这个单元格的边框，为此可以在空单元格中添加一个空格占位符从而避免这种状况出现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<table border="1">
  <tr>
    <th>th1</th>
    <th>th2</th>
    <th>th3</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    <td>row 1, cell 3</td>
  </tr>
  <tr>
    <td colspan="2">row 2, cell 1&2</td>
    <td rowspan="2">row 2&3, cell 3</td>
  </tr>
  <tr>
    <td>row 3, cell 1</td>
    <td>row 3, cell 2</td>
  </tr>
</table>

（6）<thead>标签及<tbody>标签及<tfoot>标签

这些标签常作为语义化标签

<thead>标签定义表格的列首行
<tbody>标签定义表格的内容主体行
<tfoot>标签定义表格的汇总行

3. 列表

（1）无序列表

无序列表是一个项目的列表，列表项使用粗体圆点进行标记
无序列表使用 <ul> 标签定义，各列表项使用 <li> 定义

• type 规定无序列表的序号类型

注意：不推荐使用该 HTML 属性，而是建议使用 CSS 的 list-style-type 属性替代

1
2
3
4
5

<ul>
  <li>结构</li>
  <li>表现</li>
  <li>行为</li>
</ul>

（2）有序列表

有序列表也是一列项目，列表项目使用数字进行标记
有序列表使用 <ol> 标签定义，各列表项使用 <li> 标签定义
以下属性是 <ol> 标签的 HTML 属性

• reversed 规定有序列表的项是否反向排列，即序号自大而小排列

• start 规定有序列表的起始项的序号，默认值是 1

• type 规定有序列表的序号的种类，默认值是 1

  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马数字编号
  • I 表示大写罗马数字编号
  • 1 表示数字编号
  • 注意：不推荐使用该 HTML 属性，而是建议使用 CSS 的 list-style-type 属性替代
    以下属性是 <li> 标签在<ol> 标签内可选的 HTML 属性

• value 规定项的序号，只允许使用数字，其后的项会从设置的该项的序号开始计数

1
2
3
4
5

<ol>
  <li>结构</li>
  <li>表现</li>
  <li>行为</li>
</ol>

（3）自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合
自定义列表使用 <dl> 标签定义，各自定义列表项使用 <dt>定义 ，各自定义列表项的定义使用<dd> 定义

1
2
3
4
5

<dl>
  <dt>结构</dt>
  <dd>结构表示网页结构</dd>
  <dd>规定网页中哪里是标题，哪里是段落</dd>
</dl>

（4）列表的使用

实际用的时候直接用列表原生样式比较少（由于样式比较简陋）
使用时更主要是使用其代表的结构和语义
其中无序列表用的比较多，多用于网页导航栏（nav），或者侧边栏等地方；自定义列表可以实现下拉框
另外，列表允许互相嵌套

4. 表单

HTML 表单用于收集不同类型的用户输入并发送给服务器

（1）<form> 标签

<form> 标签用于为用户输入创建 HTML 表单

建议：所有的表单元素都应当包含于<form> 标签内

• name 属性 规定表单的名称

该属性的值必须是独有的值且不能是空字符串

另外，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，所以一般收集信息的_表单元素_都应设置 name 属性

• action 属性 规定当提交表单时，向何处发送表单数据，即发送信息的目标服务器的 URL
• method 属性 规定如何发送表单数据，即HTTP 请求方法
  • 取值：’post’ 或 ‘get’等
• target 属性 规定在提交表单信息后如何显示响应信息
  • _self 在当前的浏览上下文加载
  • _blank 在新的浏览上下文加载
• autocomplete属性 建议浏览器是否应自动补全表单元素内容
  • on 开启
  • off 关闭
  • 该属性的效果取决于浏览器如何处理该属性
• novalidate属性 规定浏览器提交表单前是否应验证表单元素内容的合法性
  • 唯一取值为 novalidate

（2）表单输入元素

<input> 标签用于搜集用户信息

根据不同的 type 属性值，输入字段可以拥有非常非常多样的形式

• type 属性 规定 input 元素的类型
  • （以下标粗的是推荐掌握的）
  • button 定义按钮（通常用于通过 JavaScript 启动脚本）
  • checkbox 定义复选框
  • file 定义输入字段和 “浏览”按钮，用于文件上传
  • hidden 定义隐藏的输入字段
  • image 定义图像形式的提交按钮
  • password 定义密码字段，该字段中的字符会被掩码
  • radio 定义单选按钮
  • reset 定义重置按钮（会清除表单中的所有数据）
  • submit 定义提交按钮（会把表单数据发送到服务器）
  • text 定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符
  • number 定义输入数字的控件
  • range 定义输入数字的滚动条
  • tel 定义输入电话号码的控件
  • email 定义输入电子邮件地址的控件
  • url 定义输入 url 的控件
  • color 定义指定颜色的控件
  • month 定义输入日期-年月的控件
  • date 定义输入日期-年月日的控件
  • datetime-local 定义输入日期时间的控件
  • time 定义输入时间的控件
  • week 定义输入日期-年与周数的控件
  • search 定义用于搜索字符串的单行文字区域
• value 属性 规定 input 元素的值，对不同的 input 元素会有不同的效果
• disabled 属性 规定 input 元素是否可使用
• placeholder 属性 规定 input 元素输入为空且未获得焦点时控件显示的内容
• spellcheck 属性 规定是否应检测输入的拼写语法
• required 属性 规定 input 元素是必须的且应检查值的合法性

（仅对 password, search, tel, text, url 有效）

• checked 属性 规定 input 元素是否初始时应被选中

（仅对 radio、checked 有效）

• autofocus 属性 规定 input 元素在加载后自动聚焦
• autocomplete 属性 建议 input 元素应使用自动填充功能
• multiple 属性 规定可选择多个选项

（仅对 email file 有效）
更多 input 元素的 HTML 属性，可以参考 链接

（3）下拉列表

<select> 标签用于定义下拉列表

列表选项应使用 <option> 元素定义，通常会把首个选项显示为被选选项，但可以通过对特定的 <option> 元素添加 selected 属性来定义预定义选项
select 标签拥有 autocomplete、autofocus、disabled、multiple、required 等属性

option 标签拥有 disabled、value 等属性，其中若 value 属性未指定值则默认是元素的文本内容

1
2
3
4
5

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
</select>

（4）文本域

<textarea> 标签定义多行输入字段（即文本域）

• autocomplete、autofocus、disabled、value 等属性
• cols 属性 和 rows 属性规定文本可见宽度及高度，推荐使用 CSS 选择器替代

（5）按钮

<button> 标签定义可点击的按钮

• type属性 规定 button 的类型
  • 取值可为：button reset submit
• autocomplete、autofocus、disabled、maxlength、minlength、placeholder、required、value 等属性

效果同相同type属性取值的 <input> 标签，但可以在 button 标签内放置更多的元素因而可以有更加多样的样式表现

注意：请始终应为按钮规定 type 属性，因为其默认值在不同浏览器中不同

（6）<label> 标签

标签为 input 元素定义标注

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
标签的 for 属性应当与相关元素的 id 属性相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!-- 参考代码 -->
<form method="post" action="#" name="post">
  <input type="text" name="text" maxlength="25" /> <br />
  <input type="password" name="password" /> <br />
  <input type="radio" name="radio" checked />r <br />
  <input type="checkbox" name="checkbox" />c1 <br />
  <input type="checkbox" name="checkbox" />c2 <br />
  <input type="button" value="按钮" /> <br />
  <input type="submit" /> <br />
  <input type="reset" /> <br />
  <input type="file" name="file" accept="image/jpg" /> <br />
  <input
    type="image"
    name="image"
    src="https://www.xidian.edu.cn/__local/C/BD/8E/B4E1319F602F3F83CF5538DDABD_CA336AC2_43244.jpg"
    alt=""
    width="100"
  />
  <br />
  <input type="hidden" /> <br />
  <hr />

  <select name="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected>3</option>
  </select>
  <br />

  <textarea name="textarea" placeholder="..." cols="20" rows="20"></textarea>
  <br />
</form>

参考效果

5. 内联框架

iframe 用于在网页内嵌入另外一个网页

1

<iframe src="URL"></iframe>

• src 属性 设置内联网页的 url
• width 属性 和 height 属性 设置内联框架的宽度和高度

实际使用内联框架情况比较少见，常常是用来引用 bilibili 播放器等开放资源，如

1
2
3
4
5
6
7
8
9

<iframe
  src="//player.bilibili.com/player.html?aid=422093073&bvid=BV1J3411475Q&cid=453689337&page=1"
  scrolling="no"
  border="0"
  frameborder="no"
  framespacing="0"
  allowfullscreen="true"
>
</iframe>

HTML-1

1. HTML 简介

（1）HTML 概念

HTML 全名是超文本标记语言 (Hyper Text Markup Language) ，是专门用来描述网页的一种语言

• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

HTML文档 = 网页

• HTML 文档描述 网页
• HTML 文档包含 HTML 标签和纯文本
• HTML 文档也被称为网页

（2）HTML 版本

当下普遍使用的是 HTML5
HTML5 是最新的 HTML 标准，拥有许多令人激动的新特性，目前大多数主流浏览器都支持HTML5的大部分特性
下一个版本的 HTML 标准 —— HTML6 ，正在讨论中，也许不久之后 HTML6 就会面向广大开发者

（3）推荐编辑器

推荐使用 Visual Studio Code 软件进行前端web端的开发
VS code 官方下载链接

2. HTML 基本语法

（1）标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

• HTML 标签是由尖括号包围的关键词，比如
• HTML 标签通常是成对出现的，比如 和
• HTML 标签对中的第一个标签是开始标签（start tag），第二个标签是结束标签（end tag）
• 开始和结束标签也被称为开放标签和闭合标签

1
2
3

<标签名></标签名>
如：
<html></html>

（2）元素

• HTML 元素以开始标签起始，以结束标签终止
• HTML 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）
• 大多数 HTML 元素可拥有属性

1
2
3

<空元素/>
如：
<img/>

大多数 HTML 元素可以嵌套，即大多数 HTML 元素可以包含其他 HTML 元素， HTML 文档由相互嵌套的 HTML 元素构成

（3）属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性放置在开始标签内
属性总是以键-值对的形式出现，比如：name=”value”

1
2
3

<标签名 属性名="属性值"></标签名>
如：
<a href="http://www.baidu.com">This is a link</a>

（4）注释

HTML 注释使用 <!-- 注释内容 --> 描述，注释内容放置于开始标签与结束标签之间

1

<!-- 这是一个HTML注释！ -->

（5）文档结构

以下是一个典型的 HTML 文档的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- 文档声名，声名当前网页版本：区别是html、xml等文档类型 -->
<!DOCTYPE html>

<!-- html 根标签，网页中所有元素都写在根元素里边 -->
<html>

  <!-- head 是网页头部，head 中绝大多数内容不会在网页中直接出现，主要用于帮助浏览器和搜索引擎解析网页 -->
 <head>

    <!-- meta 一般用于设置网页元数据，这里 meta 用于设置网页字符集，避免乱码问题 -->
    <!-- 注意：对于中文网页需要使用 <meta charset="utf-8"> 声明为utf-8编码，否则会因为默认编码无法解析汉字出现乱码情况 -->
    <meta charset="utf-8" />

    <!-- title 中的内容会显示在浏览器标题栏中，搜索引擎会主要根据 title 判断网页主要内容 -->
    <title>网页标题</title>

  </head>

  <!-- body 是 html 的子元素，表示网页的主体，网页中所有可见内容都应该写在 body 里 -->
  <body>

    <!-- 这里写的是网页的主体内容 -->

  </body>

</html>

（6）字符实体

在 HTML 中，某些字符是预留的，比如在 HTML 中不能直接使用小于号（<）和大于号（>），这是因为浏览器会把小于号（<）和大于号（>）误认为标签

如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体，比如小于号（<）和大于号（>）可用< 和 >来表示从而正常显示

浏览器常常会截短 HTML 页面中的空格，如果在文本中写 10 个空格，在显示该页面之前，浏览器会合并这些空格，只留下一个空格，如e e在浏览器中实际显示效果为e e，如果需要在页面中增加空格的数量，可以使用  

正常了解以上3个字符实体在开发中是足够了的，更多的字符实体可以参考链接

（7）颜色

HTML中支持多种方式表示颜色，大都基于rgb颜色模式

• 颜色名，如 white black等

关于浏览器支持的颜色名可参考链接

• 十六进制，如 #01ef20，特别的如同 #111111 形式的可简写为 #111
• rgb函数及rgba函数，如rgb(12,34,250)

我们会在CSS部分讲解更多与颜色相关的知识

（8）代码规范

在编写HTML文档时，遵守一些公认的代码规范有助于提高代码的可读性，也利于团队协作

• 使用正确的文档类型

始终在文档的首行声明文档类型<!DOCTYPE html>

• 使用小写元素名
• 关闭所有HTML元素与HTML空元素
• 使用小写属性名
• 所有属性值添加引号
• 合理利用空格和缩进

3. 文本格式化标签及段落标签

（1）标题标签 <h1> ~ <h6>

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的，
<h1> 定义最大的标题，<h6> 定义最小的标题

（2）段落标签 <p>

段落通过

标签定义，浏览器会自动地在段落的前后添加空行

（3）水平线标签 <hr/> 与换行标签 <br/>

（4）其他文本格式化标签

• 粗体 <strong>
• 斜体 <em>
• 下划线 <ins>
• 删除线 <del>
• 上标 <sup>
• 下标 <sub>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<h1>this is a h1 tag</h1>
<h2>this is a h2 tag</h2>
<h3>this is a h3 tag</h3>
<h4>this is a h4 tag</h4>
<h5>this is a h5 tag</h5>
<h6>this is a h6 tag</h6>

<p>this is a p tag</p>
<p>this is a p tag too</p>

<p>use br tag <br/> like this</p>

<hr/>

<p>this is a <strong>strong</strong> tap</p>
<p>this is a <em>em</em> tap</p>
<p>this is a <ins>ins</ins> tap</p>
<p>this is a <del>del</del> tap</p>

效果如下

其他文本格式化标签可参考 W3School标签参考手册

一般实际开发中很少用到文本格式化标签，更常见的是使用CSS字体样式来实现文本格式化效果，这里仅做简单介绍；一般使用文本格式化标签用于表现相关的语义

4. 块元素与行内元素

（1）概念

• 块元素：独占一行的元素，如 <p>
• 行内元素：不会独占一行的元素，如 <img>

大多数 HTML 元素被默认定义为块级元素或内联元素，块级元素在浏览器显示时，通常会以新行来开始（和结束），内联元素在显示时通常不会以新行开始

注意：一般情况下块元素中放置块元素或行内元素，行内元素内仅放置行内元素，而不推荐在行内元素中放置块元素

（2）分组标签

<div> 默认是块元素
<span> 默认是行内元素

<div> <span> 在前端开发中非常常用，常用于与CSS相互配合，分别实现对大的内容块和部分文本设置样式；或是充当包裹其他HTML元素的容器和文本的容器

5. 语义化标签

（1）概念

语义化标签，就是让标签有自己的含义，利用本身传达它所包含内容的一些信息，使浏览器和搜索引擎直观的认识标签和属性的用途和作用；同时也能够提高HTML文档的可读性，便于协作开发与后续维护

（2）优点

• 代码结构清晰，可读性高，减少差异化，便于团队开发和维护
• 在页面没有加载CSS的情况下，也能呈现良好的内容结构，提升用户体验
• 对搜索引擎友好，良好的结构和语义，有助于爬虫抓取更多的有效信息

（3）一些语义化标签简介

下图给出了一些常见语义化标签的使用场景