（二）标题语义化
h1 - h6是标题标签，h表示“header”。h1~ h6在HTML语义化中占有极其重要的地位。 h1 ~ h6按照标题的重要性依次递减，其中h1重要性最高，h6重要性最低。
相对于其他语义化标签，h1~ h6在搜索引擎优化(即SEO)中占有相当重要的地位。 在一个页面中，h1 ~ h6这6个标签，我们不需要全部都用上，都是根据需要才用的。对于 h1~ h6,—般情况下我们只会用到h1、h2、h3和h4，很少再会去用h5和h6,因为一个页面不可能用到那么多级的标题。并且从搜索引擎优化的角度来说，h1、h2、h3和h4这4个 标签会被赋予一定的权重，而h5和h6的权重跟普通标签差不多，在SEO优化上意义不大。
对于标题h1 ~ h6的语义化，我们需要注意以下四个方面。
（1）一个页面只能有一个h1标签。
（2）hl ~ h6之间不要断层。
（3）不要用h1 ~ h6来定义样式。
（4）不要用div来代替h1 ~ h6.
1.一个页只能有一个h1标签
hl标签表示每个页面中最高层级的标题，捜索引擎会赋予hl标签最高权重。虽然W3C 没有明确规定一个页面不能有多个hl标签，但是我们还是推荐“一个页面一个hl标签”的 做法。如果一个页面出现多个hl,对搜索引擎可能不好，也可能会被判以作弊。就像你写文 章一样，一个页面就等于一篇文章，你见过一篇文章有多个主标题的么？
2.h1~h6之间不要出现断层
搜索引擎对hl ~ h6标签比较敏感，尤其是hl和h2。一个语义良好的页面，hl ~ h6 应该是完整有序而没有出现断层的。也就是说，要按照“hl、h2、h3、h4”这样的顺序依次 排列下来，不要出现“hl、h3、h4”而漏掉h2的情况。
3.不要用h1~h6来定义样式
我们都知道h1 ~ h6是有默认样式的，如图所示。在实际开发中，很多时候我们需 要为文本定义字体加粗或者字体大小。有些人喜欢用h1 ~ h6来代替CSS,使用标签来控制 样式，这是一种非常不好的做法。我们一定要记住，HTML关注的是结构(语义)，CSS关注 的是样式，结构跟样式应该分离。
4.不要用div来代替h1~h6
从语义上来说，一个页面的标题应该使用h1〜h6标签，不要使用div来代替。
分析：
div是无语义的标签，如果使用div来代替h1〜h6,后期维护比较困难，而且对SEO 影响也非常大。因为这种做法会让一个页面丢失大量的权重。
（三）图片语义化
在HTML中，我们使用img标签来表示图片。对于图片的语义化，我们从以下两个方面 来深入探讨一下。
（1） alt属性和title属性。
（2） figure 元素和 figcaption 元素。
1、alt属性和title属性
img标签有两个重要属性：alt和title。
alt属性用于图片描述，这个描述文字是给捜索引擎看的。并且当图片无法显示时，页面 会显示alt中的文字。
title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片 上时，会显示title中的内容。
语法：
<img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">
说明：
搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会査看HTML代码， 通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签，我们一定 要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要，并且会 被赋予一定的权重。
请一定要注意；alt属性是img标签必需属性，一定要添加；title属性是img标签可选属 性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。
2、figure 元素和 figcaption 元素
对于如图所示的这种“图片 图注”的效果，我们可以使用如下代码来实现。
代码语言：javascript复制<div class="img-list">
<img src="" alt=""/>
<span>HTML入门教程 </span>
<div>
但是这种实现方式的语义并不好。在HTML 5中，引入了 figure和figcaption两个元素 来增强图片的语义化。
语法：
<figure>
<img src="" alt=""/>
<figcaption></figcaption>
</figure>说明：
figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中， 对于“图片 图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使 得页面的语义更加良好。
（四）表格语义化
在实际开发中，我们不建议使用表格布局，应该使用浮动布局或者定位布局。虽然表格拿来做布局的方式被抛弃了，但是这并没有说明表格就一无是处了。
问大家一个问题：如图所示的这种表格数据的展示，应该怎么实现呢？不少得了 “table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上，对于这种表格数据形式, 最好的选择还是table。
font-weight属性值 说明
normal 默认值,正常体
lighte 较细
bold 较粗
bolde 很粗（效果跟bold差不多）
在表格中，我们比较常用的标签是table, tr和td这3个。不过为了加强表格的语义 化，W3C还增加了 5个标签：th、caption、thead、tbody和tfoot。th表示“表头单元格”； caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分: 表头、表身和表脚。有了这几个标签，表格语义更加良好，结构更加清晰。对于这5个标签, 我们在本书的姊妹篇中已经做了详细的介绍，这里就不再赘述。表格标签如表2-1所示。
表2-1
表格标签 标 签 说 明
table 表格
caption 标题
thead 表头（语义划分）
tbody 表身（语义划分）
tfoot 表尾（语义划分）
t 行
th 表头单元格
td 表格单元格
举例：
代码语言：javascript复制<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.body {
font-family: "微软雅黑";
font-size: 14px;
}
</style>
</head>
<body>
<div class='content'>
<table>
<caption> 表格标题 </caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格l</th>
<th>表头单元格2</th> </tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格l</td>
<td>标准单元格2</td> </tr>
<tr>
<td>标准单元格l</td>
<td>标准单元格2</td> </tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格l</td>
<td>标准单元格2</td> </tr>
</tfoot>
</table>
</div>
</body>
</html>
说明：
thead, tbody和tfoot这三个标签也是表格中非常重要的标签，它从语义上区分了表头、 表身和表脚。很多人容易忽略这三个标签。
举例：
代码语言：javascript复制
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table, thead, tbody, tfoot, th, td
{
border: 1px dashed gray;
}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
分析：
对于theadx tbody和tfoot这3个标签，不一定能够全部都用得上，例如tfoot就很少用。 一般情况下，我们都是根据实际需要来使用这3个标签的。
