Section标签_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

Section标签_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:47 AM

section标签

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 id="Apples">Apples</h1> <h2 id="Tasty-delicious-fruit">Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section> <h1 id="Red-Delicious">Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p></section><section> <h1 id="Granny-Smith">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 id="Apples">Apples</h1>    <h2 id="Tasty-delicious-fruit">Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section>    <h1 id="Red-Delicious">Red Delicious</h1>    <p>These bright red apples are the most common found in many supermarkets.</p></section><section>    <h1 id="Granny-Smith">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 id="Graduation">Graduation</h1>    <section>        <h1 id="Ceremony">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 id="Graduates">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？

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

举一个带有属性的HTML标签的示例。May 16, 2025 am 12:02 AM

HTML标签和属性的使用方法包括：1.基本用法：使用标签如和，通过属性如src和href添加必要信息。2.高级用法：使用data-*自定义属性实现复杂交互。3.避免常见错误：确保属性值用引号包围。4.性能优化：保持简洁，使用标准属性和CSS类名，确保图像有alt属性。掌握这些将提升网页开发技能。

HTML标签和HTML属性有什么区别？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未来：进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容，提升SEO和无障碍访问。2)功能化将引入新元素和属性，满足用户需求。3)模块化将支持组件化开发，提高代码复用性。

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

See all articles