zoukankan      html  css  js  c++  java
  • HTML5——section,article,aside

    section

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

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

    section元素不是一般的容器元素,所以如果一个元素需要定义相应的style或者script脚本的话,那推荐使用div元素,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="http://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

    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>
  • 相关阅读:
    java8
    java7
    java6
    java5
    java复习4
    学习笔记
    Reflection笔记
    通过Reflection来获得方法和信息
    學習反射2
    學習反射1
  • 原文地址:https://www.cnblogs.com/z-j-n-2015/p/5279080.html
Copyright © 2011-2022 走看看