initial commit

1 files changed, 171 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/hgroup/index.html b/files/zh-cn/web/html/element/hgroup/index.html
new file mode 100644
index 0000000000..99a782ad8c
--- /dev/null
+++ b/files/zh-cn/web/html/element/hgroup/index.html
@@ -0,0 +1,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="https://wiki.developer.mozilla.org/en-US/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="https://wiki.developer.mozilla.org/en-US/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="https://wiki.developer.mozilla.org/en-US/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="https://wiki.developer.mozilla.org/en-US/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>