一、什么是语义化?
1.第二次学习的感受
我最开始在学习
HTML中，和大多数初学者一样觉得这也太简单了，觉得没有多少东西，只要记住这些个标签就可以了。当我第二次学习时才发现，HTML并没有我想象中的那么简单。其实，学习HTML的重点不在于我们掌握了多少标签，而是在于掌握标签的语义以及如何编写一个语义结构良好的页面。有些人可能会因为对标签语义的不熟悉，常常用某一个标签代替另一个标签来实现某些效果，这是不可取的。
2.HTML精髓
HTML精髓就在于标签的语义。学习
HTML并不是看你学了多少标签，而是在于在你需要的地方能否用到正确的语义化标签。把标签用对地方，才是学习HTML的目的所在。
3.HTML的重要性
前端最核心的技术是
HTML、CSS、JavaScript。其中
HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。这三大元素中，
HTML才是最重要的，而CSS、JavaScript只是用来修饰的，这就好比盖房子，房子再好看，如果结构不稳是会崩塌的
4.语义化优点
编写一个语义良好的页面在实际开发中极其重要。主要有两个最大的优点：
- 利于开发调试和后期维护。
- 利于搜索引擎优化。
二、标题语义化
h1~h6标题标签，h 在语义上代表header。h1~h6在HTML语义化中占有极其重要的地位。h1~h6不一定全部都用上，都是根据需求使用。
1.一个页面只能有一个h1标签
h1标签表示每个页面中最高级的标题，搜索引擎会赋予h1标签最高权重。在
W3C标准中，没有明确规定一个页面不能有多个h1标签，但是我们还是要遵循 “一个页面只能有一个h1标签” 的原则。因为，如果一个页面出现多个
h1，对搜索引擎是不友好的。你也不要纠结，想想高中我们写作文时，一篇作文都是只写一个标题。
2.h1~h6之间不要出现断层
搜索引擎对
h1~h6标签比较敏感，尤其是h1和h2。语义良好的页面，
h1~h6应是完整有序且未出现断层的。也就是按照 h1、h2、h3、...的顺序依次排列下来，而不是中间拉掉谁。
3.不要用h1~h6来定义样式
h1~h6是有默认样式。在实际开发中，很多时候我们需要为文本定义大小或字体加粗；那你是否曾想过用
h1~h6来代替CSS？使用标签来控制样式，是一种错误的做法。HTML关注的是结构（语义），CSS关注的是样式。结构与样式应分离。
4.不要用div来代替h1~h6
从语义上讲，页面中的标题应该使用
h1~h6标签，不要使用 div 来代替。div 是无语义的标签，若用 div 来代替
h1~h6，后期维护会很困难，而且对 SEO 的影响较大，因为这样会让这个页面丢失大量权重。
三、图片语义化
在
HTML中，需要使用img标签来表示图片。关于图片的语义化，需从以下 2 方面来介绍：
- alt 属性和 title 属性。
- figure 元素和 figcaption 元素。
1.alt属性和title属性
img标签有2个重要属性：alt 和 title。alt 属性用于图片描述，其中的描述文字是给搜索引擎看的，并且当图片无法显示时，页面会显示alt中的文字。
title 属性同样用于图片描述，但其中的描述文字是给用户看的，并且当鼠标移动到图片上时，会显示title中的内容。
（1）语法
<img src="" alt="给搜索引擎看的图片描述" title="给用户看的图片描述">
我们可以一眼看出一张图片描绘的是什么，但是机器却不可以，它只能读取HTML代码，通过
img标签的 alt 属性或页面上下文来判断图片的内容。所以，对于
img标签我们一定要给它添加alt属性，以便搜索引擎识别图片内容。alt属性在搜索引擎优化中也很重要，并且会被赋予一定权重。
（2）实际开发
title属性是img标签可选属性，可加可不加。
alt属性是img标签必需属性，一定要添加，并在alt属性中添加必要的描述性息。
2.figure元素和figcaption元素
（1）图片和图注的实现
①普通实现
<div>
<img src="" alt=""/> <!--图片-->
<span>見贤思齊</span> <!--图注-->
</div>
图片和图注可以通过上述代码来实现，但是这种实现方式语义并不好，所以在
HTML5中，引入了figure、figcaption来增强图片的语义化。
② figure和figcaption实现
- figure元素用于包含图片和图注。
- figcaption元素用于表示图注文字。
Ⅰ.语法
<figure> <!--包含图片和图注 -->
<img src="" alt=""/> <!--图片-->
<figcaption>見贤思齊</figcaption> <!--图注-->
</figure>
（2）实际开发
在实际开发中，对于 “图片+图注” 效果，通过使用 figure元素和figcaption元素来实现，从而使得页面语义更加良好。
四、表格语义化
在实际开发中，不建议使用表格布局，应使用浮动布局或定位布局。
但对于表格数据形式，最好的选择是
table。在表格中，比较常用的标签是
table、tr、td，W3C为了加强表格的语义化，新增了5个标签：th、caption、thead、tbody、tfoot：
- th: 表头单元格。
- caption: 表格标题。
- thead、tbody、tfoot: 将表格从语义上分为3部分，表头、表身、表脚。
有了新增的这几个标签，表格语义更加良好，结构更加清晰。
1.表格标签
| 标签 | 说明 |
|---|---|
| table | 表格 |
| caption | 标题 |
| thead | 表头（语义划分） |
| tbody | 表身（语义划分） |
| tfoot | 表尾（语义划分） |
| tr | 行 |
| th | 表头单元格 |
| td | 表格单元格 |
（1）thead、tbody、tfoot
thead、tbody、tfoot 是表格中非常重要的3个标签，因为它们从语义上区分了表头、表身、表脚，千万不要忽视了它们的重要性。
这 3 个标签，不一定能全都用上，比如说tfoot就很少用，在实际开发中，要视情况而定。
① 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格</title>
<style type="text/css">
table,th,td,thead,tbody,tfoot{
border: 1px solid #00FFFF;
}
</style>
</head>
<body>
<table>
<caption>表格语义化</caption> <!--标题-->
<thead> <!--表头-->
<tr>
<th>
姓名
</th>
<th>
语文
</th>
<th>
数学
</th>
<th>
英语
</th>
</tr>
</thead>
<tbody> <!--表身-->
<tr> <!--第2行-->
<td>王小淘</td>
<td>100</td>
<td>90</td>
<td>80</td>
</tr>
<tr> <!--第3行-->
<td>贤思齊</td>
<td>90</td>
<td>80</td>
<td>100</td>
</tr>
<tr> <!--第4行-->
<td>君初见</td>
<td>80</td>
<td>100</td>
<td>90</td>
</tr>
</tbody>
<tfoot> <!--表脚-->
<tr> <!--第5行-->
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格语义化例1.png
五、表单语义化
1.label标签
W3C规范定义，
label标签用于显示在输入控件旁边的说明性文字。简单来讲，就是将某个表单元素和某段说明文字关联起来。
（1）语法
<label for="">说明性文字</label>
① 说明
label标签的for属性值为所关联的表单元素的id。例：
<input id="name" type="text">其所关联的label标签为<label for="name"></label>
Ⅰ.for属性的2个作用
- 语义上绑定了 label 元素和表单元素。
- 增强了鼠标可用性，当我们点击label中的文本时，其所关联的表单元素也会获得焦点。（也就是说
for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性）
Ⅱ.示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单语义化</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div>
<input id="radio1" type="radio"/>单选框
<input id="checkbox1" type="checkbox"/>复选框
</div>
<hr/>
<div>
<input id="radio2" type="radio"/><label for="radio2">单选框</label>
<input id="checkbox2" type="checkbox"/><label for="checkbox2">复选框</label>
</div>
</body>
</html>
<!--
1.在第1组表单中，只能点击单选框才能选中单选框，而点击说明文字是不能选中的。
2.在第2组表单中，点击单选框能选中单选框，而点击说明文字也能选中。
3.等价性：
<input id="radio2" type="radio"/><label for="radio2">单选框</label> 等价于
<label>单选框<input id="radio2" type="radio"/></label>
-->
2.fieldset标签和legend标签
在表单中，我们可以使用
fieldset标签来给表单元素进行分组，legend标签用于定义某一组表单的标题。
（1）语法
<fieldset>
<legend>表单的标题</legend>
...
</fieldset>
① 说明
Ⅰ.fieldset、legend标签2个作用
- 增强表单的语义。
- 可以定义fieldset元素的 disabled 属性来禁用整个组中的表单元素。
Ⅱ.示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单语义化</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<form action="index.aspx" method="post">
<fieldset> <!--给表单元素进行分组-->
<legend>
見贤思齊
</legend>
<p>
<label for="name">账号：<input type="text" id="name" name="name"/></label>
</p>
<p>
<label for="pwd">密码：<input type="password" id="pwd" name="pwd"/></label>
</p>
<label for="remember_me"><input type="checkbox" id="remember_me" name="remember_me"/>记住我 </label>
<input type="submit" value="登录">
</fieldset>
</form>
</body>
</html>
<!--使用fieldset标签和legend标签加强语义化后，表单形成了非常美观的书签效果-->
fieldset标签和legend标签.png
六、其它语义化
1.换行符< br/>
你有没有过，使用
<br/>标签来换行，或是用多个<br/>标签来实现元素之间的上下间距的经历？那你有没有想过，你的用法可能是错误的呢？
（1）语义
<br/>标签有自己特定的语义，不能随便用来实现换行效果。
W3C标准规定，<br/>标签仅仅用于段落中的换行，不能用于其它情况。也就是说，
<br/>标签只适用于p标签内部的换行，不能用于其它标签。
① 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>br语义化</title>
</head>
<body>
<p>
沈阳市<br/>
铁西区<br/>
翟家街道<br/>
沈阳经济开发区沈辽西路111号<br/>
沈阳工业大学
</p>
</body>
</html>
<!--这样做才是<br/>标签的正确用法-->
br标签语义化.png
2.无序列表ul
（1）实际开发
在实际开发中，对于列表型数据，为了实现良好的语义，建议使用无序列表（有序列表不推荐），不建议使用div等标签来实现。
大多数情况下都是使用无序列表，极少情况下会使用有序列表。
① 示例
Ⅰ.例1
<ul>
<li><span>1</span>HTML控制网页的结构(语义)</li>
<li><span>2</span>CSS控制网页的样式</li>
<li><span>3</span>JavaScript控制网页的行为</li>
</ul>
<!--当然以上代码，可以用以下代码代替-->
<div>
<div><span>1</span>HTML控制网页的结构(语义)</div>
<div><span>2</span>CSS控制网页的样式</div>
<div><span>3</span>JavaScript控制网页的行为</div>
</div>
<!--第2种方法，缺乏语义化，且不利于维护-->
可以看到，每一个列表项前都有数字，那应该用有序列表实现啊！那为什么我用无序列表呢？
这是因为，有序列表前的数字外观是固定的，而用无序列表可以通过
CSS进行样式改变。
3.strong标签和em标签
strong 用于实现加粗文本，em 用于实现斜体文字。
基于结构和样式分离的原则，标签仅仅是为了实现简单的加粗或斜体效果，一般不会用这两个。
（1）搜索引擎优化
W3C将这两个标签赋予“ 强调 ”的语义，在strong或em标签内部的文本被强调为重要文本。搜索引擎对这 2 个标签赋予一定的权重。
如果在一个页面中，为了
SEO而想要突出某些关键字，可以使用strong和em这 2 个标签。一般情况下，我们会去掉
strong和em的默认样式，然后使用CSS重新定义新的样式，但这并不影响这 2 个标签的语义。也就是说，样式只会改变标签的外观，而不会改变标签的语义。
4.del标签和ins标签
在
HTML中，del和ins这两个标签是配合使用的：
- del：表示“ delete ”，用于定义被删除的文本。
- ins：表示“ insert ”，用于定义被更新的文本。
一般情况下，我们会使用
CSS来重新定义del和ins标签的样式。
（1）示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>del标签和ins标签</title>
</head>
<body>
<p>麻辣小龙虾</p>
<p><del>原价：99元/kg</del></p>
<p><ins>现在仅售：77元/kg</ins></p>
</body>
</html>
del标签和ins标签.png
5.img标签
想要在页面中显示一张图片，有两种方式：
- 使用
img标签。
- 使用背景图片。
（1）二者区别
使用
img标签添加图片，是通过HTML来实现。使用背景图片，是通过
CSS来实现。
（2）实际开发
那么什么时候使用
img标签，什么时候使用背景图片呢？我们应根据
HTML语义来判断，如果图片作为HTML的一部分，并想要被搜索引擎识别，则应使用img标签，例如常见的图片列表。如果图片仅仅起到修饰作用，并不想被搜索引擎识别，则应该使用背景图片。
6.总结
以上这些是在实际开发中比较常见的语义标签，
HTML5新增了很多结构语义标签，若想要实现语义更为良好的页面，应该去主动关注。
七、语义化验证
讲了这么多，该如何判断一个页面是否语义良好呢？
最简单的一个方法是：去掉CSS样式，然后看页面是否还具有很好的可读性。
一个标签可以用另一个标签来代替，并且使用CSS修饰实现相同的效果，简单来讲，不同的HTML标签可以通过不同的CSS来实现相同的效果，但是一个语义良好的页面跟一个语义不好的页面在去除样式之后的表现是截然不同的。一个语义良好的页面在“CSS裸奔”之后，可读性也是非常高的。
1.Web Developer
要想查看一个页面在“CSS裸奔”之后的效果，我们可以使用火狐浏览器的一款网页测试插件
Web Developer来实现。
（1）流程
工具栏 -> CSS -> Disable Styles -> Disable All Styles，选中之后即可查看页面去除样式之后的效果。
八、HTML5舍弃的标签
在
HTML5中，除了新增的标签外，也将部分标签进行舍弃。被舍弃的标签，总体可以分为 2 大类：
- 仅仅为了定义样式，没有任何语义，因此被舍弃。
- 很少使用 或 已被新标签代替，因此被舍弃。
1.仅为了定义样式而舍弃
| 标签 | 说明 |
|---|---|
| basefont | 定义页面文本的默认字体、颜色或尺寸 |
| big | 定义大字号文本 |
| center | 定义文本居中 |
| font | 定义文本的字体样式 |
| strike | 定义删除线文本 |
| s | 定义删除线文本 |
| u | 定义下划线文本 |
2.很少使用或已被新标签代替而舍弃
| 标签 | 说明 |
|---|---|
| dir | 定义目录列表，应用 ul 替代。 |
| acronym | 定义首字母缩写，应用 abbr 替代。 |
| applet | 定义嵌入的 applet，应用 object 代替。 |
| isindex | 定义 与文档相关的可搜索索引。 |
| frame | 定义frameset中的特定一个框架。 |
| frameset | 定义一个框架集。 |
| noframes | 为那些不支持框架的浏览器显示文本。 |
3.实际开发
为了实现页面的语义化，在实际开发中不应再去使用这些标签。
网友评论