HTML5学习笔记简明版（2）：新元素之section,article,aside

section

section元素描绘的是一个文档或者程序里的普通的section节，一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节，或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section，分别代表introduction, news ITems和contact information。

如果元素的内容集中到一起显示可以表达相应的意思的话，那就可以定义成article元素，而没必要使用section元素。

section元素不是一般的容器元素，所以如果一个元素需要定义相应的style或者script脚本的话，那推荐使用p元素，section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里。

下面的例子代码来自苹果网站页面的一部分，代码里包含了2个短小的section：

article>

    hgroup>

        h1> Apples/h1>

        h2> Tasty, delicious fruit!/h2>

    /hgroup>

    p> The apple is the pomaceous fruit of the apple tree./p>

    section>

        h1> red Delicious/h1>

        p> These bright red apples are the most common found in many suPErmarkets./p>

    /section>

    section>

        h1> Granny Smith/h1>

        p> These juicy, green apples make a great filling for apple pies./p>

    /section>

/article>

可以看到，在section里可以任意使用h1元素，而不用考虑这个section是顶级的，还是二级或者三级元素。

下面的代码是一个毕业典礼的页面，包含2个section，一个是显示将要毕业人的名单，一个是显示毕业典礼的形式。

!DOCTYPE HtML>

html>

head>

    title> Graduation Ceremony Summer 2022/title>

/head>

body>

    h1> Graduation/h1>

    section>

        h1> Ceremony/h1>

        p> Opening PRocession/p>

        p> Speech by Validactorian/p>

        p> Speech by Class President/p>

        p> Presentation of Diplomas/p>

        p> Closing Speech by Headmaster/p>

    /section>

    section>

        h1> Graduates/h1>

        ul>

            li> molly Carpenter/li>

            li> Anastasia Luccio/li>

            li> Ebenezar McCoy/li>

            li> Karrin Murphy/li>

            li> Thomas Raith/li>

            li> Susan Rodriguez/li>

        /ul>

    /section>

/body>

/html>

article

article代表了一个文档内容的独立片段，例如，博客条目或报纸文章，article> 标签的内容独立于文档的其余部分。

article 是一个特殊的section 标签，它比section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说，article 会有标题部分(通常包含在header 内)，有时也会 包含footer 。虽然section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

当article 内嵌article 时，原则上来说，内部的article 的内容是和外层的article 内容是相关的。例如，一篇博客文章中，包含用户提交的评论的article 就应该潜逃在包含博客文章article 之中。

article>

a href="https://www.apple.COM"> Safari 5 released/a> br />

7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,

Apple announced the release of Safari 5 for Windows and Mac......

/article>

aside

HTML5提供的aside> 元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，aside> 元素有两种使用方法：

n  被包含在article> 中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

n  在article> 之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

下面的代码示例综合了以上两种使用方法：

body>

    header>

        h1> My blog/h1>

    /header>

    article>

        h1> My BLOG Post/h1>

        p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

            incididunt ut labore et dolore magna aliqua./p>

        aside>

            !-- Since this aside is contained within an article, a parser

      should understand that the content of this aside is directly related

www.2cto.com

      to the article itself. -->

            h1> Glossary/h1>

            dl>

                dt> Lorem/dt>

                dd> ipsum dolor sit amet/dd>

            /dl>

        /aside>

    /article>

    aside>

        !-- This aside is outside of the article. Its content is related

    to the page, but not as closely related to the above article -->

        h2> Blogroll/h2>

        ul>

            li> a href="#"> My Friend/a> /li>

            li> a href="#"> My Other Friend/a> /li>

            li> a href="#"> My Best Friend/a> /li>

        /ul>

    /aside>

/body>

  作者 汤姆大叔

section

section元素描绘的是一个文档或者程序里的普通的section节，一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节，或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section，分别代表introduction, news items和contact information。

如果元素的内容集中到一起显示可以表达相应的意思的话，那就可以定义成article元素，而没必要使用section元素。

section元素不是一般的容器元素，所以如果一个元素需要定义相应的style或者script脚本的话，那推荐使用p元素，section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里。

下面的例子代码来自苹果网站页面的一部分，代码里包含了2个短小的section：

article>

    hgroup>

        h1> Apples/h1>

        h2> Tasty, delicious fruit!/h2>

    /hgroup>

    p> The apple is the pomaceous fruit of the apple tree./p>

    section>

        h1> Red Delicious/h1>

        p> These bright red apples are the most common found in many supermarkets./p>

    /section>

    section>

        h1> Granny Smith/h1>

        p> These juicy, green apples make a great filling for apple pies./p>

    /section>

/article>

可以看到，在section里可以任意使用h1元素，而不用考虑这个section是顶级的，还是二级或者三级元素。

下面的代码是一个毕业典礼的页面，包含2个section，一个是显示将要毕业人的名单，一个是显示毕业典礼的形式。

!DOCTYPE Html>

html>

head>

    title> Graduation Ceremony Summer 2022/title>

/head>

body>

    h1> Graduation/h1>

    section>

        h1> Ceremony/h1>

        p> Opening Procession/p>

        p> Speech by Validactorian/p>

        p> Speech by Class President/p>

        p> Presentation of Diplomas/p>

        p> Closing Speech by Headmaster/p>

    /section>

    section>

        h1> Graduates/h1>

        ul>

            li> Molly Carpenter/li>

            li> Anastasia Luccio/li>

            li> Ebenezar McCoy/li>

            li> Karrin Murphy/li>

            li> Thomas Raith/li>

            li> Susan Rodriguez/li>

        /ul>

    /section>

/body>

/html>

article

article代表了一个文档内容的独立片段，例如，博客条目或报纸文章，article> 标签的内容独立于文档的其余部分。

article 是一个特殊的section 标签，它比section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说，article 会有标题部分(通常包含在header 内)，有时也会 包含footer 。虽然section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

当article 内嵌article 时，原则上来说，内部的article 的内容是和外层的article 内容是相关的。例如，一篇博客文章中，包含用户提交的评论的article 就应该潜逃在包含博客文章article 之中。

article>

a href="https://www.apple.com"> Safari 5 released/a> br />

7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,

Apple announced the release of Safari 5 for Windows and Mac......

/article>

aside

HTML5提供的aside> 元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，aside> 元素有两种使用方法：

n  被包含在article> 中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

n  在article> 之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

下面的代码示例综合了以上两种使用方法：

body>

    header>

        h1> My Blog/h1>

    /header>

    article>

        h1> My Blog Post/h1>

        p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

            incididunt ut labore et dolore magna aliqua./p>

        aside>

            !-- Since this aside is contained within an article, a parser

      should understand that the content of this aside is directly related

www.2cto.com

      to the article itself. -->

            h1> Glossary/h1>

            dl>

                dt> Lorem/dt>

                dd> ipsum dolor sit amet/dd>

            /dl>

        /aside>

    /article>

    aside>

        !-- This aside is outside of the article. Its content is related

    to the page, but not as closely related to the above article -->

        h2> Blogroll/h2>

        ul>

            li> a href="#"> My Friend/a> /li>

            li> a href="#"> My Other Friend/a> /li>

            li> a href="#"> My Best Friend/a> /li>

        /ul>

    /aside>

/body>

  作者 汤姆大叔

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！