From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/html/element/section/index.html | 137 ++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 files/zh-cn/web/html/element/section/index.html (limited to 'files/zh-cn/web/html/element/section') diff --git a/files/zh-cn/web/html/element/section/index.html b/files/zh-cn/web/html/element/section/index.html new file mode 100644 index 0000000000..9a256ca1e7 --- /dev/null +++ b/files/zh-cn/web/html/element/section/index.html @@ -0,0 +1,137 @@ +--- +title:
+slug: Web/HTML/Element/section +tags: + - Element + - HTML + - 区块 +translation_of: Web/HTML/Element/section +--- +
{{HTMLRef}}
+ +

HTML <section>元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

+ +
{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}
+ + + +

例如，导航菜单应该包含在{{htmlelement("nav")}}元素中，但搜索结果列表和地图显示及其控件没有特定元素，可以放在<section>里。

+ +
+

注意：如果元素的内容作为一个独立的有意义的集合，{{HTMLElement("article")}}元素可能是更好的选择。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
内容分类Flow content, Sectioning content, palpable content.
允许的内容Flow content.
标签省略{{no_tag_omission}}
允许的父元素Any element that accepts flow content. Note that a <section> element must not be a descendant of an {{HTMLElement("address")}} element.
允许的 ARIA roles{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}
DOM 接口{{domxref("HTMLElement")}}
+ +

属性

+ +

此元素只包含  全局属性

+ +

使用说明

+ + + +

范例1：

+ +

之前

+ +
<div>
+  <h1>Heading</h1>
+  <p>Bunch of awesome content</p>
+</div>
+ +

之后

+ +
<section>
+  <h1>Heading</h1>
+  <p>Bunch of awesome content</p>
+</section>
+
+ +

范例2：

+ +

之前

+ +
<div>
+  <h2>Heading</h2>
+  <img src="bird.jpg" alt="bird">
+</div>
+ +

之后

+ +
<section>
+  <h2>Heading</h2>
+  <img src="bird.jpg" alt="bird">
+</section>
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}{{Spec2('HTML5 W3C')}}
+ +

浏览器兼容性

+ +

{{Compat("html.elements.section")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf