html语义化2

Qwe7

发布于 2022-05-18 08:52:01

6120

发布于 2022-05-18 08:52:01

文章被收录于专栏：网络收集

（二）标题语义化

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中的内容。

语法：

说明：

搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会査看HTML代码，通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签，我们一定要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。

请一定要注意；alt属性是img标签必需属性，一定要添加；title属性是img标签可选属性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。

2、figure 元素和 figcaption 元素

对于如图所示的这种“图片+图注”的效果，我们可以使用如下代码来实现。

<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 表格单元格

举例：

<!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这三个标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚。很多人容易忽略这三个标签。

举例：


<!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>