[转] [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]