当前位置: 代码迷 >> HTML/CSS >> [转] [HTML5] HTML5开发入门-第4来 通过HTML5的section来理解“文档结构”
  详细解决方案

[转] [HTML5] HTML5开发入门-第4来 通过HTML5的section来理解“文档结构”

热度:306   发布时间:2012-12-26 14:39:29.0
[转] [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相关的各种元素