首页 > web前端 > html教程 > Section标签_html/css_WEB-ITnose

Section标签_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:47:52
原创
1673 人浏览过

section

HTML Spec: “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.”

与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单。section 表示一段专题性的内容,一般会带有标题。看到这里,我们也许会想到,那么一篇博客文章,或者一条单独的评论岂不是正好可以用 section 吗?接着看:

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section 。

那么,section 应该什么时候用呢?再接着看:

“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。

要注意,W3C 还警告说:

“The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”

section 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时,应该使用 div 。一般来说,当元素内容明确地出现在文档大纲中时,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>
登录后复制

HTML5 中 div section article 的区别

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>
登录后复制




Graduation Ceremony Summer 2022


Graduation

Ceremony

Opening Procession


Speech by Validactorian


Speech by Class President


Presentation of Diplomas


Closing Speech by Headmaster




Graduates

  • Molly Carpenter

  • Anastasia Luccio

  • Ebenezar McCoy

  • Karrin Murphy

  • Thomas Raith

  • Susan Rodriguez




  • HTML5学习笔记简明版(2):新元素之section,article,aside

    section的主要作用是改变heading的上下文,通过它的嵌套,主要用来表示的章节等目录结构和它们的从属关系。

    HTML5 里 section article 什么区别?header footer nav 该怎么理解?

    HTML标准是这样写的:

    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.

    Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

    Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

    Note: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

    意译如下(【】里面是我的注解):

    section元素表示文档或应用的一个部分。所谓“部分”,这里是指按照主题分组的内容区域,通常会带有标题。【也就是每个section对应不同的主题。注意是内容本身的主题,而不是其他人为设定的划分标准。】

    section的例子包括书的章节回目、多tab对话框的每个tab页、论文以数字编号的小节。网站的主页可能分成介绍、最新内容、联系信息等section。

    注意:网页作者应使用article而不是section元素,如果其内容是用于聚合(syndicate)。【比如blog首页上的每篇blog。又如论坛帖子的一楼、二楼、三楼……n楼。通常这样的每部分内容形式上是类似的,但是来源是独立的。】

    注意:section不是通用容器元素。如果仅仅是用于设置样式或脚本处理,应用div元素。一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素。

    你如何理解 HTML5 的 section?会在什么场景使用?为什么这些场景使用 section 而不是 div?

    相关标签:
    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板