HTML5与CSS3基础教程：创建分级标题_html/css_WEB-ITnose

本文是节选《HTML5与CSS3基础教程》（第八版）第3章第3节。

本章全部文章：

第一节： “基本HTML结构 开始编写网页”

第二节：创建页面标题

作者：图灵教育来源：《HTML5与CSS3基础教程》（第八版）

3.3 创建分级标题

HTML提供了六级标题用于创建页面信息的层级关系。使用h1、h2、h3、h4、h5或h6元素对各级标题进行标记，其中h1是*别的标题，h2是h1的子标题，h3是h2的子标题，以此类推。为简洁起见，本书使用h1～h6表示这些元素，不再逐一列出。

为了理解h1～h6标题，可以将它们比作学期论文、销售报告、新闻报道、产品手册等非HTML文档里的标题。当你撰写这些文章时，会根据需要为内容的每个主要部分指定一个标题和任意数量的子标题（以及子子标题，等等）。总之，这些标题代表了文档的大纲。网页的分级标题也是这样的（参见图3.3.1和图3.3.2）。

图3.3.1

用标题建立文档结构，就像大纲一样。这里，标记为h2的La Sagrada Família和Park Guell是标记为h1的*标题Barcelona’ s Architect的子标题。如果Park Guell是h3，它就成了La Sagrada Família的子标题（也是h1的子子标题）。如果继续编写页面其余部分的代码，相关的内容（段落、图像、视频等）就要紧跟在对应的标题后面

1. 分级标题的重要性

对任何页面来说，分级标题都可以说是最重要的HTML元素。由于标题通常传达的是页面的主题，因此，对搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是等级最高的h1（这并不是说页面中的h1越多越好，搜索引擎还是足够聪明的）。

图3.3.2

在这个例子中，产品指南有三个主要的部分，每个部分都有不同层级的子标题。标题之间的空格和缩进只是为了让层级关系更清楚一些，它们不会影响最终的显示效果。在实践中我通常不会添加这样的空格和缩进，如果你想添加可以这样做

对人来说，好的分级标题也很重要。视力良好的用户需要通过分级标题确定页面内容。屏幕阅读器用户也是这样，只不过是通过手和耳朵。他们通常通过键盘按键在标题间移动，这样可以快速了解页面内容并去查看最感兴趣的内容，而不用把整个页面从头到尾听完。当他们找到感兴趣的标题之后，可以选择阅读该标题下的内容。可见h1～h6对可用性和无障碍访问的作用是很大的。

总之，好的标题层级结构对你和你的访客来说都很重要。

2. 使用标题对网页进行组织的步骤

(1) 在HTML的body部分，输入，其中n是1～6的数字，此数字取决于要创建的标题的级别。h1是最重要的标题，而h6则是最不重要的标题。

(2) 输入标题的内容。

(3) 输入，其中是与第(1)步中相同的数字。

在默认情况下，浏览器会从h1到h6逐级减小标题的字号，如图3.3.3所示。（在有的浏览器里，嵌套在特定元素中的h1和h2在默认情况下看起来是一样的。）不过别忘了要依据内容所处的层次关系选择标题级数，而不是根据你希望文字应该显示的大小。可以按照你希望的样子为标题添加样式，包括字体、字号、颜色等。用CSS实现这些样式的详细说明参见第10章。

图3.3.3

在默认情况下，所有的标题都以粗体显示，h1的字号比h2的大，而h2的又比h3的大，以此类推。每个标题之间的间隔也是由浏览器默认的CSS制造的，它们并不代表HTML文档中有

空行

创建分级标题时，要避免跳过某些级别，如从h3直接跳到h5。不过，允许从低级别跳到高级别的标题。例如，在图3.3.2中，

Scheduling a Recording

后面紧跟着

Advanced Features

是没有问题的，因为包含Scheduling a Recording的Basic Features（也是h2）在这里结束了，而Advanced Features的内容开始了。

不要使用h1～h6标记副标题、标语以及无法成为独立标题的子标题。例如，假设有一篇新闻报道，它的主标题后面紧跟着一个副标题，这时，这个副标题就应该使用段落（参见图3.3.4）或其他非标题元素。

先前，HTML5包含了一个名为hgroup的元素，用于将连续的标题组合在一起，W3C将这个元素从HTML5规范中移除了。

图3.3.4

这是标记文章副标题的一种方法。可以添加一个class，从而能够应用相应的CSS。该class可以命名为subhead等名称

另外注意一下，图3.3.1中对一个h2使用了lang属性，用以表明这里的文字为页面默认语言（英语，因为

）之外的另一种语言（西班牙语，由es表示）。

在本书写作之际，曾有人提议在HTML中引入subhead元素，用于对子标题、副标题、标语、署名等内容进行标记。目前还无从知道这个提议是否会被采纳。

声明：

《HTML5与CSS3基础教程》（第八版）内容是图灵教育特别提供HTML5DW网站的，其它网站或个人未经图灵教育官方授权不得进行转载、摘编，或摘抄等。

原文链接

文章来源于网络，如果有侵犯到您的权益，请及时联系QQ：123464386，将会在第一时间进行处理！