HTML5学习笔记二

主体结构元素：section、article、nav、aside

【注】内容区块：是指将页面按逻辑进行分割的单位。例如对于书籍来说，章、节都可以成为内容区块；对于博客来说，导航菜单，文章正文，文章评论等每一个部分都可以称为内容区块。

article：可独自被外部引用的内容，可以是一篇博文，或报刊中的文章、一片论坛帖子。

<article>             <h1>苹果</h1>            <p>发表日期:            <time pubdate datetime="2010/10/09">2010/10/09</time>        </p>    <p><b>苹果</b> ，植物类水果，多次花果...（“苹果”文章正文）</p>     <section>            <h2>评论</h2>            <article>                  <header>                      <h3>发表者：陆凌牛</h3>                      <p><time pubdate datetime="2010-10-10T19:10-08:00">1小时前</time></p>                </header>                <p>我喜欢苹果，我最喜爱的品种是红富士。</p>            </article>            </section></article>

 

 

 

section：此元素通常有内容及其标题组成，但section元素并非一个普通的容器元素，当一个容器需要被定义样式或javascript定义行为时，推荐使用div而非section，

              或者这样理解：section元素中的内容可以单独存储到数据库中或输出到word文档中

*通常不推荐为那些没有标题的内容使用section

也许很多人会将section和article两者混淆，下面贴段代码帮助理解。

<article>      <h1>苹果</h1>      <p><b>苹果</b> ，植物类水果，多次花果...</p>    <section>            <h2>红富士</h2>            <p>红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...</p>      </section>      <section>            <h2>国光</h2>            <p>国光苹果品，又名小国光、万寿。原产美国，1600年发现的偶然实生苗...</p>      </section>    </article>

 

在上述代码中，内容首先是一段独立的、完整的内容，因此使用article元素。该内容是一篇关于苹果的文章，该文章分为3段，每一段都有一个独立的标题，因此使用了两个section。

在HTML5里，section元素强调的是分段或分块，而article强调独立性

section元素的使用禁忌：

1）不要将section元素用作设置样式的页面容器，那是div元素的工作。

2）如果article元素、aside元素或nav元素更符合使用条件，就不要使用section元素。

3）不要为没有标题的内容区块使用section元素。

 

nav：用作页面导航的链接组。

<nav>    <ul>        <li><a href="/">主页</a></li>        <li><a href="/events">开发文档</a></li>        ...more...    </ul></nav><article>   <header>        <h1>HTML5与CSS3的历史</h1>        <nav>            <ul>                <li><a href="#HTML5">HTML5的历史</a></li>                <li><a href="#CSS3">CSS3的历史</a></li>                ...more...            </ul>        </nav>    </header>    <section id="HTML5">        <h1>HTML5的历史</h1>        <p>讲述HTML5的历史的正文</p>    </section>    <section id="CSS3">        <h1>CSS3的历史</h1>        <p>讲述CSS3的历史的正文</p>    </section>    ...more...    <footer>        <p>            <a href="?edit">编辑</a> |             <a href="?delete">删除</a> |             <a href="?rename">重命名</a>        </p>    </footer></article><footer>    <p><small>版权所有：陆凌牛</small></p></footer>

 

使用场合：传统导航条、侧边栏导航、页内导航、翻页操作。

aside：用来标示当前页面或文章的附属信息部分。

1）：被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前article内容有关的参考资料、名词解释、文献等等。

<article>      <h1>第四节 词法闭包</h1>      <p>lambda表达式可以创建词法闭包...(文章正文）</p>        <aside>              <!-- 因为这个aside元素被放置在一个article元素内部，        所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 -->              <h1>名词解释</h1>              <dl>                    <dt>F#</dt>                    <dd>F#为.Net2010中引入的新型函数型编程语言</dd>              </dl>            <dl>                    <dt>词法闭包</dt>                    <dd>词法闭包是指，将创建lambda表达式时的环境保存起来...(详细解释）</dd>             </dl>           </aside>  </article>

 

2）：在article元素之外使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接，博客中的其他文章列表，广告单元等等。

 

非主体结构元素：header、hgroup、footer

header：通常用来放置整个页面或页面内的一个内容区块的标题，当然也可以包含其他内容，例如数据表格，搜索表单，相关logo等。

<header>    <h1>网页标题</h1></header><article>    <header>        <h1>文章标题</h1>    </header>        <p>文章正文</p></article>

 

强调：一个网页内并未限制header元素的个数！在HTML5规范中，一个header元素通常包括至少一个heading元素（h1-h6），也可以包括hgroup元素。

hgroup：将标题及其子标题进行分组的元素。hgroup通常会将h1~h6元素进行分组，如果文章只有一个主标题，就不需要hgroup元素。

<article>    <header>        <h1>文章标题</h1>        <p><time datetime="2010-03-20">2010年10月29日</time></p>    </header>    <p>文章正文</p></article>

 

如果有多个标题，则如下所示：

<article>    <header>        <hgroup>            <h1>文章主标题</h1>            <h2>文章子标题</h2>        </hgroup>        <p><time datetime="2010-03-20">2010年10月29日</time></p>    </header>    <p>文章正文</p></article>

 

footer：作为其上层父级内容区块或一个根区块的脚注。通常包含其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。与header一样，页面并未限制footer的个数。