第3章

HTML 5的结构

在HTML 5对HTML 4所做的各方面修改中，一个比较重大的修改就是为了使文档结构更加清晰明确，容易阅读，增加了很多新的结构元素。本章详细介绍这些新增的结构元素，涉及它们的定义、使用方法以及使用示例，最后再介绍一下在HTML 5中，究竟怎样将这些新增的结构元素结合使用。

学习内容：

掌握HTML 5中新增的主体结构元素的定义以及使用方法、使用场合。新增的主体结构元素包括article元素、section元素、nav元素以及aside元素。

掌握HTML 5中新增的非主体结构元素的定义以及使用方法、使用场合。新增的非主体结构元素包括header元素、footer元素以及address元素。

掌握在HTML 5中应该怎样结合运用这些新增结构元素来合理编排页面总体布局，掌握什么是显式编排，什么是隐式编排，HTML 5分析器是按什么原则来分析页面结构的，以及怎样对这些新增元素使用CSS样式。

3.1　新增的主体结构元素

在HTML 5中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。需要说明的是，本章所讲的内容区块是指将HTML页面按逻辑进行分割后的单位。例如，对书籍来说，章、节都可以称为内容区块；对博客网站来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。

接下来将详细讲解HTML 5在页面的主体结构方面新增加的结构元素。

3.1.1　article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件，或者其他任何独立的内容。

除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

现在，以博客为例来看一段关于article元素的代码示例，如代码清单3-1所示。

代码清单3-1　article元素示例

这个示例展示的是一篇讲述苹果的博客文章，在header元素中嵌入文章的标题部分，在这部分中，文章的标题“苹果”被镶嵌在h1元素中，文章的发表日期镶嵌在p元素中。在标题下部的p元素中，嵌入一大段该博客文章的正文，在结尾处的footer元素中，嵌入文章的著作权作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用article元素。

article元素是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。

接下来看一个关于article元素嵌套的代码示例，如代码清单3-2所示。

代码清单3-2　article元素嵌套示例

这个示例中的内容比代码清单3-1中的内容更加完整，它添加了文章读者的评论内容，整体内容还是比较独立、完整的，因此对其使用article元素。具体来说，该部分内容又分为几部分，把文章标题放在header元素中，把文章正文放在header元素后面的p元素中，然后用section元素把正文与评论部分进行区分。后面马上会介绍section元素，它是一个分块元素，用来对页面中的内容进行分块，在section元素中嵌入评论的内容，评论中有几个人的评论，每个人的评论部分相对来说又是比较独立、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。

关于示例中提到的time元素与pubdate属性，可查看本节结尾处关于time元素与pubdate属性的说明。

另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。以下为它的一个示例，如代码清单3-3所示。

代码清单3-3　用article元素表示插件