files/zh-cn/web/html/element/hgroup/index.html


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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

---
title: <hgroup>
slug: Web/HTML/Element/hgroup
tags:
  - Element
  - Experimental
  - HTML
  - HTML sections
  - HTML5
  - Web
  - 实验性
translation_of: Web/HTML/Element/hgroup
---
<div>{{HTMLRef}}</div>

<div></div>

<div><strong>HTML <code>&lt;hgroup&gt;</code> element</strong>代表文档章节所属的多级别的目录，它将多个&lt;h1&gt;至&lt;h6&gt;的子元素组装到一起。</div>

<div></div>

<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div>

<div></div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, heading content, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>One or more {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, and/or {{HTMLElement("h6")}}.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>这个元素仅包含全局属性。</p>

<h2 id="使用笔记">使用笔记</h2>

<div class="note">
<p><strong>注意: </strong>本元素已经从HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。 <br>
 然而，考虑到&lt;hgroup&gt;元素的一个关键存在目标是明确HTML规范中如何显示标题的轮廓算法，但因为其轮廓算法(outline algorithm)未在任何浏览器中实现，因此 <code>&lt;hgroup&gt; 语义仍旧是理论上的建议。</code><br>
 HTML5 (W3C) 规范提供了如何标记<a href="http://www.w3.org/TR/html5/common-idioms.html#sub-head">副标题，小标题，可选标题和标语</a>（Subheadings, subtitles, alternative titles and taglines）的建议。</p>
</div>

<p>The <code>&lt;hgroup&gt;</code> element allows the primary heading for a document section to be grouped with any secondary headings—such as subheadings or alternative titles—to form a <em>multi-level</em> heading.</p>

<p>In other words, the <code>&lt;hgroup&gt;</code> element prevents any of its secondary <code><a href="/zh-CN/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> children from creating separate sections of their own in the outline—as those <code><a href="/zh-CN/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> elements otherwise normally would if they were not children of any <code>&lt;hgroup&gt;</code>.</p>

<p>So in the abstract outline produced by the <a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">HTML outline algorithm defined in the HTML specification</a>, the <code>&lt;hgroup&gt;</code> as a whole forms a single logical heading, with the entire set of <code><a href="/zh-CN/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> children of the <code>&lt;hgroup&gt;</code> going into the outline as one <em>multi-level</em> unit, to comprise that single logical heading in the abstract outline.</p>

<p>To produce any (non-abstract) <em>rendered</em> view of such an outline, some choice must be made in the design of the rendering tool about how to render <code>&lt;hgroup&gt;</code> headings in such a way as to convey their multi-level nature. There are a variety of ways an <code>&lt;hgroup&gt;</code> might be shown in a rendered outline; for example:</p>

<ul>
 <li>an <code>&lt;hgroup&gt;</code> might be shown in a rendered outline in with a colon character and space (“<code>: </code>”) or other such punctuation after the primary heading and before the first secondary heading (and with the same or similar punctuation before any other secondary headings</li>
 <li>an <code>&lt;hgroup&gt;</code> might be shown in a rendered outline in with the primary heading followed by parentheses around the secondary heading(s)</li>
</ul>

<p>Consider the following HTML document:</p>

<pre class="notranslate">&lt;!DOCTYPE html&gt;
&lt;title&gt;HTML Standard&lt;/title&gt;
&lt;body&gt;
  &lt;hgroup id="document-title"&gt;
    &lt;h1&gt;HTML&lt;/h1&gt;
    &lt;h2&gt;Living Standard — Last Updated 12 August 2016&lt;/h2&gt;
  &lt;/hgroup&gt;
  &lt;p&gt;Some intro to the document.&lt;/p&gt;
  &lt;h2&gt;Table of contents&lt;/h2&gt;
  &lt;ol id=toc&gt;...&lt;/ol&gt;
  &lt;h2&gt;First section&lt;/h2&gt;
  &lt;p&gt;Some intro to the first section.&lt;/p&gt;
&lt;/body&gt;</pre>

<p>A rendered outline for that document might look like the following:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png"></p>

<p>That is, the rendered outline might show the primary title, <em>HTML</em>, followed by a colon and space, followed by the secondary title, <em>Living Standard — Last Updated 12 August 2016</em>.</p>

<p>Or, the rendered outline for that document might instead look like the following:</p>

<p><img alt="Rendered outline that includes an &lt;hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png"></p>

<p>That is, the rendered outline might show the primary title, <em>HTML</em>, followed by the secondary title shown in parentheses:<em> (Living Standard — Last Updated 12 August 2016)</em>.</p>

<h2 id="示例">示例</h2>

<pre class="brush: html notranslate">&lt;hgroup&gt;
  &lt;h1&gt;Main title&lt;/h1&gt;
  &lt;h2&gt;Secondary title&lt;/h2&gt;
&lt;/hgroup&gt;
</pre>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>5</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9.0</td>
   <td>11.10</td>
   <td>4.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.2</td>
   <td>{{CompatGeckoMobile("2.0")}}</td>
   <td>9.0</td>
   <td>11.0</td>
   <td>5.0</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="参阅">参阅</h2>

<ul>
 <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
 <li><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>
</ul>