《HTML 5与CSS 3 权威指南（第4版·上册）》 —3.3　HTML 5中网页结构

3.3　HTML 5中网页结构

前面两节详细介绍了在HTML 5中具体新增了哪些结构元素以及这些元素的定义和使用方法。在HTML 5中，可以使用这些结构元素来编排一份网页大纲，通过该网页大纲，我们可以一目了然地知道网页中具有哪些内容，网页中以什么样的结构形式来组织这些内容。

3.3.1　HTML 5中的大纲

在Word文档中，一份文档的大纲如下所示：

HTML 5网页文档中的大纲也基本如此，只不过使用不同的结构元素进行表达而已。换句话说，在HTML 5中，使用各种结构元素所描述出来的整个网页的层次结构，就是该网页的大纲。因此，在组织这份大纲的时候，不能使用div元素，因为div元素只能当作容器，用在需要对网页中某个局部使用整体样式时。

许多工具可以对HTML 5的网页文档进行分析，然后将该文档中的大纲以可视化的形式展现出来。http://gsnedders.html5.org/outliner/网站中就有一个文档大纲分析器，可以针对代码清单3-21中所示文档进行分析，分析结果如图3-4所示。

代码清单3-21　大纲分析工具测试用代码

图3-4　在线大纲分析器的分析结果

图3-4中出现“1.Untitled Section”，是由于该网页文档中第一个元素即为section元素，缺乏整个网页标题元素。加入标题元素（<h1>元素），将代码清单3-21中的代码修改为代码清单3-22所示的代码，分析出来的大纲如图3-5所示。

代码清单3-22　添加了header元素后的大纲分析工具测试用代码

图3-5　加入网页标题后的页面大纲

看到这里，你也许会问，如果光加一个<h1>元素，就可以分析出标题来，那么还需要header元素干什么？答案是h1元素一般用来显示文字标题。事实上，在要定义为网页标题的整个内容中，往往并不只是显示一段文字而已，其中还包括了大量的导航条、企业LOGO图片、广告flash等，这些内容都可以放在一个header元素中，作为整个网页标题的内容，而标题文字为h1元素中的文字，在大纲中显示该标题文字。但是，这里要说明的是，header元素本身的作用不是被用来生成大纲的，大纲是依靠header元素中的h1～h6元素来生成的，如使用代码清单3-23中的代码生成的大纲如图3-6所示。

代码清单3-23　在企业网站中使用图片来显示企业名称

图3-6　header元素本身并没有用来生成大纲

这里会产生这样一个问题，在很多企业网站（或其他网站）中，企业的标题并不是以文字来显示的，而是为了视觉效果，放在图片中显示的。难道这种情况就不能生成大纲了吗？笔者认为，这里有个小技巧，在header元素中，使用如下代码，既可以用图片来显示企业名称，又可以生成大纲。

<header>

    <h1><img src="title.jpg" alt="企业名称"></h1>

</header>

在header元素中使用这段代码后，生成的大纲如图3-7所示。

图3-7　在header元素中使用图片来生成大纲

与header元素相同，footer元素中如果没有标题元素（h1～h6元素）也不用于生成大纲。

在代码清单3-21或代码清单3-23中的代码底部追加如下代码，生成的大纲将不会有任何变化。

<footer>

    版权所有：陆凌牛

</footer>

另外，对nav元素与aside元素来说，如果不在元素内部加入标题元素（h1～h6元素），生成大纲时会在该元素所在位置处添加一个“Untitled Section”的说明文字，但是根据HTML 5的开发文档记载，nav元素的作用为存放一组链接组，aside元素的作用为表示当前页面或文章的附属信息部分，允许不在这两个元素中添加标题，也就是说，大纲中存在对这两个元素的内容为“Untitled Section”的说明文字是合理的。

在代码清单3-21的代码底部添加如下代码，生成的大纲如图3-8所示。

<nav>

    <ul>

        <li><a href="#">链接测试1</a></li>

        <li><a href="#">链接测试2</a></li>

    </ul>

</nav>

<aside>

    侧边栏中的内容

</aside>

图3-8　在文档的底部添加nav元素与aside元素

另外，在HTML 5中，body元素、blockquote元素、fieldset元素、td元素、details元素及figure元素称为节根（sectioning root）元素。这些元素的共同特征是拥有自己独立的大纲，并且这些元素内的section元素、article元素、标题元素（h1～h6元素）、nav元素以及aside元素等，只用于生成其父元素的大纲时，而不用于生成父元素的上层祖先元素的大纲时。

在代码清单3-24中，blockquote元素内部有一个h1元素，正是因为这个h1元素是位于节根元素blockquote元素内部的，所以在针对blockquote元素的父元素body元素生成页面大纲时，该h1元素并没有显示在大纲中，如图3-9所示。

代码清单3-24　针对body元素生成大纲时节根元素中的子元素不起作用

图3-9　针对body元素生成大纲时节根元素中的子元素不起作用