1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: <section>
slug: Web/HTML/Element/section
tags:
- Element
- HTML
- 区块
translation_of: Web/HTML/Element/section
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <section>元素</strong>表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<p>例如，导航菜单应该包含在{{htmlelement("nav")}}元素中，但搜索结果列表和地图显示及其控件没有特定元素，可以放在<code><section></code>里。</p>
<div class="note">
<p>注意：如果元素的内容作为一个独立的有意义的集合，{{HTMLElement("article")}}元素可能是更好的选择。</p>
</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">内容分类</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">Sectioning content</a>, palpable content.</td>
</tr>
<tr>
<th scope="row">允许的内容</th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
</tr>
<tr>
<th scope="row">标签省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">允许的父元素</th>
<td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>. Note that a <code><section></code> element must not be a descendant of an {{HTMLElement("address")}} element.</td>
</tr>
<tr>
<th scope="row">允许的 ARIA roles</th>
<td>{{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")}}</td>
</tr>
<tr>
<th scope="row">DOM 接口</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<p><span style="line-height: 21px;">此元素只包含 </span> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">全局属性</a></p>
<h2 id="使用说明">使用说明</h2>
<ul>
<li>一般通过是否包含一个标题 ({{HTMLElement('h1')}}-{{HTMLElement('h6')}} element) 作为子节点 来 辨识每一个<section>。</li>
<li>如果 <section> 元素的内容可以单独在多个媒体上发表，应该使用 {{HTMLElement("article")}} 而不是 {{HTMLElement("section")}}。</li>
<li>不要把 {{HTMLElement("section")}} 元素作为一个普通的容器来使用，这是本应该是{{HTMLElement("div")}}的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。 一般来说，一个 {{HTMLElement("section")}} 应该出现在文档大纲中。</li>
</ul>
<h2 id="范例1：">范例1：</h2>
<h3 id="之前">之前</h3>
<pre class="notranslate"><code><div>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</div></code></pre>
<h3 id="之后">之后</h3>
<pre class="notranslate"><code><section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section></code>
</pre>
<h2 id="范例2：">范例2：</h2>
<h3 id="之前_2">之前</h3>
<pre class="notranslate"><code><div>
<h2>Heading</h2>
<img src="bird.jpg" alt="bird">
</div></code></pre>
<h3 id="之后_2">之后</h3>
<pre class="notranslate"><code><section>
<h2>Heading</h2>
<img src="bird.jpg" alt="bird">
</section></code></pre>
<h2 id="规范">规范</h2>
<table>
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("html.elements.section")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
<li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: Region role</a></li>
</ul>
|
