分类： 系统运维
2012-03-13 09:11:25
1.1 案例 1：用 HTML 5 中的结构元素构建一个博客网站
本节主要介绍一个使用 HTML 5 中的各种结构元素来构建博客网站的案例，旨在通过该
案例使读者触类旁通，充分了解 HTML 5 中的各种结构元素的作用、使用场合及使用方法，
从而构建出与之相类似的、结构分明的、语义清晰的 HTML 5 网站。
在介绍具体案例之前，先概要介绍一下 HTML 5 中的网页结构与 HTML 4 中的网页结构
的区别；HTML 5 中添加了哪些结构元素，这些结构元素的作用与使用场合是什么；HTML 5
中的网页大纲是什么，这些结构元素会在网页大纲的生成过程中起到什么样的作用，一份网
页大纲是根据什么原则生成的。
另外，本节所介绍的知识点均为概要介绍，详细理论知识请参阅笔者所著的《HTML 5
与 CSS 3 权威指南》 一书。
1.1.1 案例知识点
1. HTML 4 中表达文档结构的方法
一般来说，人们在书写包括 HTML 在内的文档时，习惯上按照类似于“章→节→小节”
这样的层次结构来进行。在 HTML 4 网页文档中，为了描述这样的层次结构，一般使用标题
元素（h1 ～ h6）。
例如，在 HTML 4 之前，为了在页面中表达“章→节→小节”这样的三层结构，一般采
用如代码清单 1-1 所示的代码进行书写。
代码清单 1-1 HTML 4 之前的文档结构的表示方法
1 HTML5
的基础知识
1.1 HTML5
概述
（1.1 的正文）
1.1.1 HTML5
是什么？
（1.1.1 的正文）
1.1.2 HTML5
中的新增API
（1.1.2 的正文）
1.2 HTML5
快速入门
（1.2 的正文）
1.2.1 HTML
与XHTML
（1.2.1 的正文）
机械工业出版社于2011年4月出版，已经重印4次，广获读者好评。—编辑注
第 1 章 用 HTML 5 中的结构元素构建网站
3
从代码清单 1-1 所示的文档结构代码中，勉强可以看出该文档的主体结构。但是，在比
较复杂的页面中，这种文档结构往往很难看出来。比如对“1 HTML5 的基础知识”来说，它
的代码只有“1 HTML5
的基础知识 ”这一行，没有使用其他元素将 元素中
的内容包围起来，这一章内容到底从哪儿到哪儿，是很难看出来的。
后来，为了解决这个问题，开发者开始使用 div 元素将一章的内容包围起来，具体使用
如代码清单 1-2 所示。
代码清单 1-2 在 HTML 4 中使用 div 元素描述文档结构
（1.1 的正文） （1.1.1 的正文） （1.1.2 的正文） （1.2 的正文） （1.2.1 的正文） 1 HTML5
的基础知识 1.1 HTML5
概述 1.1.1 HTML5
是什么？ 1.1.2 HTML5
中的新增API 1.2 HTML5
快速入门 1.2.1 HTML
与XHTML
使用 div 元素，这段文档的结构就一目了然了。
但是，最初设计 div 元素的目的并不是为了区分文档的结构，而是为了使用样式。因此，
从语义上来说，div 元素是不具备任何语义的，换句话说，该元素是不适合用来划分页面文
档结构的。
随着页面文档的不断复杂化，广大开发者发现，如果整个页面都依靠 div 元素来划分文
档结构，对于含有大量用来划分文档结构的 div 元素和大量用来使用样式的 div 元素的一个
页面，不仔细查看页面代码与样式代码，很难看出整个页面的文档结构。
2. HTML 5 中的新增结构元素
在 HTML 5 中，为了使文档结构更加清晰，更容易阅读，增加了很多具有语义性的专门
用来划分文档结构的结构元素。接下来，我们对这些结构元素进行概要介绍。
4
HTML 5 开发精要与实例详解
q section 元素
section 元素是对页面文档结构进行划分的最基本也是最主要的结构元素，主要用来对网
站或应用程序中的页面上的内容进行层次结构上的划分。一个 section 元素通常由内容及其
标题组成。
例如，针对代码清单 1-2 中的代码，我们可以使用 section 元素进行页面文档结构的划
分，如代码清单 1-3 所示。
代码清单 1-3 在 HTML 5 中使用 section 元素描述文档结构
1 HTML5
的基础知识
1.1 HTML5
概述
（1.1 的正文）
1.1.1 HTML5
是什么？
（1.1.1 的正文）
1.1.2 HTML5
中的新增API
（1.1.2 的正文）
1.2 HTML5
快速入门
（1.2 的正文）
1.2.1 HTML
与XHTML
（1.2.1 的正文）
使用 section 元素时需要注意以下两点：
不要将 section 元素与 div 元素混淆使用。当一个容器需要直接定义样式或通过脚本定
义行为时，推荐使用 div 元素而非 section 元素。
通常不建议为那些没有标题（h1 ～ h6 元素）的内容使用 section，可以使用 HTML 5
轮廓工具（下载 HTML 5 轮廓工具的网址为“”）来
检查页面中是否有不包含标题部分的 section。如果使用该工具进行检查后，在某个
section 的说明中有“untitled section”（没有标题的 section）文字，这个 section 就可
能属于使用不当（nav 元素或 aside 元素没有标题是合理的）。
article 元素
article 元素代表文档、页面或应用程序中的所有“正文”部分，它所描述的内容应该是
独立的、完整的、可以独自被外部引用的，可以是一篇博客、一篇报刊中的文章、一篇论坛
第 1 章 用 HTML 5 中的结构元素构建网站
5
帖子、一段用户评论、一个独立的插件，或任何独立于上下文中其他部分的内容。
在一个 section 元素或 article 元素内，应该只有一个标题，如果有两个标题，则第二个
标题会被隐式放入一个新的 section 元素之内，如下面的代码所示，h2 元素之后的内容会被
隐式放入一个新的 section 元素内。
标题
副标题
正文
nav 元素
nav 元素是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面或当前页
面的其他部分。并不需要将所有的链接组都放进 nav 元素，只需要将主要的、基本的链接组
放进 nav 元素即可。例如，在页脚中通常会有一组链接，包括服务条款、首页和版权声明
等，这时使用 footer 元素是最恰当的。一个页面可以拥有多个 nav 元素，作为页面整体或不
同部分的导航。在 nav 元素中，一般以 ul 列表的形式来具体放置该组链接元素。
aside 元素
aside 元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内
容相关的引用、侧边栏、广告、导航条，以及其他有别于主要内容的部分。
aside 元素主要有以下两种使用方法。
被包含在 article 元素中作为主要内容的附属信息部分，其中的内容可以是与当前文
章有关的参考资料和名词解释等。
在 article 元素之外的元素中使用，作为页面或站点全局的附属信息部分。最典型的形
式是侧边栏，其中的内容可以是友情链接、博客中其他文章列表和广告单元等。
hgroup 元素
hgroup 元素是将标题及其子标题进行分组的元素。hgroup 元素通常对 h1 ～ h6 元素进行
分组，如将一个内容区块的标题及其子标题划为一组。
通常，如果一个 article 元素或 section 元素只有一个主标题，是不需要 hgroup 元素的。
但是，如果该元素内有一个主标题，主标题下又有一个或多个副标题，就需要使用 hgroup 元
素了，代码如下所示。
主标题
副标题
正文
6
HTML 5 开发精要与实例详解
header 元素
header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的
一个 article 元素或 section 元素的标题，也可以包含其他内容，例如数据表格、搜索表单或
相关的 logo 图片。
footer 元素
footer 元素可以作为其上层父级内容区块或一个根区块的脚注。footer 元素通常包括其
相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。
3. HTML 5 中的大纲
在 Word 文档中，一份文档的大纲如下：
1. HTML 5 的基础知识
1.1 HTML 5 概述
（第一章中第一节的正文）
1.1.1 HTML5 是什么？
（第一章中第一节第一小节的正文）
1.1.2 HTML5 中的新增 API
（第一章中第一节第二小节的正文）
1.2 HTML5 快速入门
（第一章中第二节的正文）
1.2.1 HTML 与 XHTML
（第一章中第二节第一小节的正文）
HTML 5 网页文档中的大纲也基本如此，只不过使用不同的结构元素来进行表达而已。
换句话说，在 HTML 5 中，使用各种结构元素所描述出来的整个网页的层次结构，就是该网
页的大纲。因此，在组织这份大纲的时候，不能使用 div 元素，因为 div 元素只能被当做容
器，用在需要对网页中某个局部使用整体样式时。
有许多工具可以对 HTML 5 的网页文档进行分析，然后将该文档中的大纲以可视化的形
式展现出来。前面提到的“”网站中就有一个文档大纲分
析工具，利用这分析工具对代码清单 1-4 所示文档进行分析，分析结果如图 1-1 所示。
代码清单 1-4 大纲分析工具测试用代码
HTML5
的基础知识
HTML5
概述
（正文）
HTML5
是什么？
第 1 章 用 HTML 5 中的结构元素构建网站
7
（正文）
HTML5
中的新增API
（正文）
HTML5
快速入门
（正文）
HTML
与XHTML
（正文）
图 1-1 在线大纲分析工具的分析结果
图 1-1 中出现“1.Untitled Section”，是由于该网页文档中第一个元素即为 section 元素，
缺乏整个网页标题元素。加入标题元素（h1），将代码清单 1-4 中的代码修改为如代码清单
1-5 所示，利用在线大纲分析工具分析出来的大纲如图 1-2 所示。
代码清单 1-5 添加了 header 元素后的大纲分析工具测试用代码
HTML5
的基础知识
HTML5
概述
（正文）
HTML5
是什么？
（正文）
8
HTML 5 开发精要与实例详解
HTML5
中的新增API
（正文）
HTML5
快速入门
（正文）
HTML
与XHTML
（正文）
图 1-2 加入网页标题后的页面大纲
看到这里，你也许会问，如果只加一个 h1 元素就可以分析出标题来，那么，还需要
header 元素干什么？答案是 h1 元素一般是用来显示文字标题的。事实上，在要定义为网页
标题的整个内容中，往往并不只是显示文字，其中包括了大量的导航条、企业的 logo 图片和
广告 Flash 等，这些内容都可以放在 header 元素中，作为整个网页标题的内容，而标题文字
为 h1 元素中的文字，在大纲中显示该标题文字。但是，这里要说明的是，header 元素本身
的作用不是生成大纲，大纲是依靠 header 元素中的 h1 ～ h6 元素来生成的，如果使用代码清
单 1-6 中的代码，则生成的大纲如图 1-3 所示。
代码清单 1-6 在企业网站中使用图片来显示企业名称
第 1 章 用 HTML 5 中的结构元素构建网站
9
用来显示企业名称的图片">
企业描述
（正文）
图 1-3 header 元素本身并不用于生成大纲
这里有这样一个问题，在很多企业网站（或其他网站）中，企业的标题并不是以文字来
显示的，而是为了视觉效果，放在图片中显示的。难道这种情况就不能生成大纲了吗？笔者
认为，这里有个小技巧，在 header 元素中，使用如下代码，既可以用图片来显示企业名称，
又可以生成大纲。
"> 企业名称
在 header 元素中使用这段代码后，生成的大纲如图 1-4 所示。
与 header 元素相同，footer 元素中如果没有标题元素 (h1 ～ h6 元素 ) 也不用于生成
大纲。
在代码清单 1-4 或代码清单 1-6 的底部追加如下代码，生成的大纲将不会有任何变化。
版权所有：陆凌牛
另外，对于 nav 元素和 aside 元素来说，如果不在元素内部加入标题元素 (h1 ～ h6 元
素 )，生成大纲时会在该元素所在位置处添加一个“Untitled Section”的说明文字，但是根据
HTML 5 的开发文档记载，nav 元素的作用是存放一组链接组，aside 元素的作用是表示当前
页面或文章的附属信息部分，允许不在这两个元素中添加标题，也就是说，大纲中存在对于
10
HTML 5 开发精要与实例详解
这两个元素的内容为“Untitled Section”的说明文字是合理的。
图 1-4 在 header 元素中使用图片来生成大纲
在代码清单 1-4 的底部添加如下代码，生成的大纲如图 1-5 所示。
侧边栏中的内容
图 1-5 在文档的底部添加 nav 元素与 aside 元素所生成的大纲
第 1 章 用 HTML 5 中的结构元素构建网站
11
另外，在 HTML 5 中，body 元素、blockquote 元素、fieldset 元素、td 元素、details 元素及
figure 元素被称为节根（sectioning roots）元素。这些元素的共同特征是拥有自己独立的大纲，
并且这些元素内的 section 元素、article 元素、标题元素 (h1 ～ h6 元素 )、nav 元素以及 aside
元素等，只用在生成其父元素的大纲时，而不用在生成父元素的上层祖先元素的大纲时。
在代码清单 1-7 中，blockquote 元素内部有一个 h1 元素，正是因为这个 h1 元素是位于
blockquote 元素内部的，所以在针对 blockquote 元素的父元素 body 生成页面大纲时，该 h1
元素并没有显示在大纲中，如图 1-6 所示。
代码清单 1-7 针对 body 元素生成大纲时节根元素中的子元素不起作用
网页标题
节根元素内部标题
图 1-6 针对 body 元素生成大纲时节根元素中的子元素不起作用
掌握了 HTML 5 的文档结构、结构元素以及大纲的生成原则之后，就可以学习如何使
用这些基础知识来搭建一个语义清晰、结构分明的 HTML 5 网站了。下面先介绍一个利用
HTML 5 中的各种结构元素搭建出来的博客网站。
本文摘自 - 《HTML 5 开发精要与实例详解》
