每天学一点儿HTML5的新标签

2023-01-02 21:30:10

sections部分

（http://www.w3.org/TR/html5/sections.html）

标签：article

article标签用来表示页面中一段完整的可以自我包含的片段，具有可重用的特性。可以是一条贴子、杂志或报纸的文章、一篇博客、一条用户提交的评论，也可以是一个可交互的组件，甚至可以是任意独立的内容条目。

article标签是可以嵌套使用的，比如一篇文章之后的评论就可以嵌套放在表示文章的article元素之内。

范例：

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

标签：section

section标签表示文档或者应用当中的一个章节片断。章节片断可以带有自己的heading。

section可以用来表示文章的章节，一个标签页。一个网站的首页可以通过section分为介绍、新闻、联系方式等等部分。

section可以嵌套使用。

范例：

<article>
    <header>
        <h1>标题</h1>
    </header>
    <section>
        <h1>章节一标题</h1>
        <p>章节一段落</p>
    </section>
    <section>
        <h1>章节二标题</h1>
        <p>章节二段落</p>
    </section>
</article>

article还是section？

套用HTML5规范里的一句话：A section forms part of something else. An article is its own thing. 意思就是说section总是多次出现的，因为每个section是若干sections的一部分。而article很独立，一个页面可以只有一个article。

标签：nav

nav包含导航链接的片段。

范例：

<nav>
    <p><a href="/">Home</a>
    <p><a href="/biog.html">Bio</a>
    <p><a href="/discog.html">Discog</a>
</nav>

标签：aside

aside标签代表与正文内容无关的部分。可以是边栏上引述的文字内容，广告，也可以包含nav元素。判断是否使用aside标签就看其包含的内容是否属于住文档流中。

范例：

<h1>Music</h1>
<p>As any burner can tell you, the event has a lot of trance.</p>
<aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside>
<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>

标签：header

header表示当前所在段落、章节的介绍性信息以及导航链接信息，一般情况下会包含h1-h6，但也可以不包含，也可以使用其他元素来表示其中内容。

强调一点，html中h1-h6是真正的标题（heading），header则是包含介绍性的信息（例如目录、搜索框、logo等），其中可以包含标题，也可以不包含。

范例：

<article>
    <header>
        <h1>Hard Trance is My Life</h1>
        <p>By DJ Steve Hill and Technikal</p>
    </header>
    <p>The album with the amusing punctuation has red artwork.</p>
</article>

标签：footer

footer标签表示页脚，通常包含文章的作者、相关信息的链接、版权信息等等。footer可以包含整段的附录信息、索引信息、版本更新记录、许可协议。footer通常都是出现在内容的最后，但也不一定。

范例：

<article>
    <h1>Hard Trance is My Life</h1>
    <p>The album with the amusing punctuation has red artwork.</p>
    <footer>
        <p>Artists: DJ Steve Hill and Technikal</p>
    </footer>
</article>

标签：address

address标签表示与article或者body所包含内容相关的联系信息。注意address并不是一般意义上的地址，除非这个地址与联系信息相关（例如文章里提到了某个地址，就不能用address标签来描述）。address只得包含联系信息。

范例：

<address>
    <a href="../People/Raggett/">Dave Raggett</a>,
    <a href="../People/Arnaud/">Arnaud Le Hors</a>,
 contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>

码农公寓