[转] [HTML5] HTML5开发入门--第4回 通过HTML5的section来理解“文档结构”
http://bbs.9ria.com/viewthread.php?tid=81542&extra=page%3D1%26amp%3Borderby%3Ddateline%26amp%3Bfilter%3D2592000
前3回我们讲解了HTML5的相关基础知识。从本回开始，将介绍HTML5中定义的标记元素。 HTML5中的元素数目达到了100个以上。其中也包含着许多从HTML4继承过来的既存元素，有关这些元素已经存在不少非常好的教程。再则，本连载不是HTML的标记参考，将不以HTML5全部元素的辞典形式来写。 考虑到广大读者最感兴趣的还是HTML5的情况，因此本系列中将介绍的是HTML5的新元素以及使用方法有变化的元素。 此外，还设定了各回的主题，以主题为线索对相关元素进行介绍。相对于对各个元素分别进行介绍，采用这种方式能够促进读者自然而然地理解内容。 下图为本连载中将会介绍的HTML5新元素：
HTML5的新元素以及有变化的元素
本回和下回将对section相关元素进行讲解。section相关元素及其背景 section相关元素，是为了明确表现HTML文档的“文档结构”而在HTML5中新引入的元素集。□ HTML 4的“文档结构”表现方式 不仅是HTML文挡，人们写的文档一般也是以“部→章→节→项”的层次结构构成的。在HTML4中要表现这种层次结构只能使用标题元素（～元素）。 例如在HTML 4中要描述“章→节→项”3个层次构成的文章，是这么写的：
[align=left; font-style: normal; line-height: normal; color: #666666; font-size: 12px; cursor: pointer; padding: 0px;]复制代码[/align]
通过这种方式乍一看虽然起到了“表现文档的树形结构”的作用，但总觉得不太直观。章和节没有使用段落元素来包围，表现不出层次缩进，从标记上不容易看出“从哪儿到哪儿是第1章？”、“是怎么样的树形结构？”。 以前为了解决这个问题一般使用标签来创建嵌套的段落结构。例如“章”为“”所包含的内容。 但是本来是“不具有任何意义”的元素。让它来担当“表现文档结构”的重要责任是不合适的，而且与以样式为目的的混用，让文档埋没在标签中，使关键的文档结构变得难以理解。□ 使用HTML5来重写的话…… HTML5中新引入了表现文档逻辑结构的元素。这就是section相关元素。 最具代表性的表现文档section的元素是。使用这个元素重写刚才的标记，代码如下：
[align=left; font-style: normal; line-height: normal; color: #666666; font-size: 12px; cursor: pointer; padding: 0px;]复制代码[/align]
较之只使用标题元素，标记的数量虽然增加了，但能自始至终更容易地把握文挡的树形结构。□ 使用section元素时的原则 上面对section相关元素的必要背景进行了说明。根据这样的背景，使用section元素时的原则也就变得很清楚了。
section元素应该只用语文档结构的表现，不能以和相同的感觉去乱用。以CSS（样式）为目的分组元素时，还是使用合适。
一般，section元素与标题元素（～）组合使用。认为不需要标题时，或许也不适合使用section元素。
另外，将使用section元素（或者，不使用section元素时的标题元素）构成的文档逻辑结构称为文档的“布局”。使用section元素标记时，总是将布局结构置于头部位置（下回将详细解说大纲的相关内容）。section相关的4个基本元素 section元素，有如下几个：
section最基本的section元素
article表现文档的“正文”部分的section元素
nav表现网站导航菜单部分的section元素
aside表现与页面主要内容关系不大的部分的section元素
下面来一一讲解。□ 表现文档逻辑结构的最基本的元素 在“section相关元素及其背景”一节也提到过，这是表现文档逻辑结构的最基本的section元素。在实际的标记中，也是最常用的吧。□ 表现文档“正文”部分的元素 表现Web页面中“正文部分”的元素。在博客或普通Web媒体一看便知，Web页面中除了所谓的“正文”部分之外还有许多组成元素（导航菜单、侧栏、广告等）。因此，有必要使用元素来明确中文部分。 这样一来，即便是对于搜索引擎或点击付费广告来说，也能较容易地判断哪里是页面的主要内容。 要判断页面上的某部分是否适合使用元素来包裹，基准之一是“这部分的内容是否独立完整”。具体而言，就是以“仅将元素所包裹的内容来做RSS通信意思是否完整。”来作判断基准。 另外，元素也能嵌套使用。将嵌套内层的元素视为与嵌套外层的元素有着较深的关联性。例如考虑一下“将对博客正文的评论逐条通过嵌套的元素来表现”等标记方法。请见下例：
[align=left; font-style: normal; line-height: normal; color: #666666; font-size: 12px; cursor: pointer; padding: 0px;]复制代码[/align]
□ 表现导航菜单的元素 这是表现Web网站的导航菜单元素。在这个元素中，可以设置跳转到其它页面或文档中的其它地方。 但并非所有的链接都适用元素。元素是为了区别其它链接元素和导航菜单而产生的。因此，只有提供网站主要导航的链接才适用元素。 例如，页面顶部常有“使用规定”，“运营企业”的链接。这些不适用元素来包裹。 下例展示了元素的使用方法。通常会在元素内部使用元素来配置链接。
[align=left; font-style: normal; line-height: normal; color: #666666; font-size: 12px; cursor: pointer; padding: 0px;]复制代码[/align]
□ 表现与Web页面的主要内容关系不大的元素元素用来表现与Web页面的主要内容关系不大的或者可单独处理的部分。最适合运用于诸如博客上的侧栏、广告区、摘要等。 以下是使用元素来表现博客页面侧栏的示例
[align=left; font-style: normal; line-height: normal; color: #666666; font-size: 12px; cursor: pointer; padding: 0px;]复制代码[/align]
在section中使用标题元素时的注意点 如前面所述，各section中通常含有～标题元素。有关section的标题，需要知晓以下几点。□ 不同的section也可使用同级标题 使用section元素明确表现文档的树形结构时，在不同的section也可使用同级标题。例如，也可以“所有的section都只使用元素”。 下例是从前面介绍的元素使用示例改编而来。在原来的例子中，与section的树形结构(布局)相对应，分别使用了标题。本例将所有的标题都用元素来标记。
[align=left; font-style: normal; line-height: normal; color: #666666; font-size: 12px; cursor: pointer; padding: 0px;]复制代码[/align]
如您所见，通过元素的嵌套关系能够表现文档的逻辑结构，不需要使用标题的阶层。而且这种“明确指定section，总是通过来表现标题”的标记法也是HTML5规范所强烈推荐的。 那么，要说之后的标题元素是否就没用了呢？情况并非如此。下例所示，在1个section中表现多级标题时使用。□ 在各section中只使用1个标题 有关标题元素还有1个注意点，那就是“在1个section中只能含有1个标题元素”。例如，使用如下代码来标记具有标题和子标题的文章，会发生预期之外的结果。
[align=left; font-style: normal; line-height: normal; color: #666666; font-size: 12px; cursor: pointer; padding: 0px;]复制代码[/align]
详细情况将在下回讲解。上例中的元素自动创建了隐式的section，使得布局与预期不符。也就是说，破坏了“1个section，1个标题元素”的原则，因此引发了预料之外的结果。□ 整理标题用的元素 在本例的标记中，为了表现出“1个section同时具有2个级别的标题（标题和子标题）”的意图，使用了具有“整理标题”效果的元素。
[align=left; font-style: normal; line-height: normal; color: #666666; font-size: 12px; cursor: pointer; padding: 0px;]复制代码[/align]
元素将自身视为1个标题元素。将hgroup自身作为标题处理时，文本内容使用元素中阶层最高的标题元素的阶层。下回继续讲解section相关元素和布局 本回介绍了section元素和标题元素的基本使用方法。 下回，我们来学习section的top和foot的创建方法以及与section相关的各种元素前3回我们讲解了HTML5的相关基础知识。从本回开始，将介绍HTML5中定义的标记元素。
HTML5中的元素数目达到了100个以上。其中也包含着许多从HTML4继承过来的既存元素，有关这些元素已经存在不少非常好的教程。再则，本连载不是HTML的标记参考，将不以HTML5全部元素的辞典形式来写。
考虑到广大读者最感兴趣的还是HTML5的情况，因此本系列中将介绍的是HTML5的新元素以及使用方法有变化的元素。
此外，还设定了各回的主题，以主题为线索对相关元素进行介绍。相对于对各个元素分别进行介绍，采用这种方式能够促进读者自然而然地理解内容。
下图为本连载中将会介绍的HTML5新元素：
HTML5的新元素以及有变化的元素
本回和下回将对section相关元素进行讲解。
section相关元素及其背景
section相关元素，是为了明确表现HTML文档的“文档结构”而在HTML5中新引入的元素集。
□ HTML 4的“文档结构”表现方式
不仅是HTML文挡，人们写的文档一般也是以“部→章→节→项”的层次结构构成的。在HTML4中要表现这种层次结构只能使用标题元素（<h1>～<h6>元素）。
例如在HTML 4中要描述“章→节→项”3个层次构成的文章，是这么写的：
<h1>1 HTML5的基础知识</h1>
<h2>1.1 HTML5的概要</h2>
正文正文
<h3>1.1.1 HTML5是什么</h3>
正文正文
<h3>1.1.2 HTML5和相关API</h3>
正文正文
<h2>1.2 HTML5快速入门</h2>
正文正文
<h3>1.2.1 HTML和XHTML</h3>
正文正文
...
复制代码
通过这种方式乍一看虽然起到了“表现文档的树形结构”的作用，但总觉得不太直观。章和节没有使用段落元素来包围，表现不出层次缩进，从标记上不容易看出“从哪儿到哪儿是第1章？”、“是怎么样的树形结构？”。
以前为了解决这个问题一般使用<div>标签来创建嵌套的段落结构。例如“章”为“<div class="chapter">”所包含的内容。
但是<div>本来是“不具有任何意义”的元素。让它来担当“表现文档结构”的重要责任是不合适的，而且与以样式为目的的<div>混用，让文档埋没在<div>标签中，使关键的文档结构变得难以理解。
□ 使用HTML5来重写的话……
HTML5中新引入了表现文档逻辑结构的元素。这就是section相关元素。
最具代表性的表现文档section的元素是<section>。使用这个元素重写刚才的标记，代码如下：
<section>
<h1>1 HTML5的基础知识</h1>
<section>
<h2>1.1 HTML5的概要</h2>
正文正文
<section>
<h3>1.1.1 HTML5是什么</h3>
正文正文
</section>
<section>
<h3>1.1.2 HTML5和相关API</h3>
正文正文
</section>
</section>
<section>
<h2>1.2 HTML5快速入门</h2>
正文正文
<section>
<h3>1.2.1 HTML和XHTML</h3>
正文正文
</section>
</section>
...
</section>
复制代码
较之只使用标题元素，标记的数量虽然增加了，但能自始至终更容易地把握文挡的树形结构。
□ 使用section元素时的原则
上面对section相关元素的必要背景进行了说明。根据这样的背景，使用section元素时的原则也就变得很清楚了。
section元素应该只用语文档结构的表现，不能以和<div>相同的感觉去乱用。以CSS（样式）为目的分组元素时，还是使用<div>合适。
一般，section元素与标题元素（<h1>～<h6>）组合使用。认为不需要标题时，或许也不适合使用section元素。
另外，将使用section元素（或者，不使用section元素时的标题元素）构成的文档逻辑结构称为文档的“布局”。使用section元素标记时，总是将布局结构置于头部位置（下回将详细解说大纲的相关内容）。
section相关的4个基本元素
section元素，有如下几个：
section
最基本的section元素
article
表现文档的“正文”部分的section元素
nav
表现网站导航菜单部分的section元素
aside
表现与页面主要内容关系不大的部分的section元素
下面来一一讲解。
□ 表现文档逻辑结构的最基本的<section>元素
在“section相关元素及其背景”一节也提到过，这是表现文档逻辑结构的最基本的section元素。在实际的标记中，也是最常用的吧。
□ 表现文档“正文”部分的<article>元素
表现Web页面中“正文部分”的元素。在博客或普通Web媒体一看便知，Web页面中除了所谓的“正文”部分之外还有许多组成元素（导航菜单、侧栏、广告等）。因此，有必要使用<article>元素来明确中文部分。
这样一来，即便是对于搜索引擎或点击付费广告来说，也能较容易地判断哪里是页面的主要内容。
要判断页面上的某部分是否适合使用<article>元素来包裹，基准之一是“这部分的内容是否独立完整”。具体而言，就是以“仅将<article>元素所包裹的内容来做RSS通信意思是否完整。”来作判断基准。
另外，<article>元素也能嵌套使用。将嵌套内层的<article>元素视为与嵌套外层的<article>元素有着较深的关联性。例如考虑一下“将对博客正文的评论逐条通过嵌套的<article>元素来表现”等标记方法。请见下例：
<html>
<body>
<article>
<h1>正文标题</h1>
正文正文
<section>
<h1>评论栏</h1>
<article>
<h1>评论1标题</h1>
评论评论
</article>
<article>
<h1>评论2标题</h1>
评论评论
</article>
</section>
</article>
</body>
</html>
复制代码
□ 表现导航菜单的<nav>元素
这是表现Web网站的导航菜单元素。在这个元素中，可以设置跳转到其它页面或文档中的其它地方。
但并非所有的链接都适用<nav>元素。<nav>元素是为了区别其它链接元素和导航菜单而产生的。因此，只有提供网站主要导航的链接才适用<nav>元素。
例如，页面顶部常有“使用规定”，“运营企业”的链接。这些不适用<nav>元素来包裹。
下例展示了<nav>元素的使用方法。通常会在<nav>元素内部使用<ul>元素来配置链接。
<body>
<header>
<h1>网站标题</h1>
<!-- 导航菜单 -->
<nav>
<h1>网站导航</h1>
<ul>
<li><a href="top.html">首页</a></li>
<li><a href="top.html">设置</a></li>
<li><a href="top.html">帮助</a></li>
<li><a href="top.html">注销</a></li>
</ul>
</nav>
</header>
<article>
<h1>正文标题</h1>
……
</article>
</body>
复制代码
□ 表现与Web页面的主要内容关系不大的<aside>元素
<aside>元素用来表现与Web页面的主要内容关系不大的或者可单独处理的部分。最适合运用于诸如博客上的侧栏、广告区、摘要等。
以下是使用<aside>元素来表现博客页面侧栏的示例
<body>
<h1>博客标题</h1>
<article>
……
</article>
<aside class="sidebar">
<h1>侧栏</h1>
<section class="ads">
广告
</section>
<nav class="archives">
日志存档
</nav>
</aside>
</body>
复制代码
在section中使用标题元素时的注意点
如前面所述，各section中通常含有<h1>～<h6>标题元素。有关section的标题，需要知晓以下几点。
□ 不同的section也可使用同级标题
使用section元素明确表现文档的树形结构时，在不同的section也可使用同级标题。例如，也可以“所有的section都只使用<h1>元素”。
下例是从前面介绍的<section>元素使用示例改编而来。在原来的例子中，与section的树形结构(布局)相对应，分别使用了<h1><h2><h3>标题。本例将所有的标题都用<h1>元素来标记。
<section>
<h1>1 HTML5的基础知识</h1>
<section>
<h1>1.1 HTML5的概要</h1>
正文正文
<section>
<h1>1.1.1 HTML5是什么</h1>
正文正文
</section>
<section>
<h1>1.1.2 HTML5和相关API</h1>
正文正文
</section>
</section>
<section>
<h1>1.2 HTML5快速入门</h1>
正文正文
<section>
<h1>1.2.1 HTML和XHTML</h1>
正文正文
</section>
</section>
……
</section>
复制代码
如您所见，通过<section>元素的嵌套关系能够表现文档的逻辑结构，不需要使用标题的阶层。而且这种“明确指定section，总是通过<h1>来表现标题”的标记法也是HTML5规范所强烈推荐的。
那么，要说<h2>之后的标题元素是否就没用了呢？情况并非如此。下例所示，在1个section中表现多级标题时使用。
□ 在各section中只使用1个标题
有关标题元素还有1个注意点，那就是“在1个section中只能含有1个标题元素”。例如，使用如下代码来标记具有标题和子标题的文章，会发生预期之外的结果。
<article>
<h1>标题</h1>
<!-- 会创建隐式的section，与预期布局不符 -->
<h2>子标题</h2>
正文正文
</article>
复制代码
详细情况将在下回讲解。上例中的<h2>元素自动创建了隐式的section，使得布局与预期不符。也就是说，破坏了“1个section，1个标题元素”的原则，因此引发了预料之外的结果。
□ 整理标题用的<hgroup>元素
在本例的标记中，为了表现出“1个section同时具有2个级别的标题（标题和子标题）”的意图，使用了具有“整理标题”效果的<hgroup>元素。
<article>
<!-- 由hgroup将2个标题元素整理在一起 -->
<hgroup>
<h1>标题</h1>
<h2>子标题</h2>
</hgroup>
正文正文
</article>
复制代码
<hgroup>元素将自身视为1个标题元素。将hgroup自身作为标题处理时，文本内容使用<hgroup>元素中阶层最高的标题元素的阶层。
下回继续讲解section相关元素和布局
本回介绍了section元素和标题元素的基本使用方法。
下回，我们来学习section的top和foot的创建方法以及与section相关的各种元素
