阶段案例制作HTML5百科页面,HTML5大纲及网页编排示例

Html5较之前的HTML4，唯一的方式是采用

~

元素来创建大纲。因为正常习惯下，

~

表示了从第一级到第六级的层级递减标题，而标题之下就应该是对应的内容了。

合理正确的使用标题元素可以为文档赋予一个良好结构的大纲，不单单对于搜索引擎的优化，更是为借助于屏幕阅读器浏览器网页的盲人(或弱视力)用户提供了巨大的帮助。

在HTML5中存在着一个大纲算法，它允许用户从一个Web页面生成一个信息结构目录，以便用户快速浏览网页，定位所需内容。

在解析HTML5文档时，浏览器不会将

、

和

• 视作兄弟节点，

比

拥有更高的级别。

为了更好地表达HTML的文档结构、文档语义，HTML5新增了大量标签。这些标签包括section、article、nav、aside等，在上面大牛的博客中，他把这些标签分为了三类：

1)无作为标签，例如div、ul等

2)开始一个新的节点的标签，section、article、nav、aside、

~

。

3)可以成为一个根节点的标签  。《html5用户指南》中这样解释“某些元素(

、、、、

、)叫做成节的跟，并且它们可以拥有自己的大纲。但是，这些元素中的节和标题对于它们的祖先的大纲没有任意影响。”

如何查看这个Web页面的大纲？

这里有一个在线工具，复制HTML源代码粘贴到工具的文本框中，单击OutLine this！按钮，即可在浏览器中显示网页的信息结构目录。

HTML5分析工具：https://gsnedders.html5.org/outliner/

基于以上讲解过的知识点，下面来看看HTML5应该怎样编排网页的内容。代码清单3-31为一个标准博客网页的示例，这个示例中有一个标准博客网页应具备的基本要素，只缺少为了使用样式而补充添加的div元素。

网页编排示例

网页编排示例

网页标题

• 首页
• 帮助

文章主标题

文章子标题

文章正文

评论标题

评论正文

版权所有：陆凌牛

在这个示例中，使用了嵌套article元素的方式，将关于评论的article元素嵌套在了主article元素中。在HTML 5中，推荐使用这种嵌套article元素的方式。