HTML5系列：HTML5结构

1. 主体结构元素

　　在HTML5中，为了使文档的结构更加清晰明确，增加几个与页眉、页脚、内容区块等文档结构相关联的结构元素。

1.1 article元素

　　article元素表示文档、页面或应用程序中独立、完整、可以独立被外部引用的内容。可以是一篇博客或文章，或其他的任何独立的内容。

　　除了内容部分，一个article元素可以有header元素、footer元素。

<article>
    <header>
        <h1>Title</h1>
        <div><time>2015-04-09</time></div>
    </header>
    <div></div>
    <footer>
        <small>Copywrite</small>
    </footer>
</article>

　　article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。如一篇博客文章中，评论可以使用嵌套article元素，用来显示评论的article元素被嵌套包含在表示整体内容的article元素中。

<article>
    <header>
        <h1>Title</h1>
        <div><time>2015-04-09</time></div>
    </header>
    <div></div>
    <section>
        <h2>Comments</h2>
        <article>
            <header>
                <h3></h3>
                <div></div>
            </header>
        </article>
        <article>
            <header>
                <h3></h3>
                <div></div>
            </header>
        </article>
    </section>
    <footer>
        <small>Copywrite</small>
    </footer>
</article>

1.2 section元素

　　section元素用于对页面内容进行分块，一个section元素通常由内容及其标题组成。通常不在没有标题的内容区域使用section。

<article>
    <h1></h1>
    <section>
        <h2></h2>
        <div></div>
    </section>
    <section>
        <h2></h2>
        <div></div>
    </section>
</article>

<section>
    <h1></h1>
    <article>
        <h2></h2>
        <div></div>
    </article>
    <article>
        <h2></h2>
        <div></div>
    </article>
</section>

1.3 nav元素

　　nav元素是一个可以用作页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。一个页面可以有多个nav元素，作为页面整体或不同部分的导航。

　　示例

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

1.4 aside元素

　　aside元素用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、导航条，以及其他类似的有别于主要内容的部分。

　　aside元素的两种主要用法:

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

<article>
    <aside>
        <h1>名称解释</h1>
        <p></p>
    </aside>
</article>

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

<aside>
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
</aside>

1.5 time元素

　　time元素代表24小时中的某个时刻或某个日期，可以定义多种格式的日期和时间。

<time datetime="2015-04-18">2015年04月18日</time>

　　编码时机器读到的部分在datetime属性里，元素在网页显示的是开始标记与结束标记之间的部分。

　　pubdate属性

　　pubdate属性是一个可选的、boolean值的属性，用于time元素上表示发布日期。

<time datetime="2015-04-18" pubdate>2015年04月18日</time>

2. 非主体结构元素

2.1 header元素

　　header元素是具有引导和导航作用的结构元素，常用来放置整个页面或页面内的一个内容区块的标题。一个网页内并未限制header元素的个数，可以有多个，为每个内容区块添加header元素。

<header>
    <h1>标题</h1>
</header>
<article>
    <header>
        <h1>标题</h1>
    </header>
</article>

　　在HTML5中，一个header元素通常包括至少一个heading元素(h1-h6)。

2.2 footer元素

　　footer元素可以作为一个区块的脚注，通常包括脚注信息，如作者、相关阅读链接及版权信息等。

<footer>
    <ul>
        <li></li>
        <li></li>
    </ul>
</footer>

　　可以为article元素或section元素添加footer元素。

<article>
    <footer>
        <p></p>
    </footer>
</article>

<section>
    <footer>
        <p></p>
    </footer>
</section>

2.3 address元素

　　address元素用来在文档中呈现联系信息，包括文档作者、链接、邮箱等。

<footer>
    <address>作者</address>
    <time datetime="2015-04-18" pubdate>2015年4月18日</time>
</footer>