3.1 使用结构标签构建网页布局

HTML5可以使用结构标签构建网页布局，使Web设计和开发变得容易起来。HTML5提供的各种切割和划分页面的手段允许用户创建切割组件，这些切割组件不仅能用来逻辑地组织站点，而且能够赋予网站聚合的能力。HTML5可谓是“信息到网站设计的映射方法”，因为它体现了信息映射的本质，即划分信息并给信息加上标签，使信息变得容易使用和理解。

在HTML5中，为了使文档的结构更加清晰明确，通常使用文档结构元素构建网页布局。HTML5中的主要文档结构标签包括以下内容。

<section>标签：用于定义文档中的一段或者一节。

<nav>标签：用于构建导航链接。

<header>标签：用于定义页面的页眉。

<footer>标签：用于定义页面的页脚。

<article>标签：用于定义页面、应用程序或网站中一体化的内容。

<aside>标签：用于定义与页面内容相关、但有别于主要内容的部分。

<hgroup>标签：用于定义段或者节的标题。

<time>标签：用于定义日期和时间。

<mark>标签：用于定义文档中需要突出的文字。

使用结构元素构建网页布局的典型布局如图3-1所示。

3.1.1 区段标签<section>

<section>标签用来定义文档中的节（section、区段），比如章节、页眉、页脚或文档中的其他部分。例如，下面的代码定义了文档中的区段，用于解释CSS的含义。

3.1.2 导航标签<nav>

<nav>标签用来定义导航链接的部分。例如，下面的代码定义了导航条中常见的首页、上一页和下一页链接。

3.1.3 页眉标签<header>

<header>标签用来定义页面的页眉。例如，下面的代码定义了文档的欢迎信息。

3.1.4 页脚标签<footer>

<footer>标签用来定义节（section）或页面（document）的页脚。该标签通常包含网站的版权、创作者的姓名、文档的创作日期及联系信息。例如，下面的代码定义了网站的版权信息。

3.1.5 独立内容标签<article>

<article>标签用来定义独立的内容，该标签定义的内容可独立于页面中的其他内容。<article>标签经常应用于论坛帖子、新闻文章、博客条目和用户评论等。

<section>标签可以包含<article>标签，<article>标签也可以包含<section>标签。<section>标签用来将相类似的信息进行分组，而<article>标签则用来放置诸如一篇文章或博客等的信息。这些内容可在不影响上下文含义的情况下被删除或是被放置到新的上下文中。与<article>标签提供了一个完整的信息包相比较，<section>标签包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，否则其代表的含义就会丢失。

一个<article>标签通常有它自己的标题（一般放在<header>标签里面），有时还有自己的脚注。

【例3-1】 使用<article>标签定义新闻内容。本例在浏览器中的显示效果如图3-2所示。

【说明】这个示例讲述的是使用<article>标签定义新闻的方法。在<header>标签中嵌入了新闻的标题部分，标题“爱心包装产品发布”被嵌入到<h1>标签中，新闻的发布日期被嵌入到<p>标签中；在标题下面的<p>标签中，嵌入了新闻的正文；在结尾处的<footer>标签中嵌入了新闻的版权，作为脚注。整个示例的内容相对比较独立、完整，因此使用了<article>标签。

<article>标签是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，针对该新闻的评论就可以使用嵌套<article>标签的方法实现，评论的<article>标签被包含在整个页面的<article>标签里面。

【例3-2】 使用嵌套的<article>标签定义新闻内容及评论。本例在浏览器中的显示效果如图3-3所示。

【说明】①这个示例相较于例3-1内容更加完整了，添加了新闻的评论内容，示例的整体内容还是比较独立、完整的，因此使用了<article>标签。其中，示例的内容又分为几个部分，新闻的标题放在了<header>标签中，新闻正文放在了<header>标签后面的<p>标签中，然后<section>标签把正文与评论部分进行了区分，在<section>标签中嵌入了评论的内容，在评论中的<article>标签中又可以分为标题与评论内容部分，分别放在<header>标签和<p>标签中。

②在HTML5中，<article>标签可以被看作一种特殊的<section>标签，它比<section>标签更强调独立性。即<section>标签强调分段或分块，而<article>标签强调独立性。具体来说，如果一块内容相对来说比较独立、完整，应该使用<article>标签；但是如果用户需要将一块内容分成几段，应该使用<section>标签。另外，用户不要为没有标题的内容区块使用<section>标签。

3.1.6 附属信息标签<aside>

<aside>标签用来表示当前页面或新闻的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。

【例3-3】 使用<aside>标签定义网页的侧边栏信息。本例在浏览器中的显示效果如图3-4所示。

【说明】本例为一个典型的博客网站中的侧边栏部分，因此将其放在了<aside>标签中；该侧边栏中的导航链接放在<nav>标签中；侧边栏的标题“评论”放在了<h2>标签中；在标题之后使用了一个无序列表<ul>标签，用来存放具体的导航链接。

3.1.7 分组标签

分组标签用于对页面中的内容进行分组。HTML5中包含3个分组标签，分别是<figure>标签、<figcaption>标签和<hgroup>标签。

1.<figure>标签和<figcaption>标签

<figure>标签用于定义独立的流内容（图像、图表、照片、代码等），一般指一个单独的单元。<figure>标签的内容应该与主内容相关，但如果将其删除，也不会对文档流产生影响。<figcaption>标签用于为<figure>标签组添加标题，一个<figure>标签内最多允许使用一个<figcaption>标签，该标签应该放在<figure>标签的第一个或者最后一个子标签的位置。

【例3-4】 使用<figure>标签和<figcaption>标签将页面内容分组。本例在浏览器中的显示效果如图3-5所示。

【说明】本例中，<figcaption>标签用于定义文章的标题。

2.<hgroup>标签

<hgroup>标签用于将多个标题（主标题和副标题）组成一个标题组，并与h1～h6元素组合使用。通常，将<hgroup>标签放在<header>标签中。

在使用<hgroup>标签时要注意以下几点。

①如果只有一个标题元素，不建议使用<hgroup>标签。

②当出现一个或者一个以上的标题元素时，推荐使用<hgroup>标签作为标题元素。

③当一个标题包含副标题、<section>标签或者<article>标签时，建议将<hgroup>标签和标题相关元素存放到<header>标签中。

【例3-5】 使用<hgroup>标签分组页面内容。本例在浏览器中的显示效果如图3-6所示。

3.1.8 案例——制作爱心包装新品发布页面

【例3-6】使用结构标签构建网页布局，制作爱心包装新品发布页面。本例在浏览器中的显示效果如图3-7所示。