HTML5部分标签含义?

前端之家收集整理的这篇文章主要介绍了HTML5部分标签含义?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道有关这个话题的问题很多,但是我找不到答案的权威来源.

这是official definitionwiki page,那里有more documentation,但是如果不是在一个非常简单的例子或不同的方式,他们不会解释正确的用法.

到目前为止,我已经“理解”了

<节>定义页面的一部分(部分),如博客,标题新闻,博客条目列表,评论列表以及可以与常见主题相关的所有内容. <物品>定义了一个从页面其余部分(?)有意义的内容,并且具有单个主题(博客条目,评论,文章等))的内容. 但是,在< article>中,我们可以使用< section>分割部分它的部分,在这种情况下,它具有标记更大文本章节的容器的功能.

怀疑

如果这些句子是正确的(或部分正确的),这意味着< section>有两个完全不同的使用情况.

我们可以这样写一个页面

<!DOCTYPE html>
<html lang=en>
    <head>
        <Meta charset=utf-8>
        <title>Fruits</title>
    </head>

    <body>

        <h1>Fruits war blog</h1>

        <section id="headlineNews"> <!-- USED AS CONTAINER -->

            <h1>What's new about fruits?</h1>   
            <article><h1>Apples are the best</h1>Apples are better than bananas</article>
            <article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>

        </section>

        <section id="blogEntries"> <!-- USED AS CONTAINER -->

            <h1>Articles about fruits</h1>

            <article>
                <h1>Apples vs Bananas</h1>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>Introduction:</h2>
                    Bananas have always leaded the world but...
                </section>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>The question:</h2>
                    Who is the best? We don't know so much about apples...
                </section>
            </article>

        </section>

    </body>
</html>

这就是大纲的样子:

1. Fruits war blog
   1. What's new about fruits?
      1. Apples are the best
      2. Apple's cakes
   2. Articles about fruits
      1. Apples vs Bananas
         1. Introduction:
         2. The question:

所以< section>被认为有两个完全不同的和不相关的语义含义?

是否正确使用:

<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
  <article>
    <section></section> <!-- USED AS CHAPTER -->
  </article>
</section>

以这种?asted的方式?
我发现is possible以颠倒的方式使用:

<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
  <section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
    <article></article> <!-- COMMENT -->
  </section>
</article>

但是我没有找到一个答案,我写下面的方式.

我想看看W3C小组已经写了< section>的基础的讨论.标签可能很有用,但我找不到.

注:我正在寻找与授权来源记录的回复

解决方法

http://www.w3.org/wiki/HTML/Elements/section不是部分的官方定义.部分是 defined in the HTML5 specification,目前是候选建议(这是 Editor’s Draft的快照).

在CR中,部分是defined

The section element represents a generic section of a document or application. A section,in this context,is a thematic grouping of content,typically with a heading.

部分是一个sectioning content元素(连同文章,旁边和导航).那些分节元素和标题(h1-h6)创建一个outline.

以下三个示例在语义上相当(相同的含义,相同的概要):

<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>

<!-- example 1: using section elements with corresponding heading levels -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h2>Waking up</h2>
    <p>…</p>
  </section>
  <section>
    <h2>The big moment!</h2>
    <p>…</p>
  </section>
  <section>
    <h2>Going to bed</h2>
    <p>…</p>
  </section>
</section>

<!-- example 1: using section elements with h1 everywhere -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h1>Waking up</h1>
    <p>…</p>
  </section>
  <section>
    <h1>The big moment!</h1>
    <p>…</p>
  </section>
  <section>
    <h1>Going to bed</h1>
    <p>…</p>
  </section>
</section>

所以你可以使用第whenever (*)节你使用h1-h6.而当您在大纲中需要单独的条目但不能(或不想))使用标题时,您可以使用部分.

还要注意,headerfooter始终属于其最近的祖先分段内容(或根节点,如body,如果没有分段元素)元素.换句话说:每个section / article / aside / nav元素可以有自己的页眉/页脚.

文章,旁边和导航都可以说是更为具体的部分元素.

two completly different usage cases

这两个用例完全不一样.在“容器”案例中,您可以说该部分代表文档的一个章节,而在“章节”案例部分则代表文章/内容的一章(当然是文档的一部分).

以同样的方式,一些标题用于标题网页部分(如“导航”,“用户菜单”,“评论”等),一些标题用于标题内容(“我的第一天”,“我的喜欢的书“等).

猜你在找的HTML5相关文章