initial commit

1 files changed, 161 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/figure/index.html b/files/zh-cn/web/html/element/figure/index.html
new file mode 100644
index 0000000000..5c2e101c81
--- /dev/null
+++ b/files/zh-cn/web/html/element/figure/index.html
@@ -0,0 +1,161 @@
+---
+title: <figure>：可附标题内容元素
+slug: Web/HTML/Element/figure
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+translation_of: Web/HTML/Element/figure
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;figure&gt;</code> 元素</strong>代表一段独立的内容, 经常与说明（caption） {{HTMLElement("figcaption")}} 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div>
+
+<div 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.</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/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots">sectioning root</a>, palpable content.</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的内容</th>
+   <td>A {{HTMLElement("figcaption")}} element, followed by <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.</td>
+  </tr>
+  <tr>
+   <th scope="row">标签省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的父元素</th>
+   <td>所有接受 <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a> 的元素</td>
+  </tr>
+  <tr>
+   <th scope="row">允许的 ARIA roles</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 实例</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="属性">属性</h2>
+
+<p>此元素只包含 <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p>
+
+<h2 id="使用说明">使用说明</h2>
+
+<ul>
+ <li>通常，<code>&lt;figure&gt;</code>是图像，插图，图表，代码片段等，在文档的主流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。</li>
+ <li>作为<a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots">sectioning root</a>，<code>&lt;figure&gt;</code>元素的内容轮廓将从文档的主要轮廓中排除。</li>
+ <li>通过在其中插入{{HTMLElement("figcaption")}}（作为第一个或最后一个子元素），可以将标题与<code>&lt;figure&gt;</code>元素相关联。图中找到的第一个<code>&lt;figcaption&gt;</code>元素显示为图的标题。</li>
+</ul>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="图像">图像</h3>
+
+<pre class="brush: html">&lt;!-- Just an image --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
+  alt="A robotic monster over the letters MDN."&gt;
+&lt;/figure&gt;
+
+&lt;!-- Image with a caption --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
+  alt="A robotic monster over the letters MDN."&gt;
+  &lt;figcaption&gt;MDN Logo&lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<div>{{EmbedLiveSample("Images", "100%", 250)}}</div>
+
+<h3 id="代码段">代码段</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;Get browser details using &lt;code&gt;navigator&lt;/code&gt;.&lt;/figcaption&gt;
+  &lt;pre&gt;
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName;
+  txt+= "Browser Name: " + navigator.appName;
+  txt+= "Browser Version: " + navigator.appVersion ;
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
+  txt+= "Platform: " + navigator.platform;
+  txt+= "User-agent header: " + navigator.userAgent;
+}&lt;/pre&gt;
+&lt;/figure&gt;</pre>
+
+<div>{{EmbedLiveSample("Code_snippets", "100%", 250)}}</div>
+
+<h3 id="引用内容">引用内容</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Edsger Dijkstra:&lt;/cite&gt;&lt;/figcaption&gt;
+  &lt;blockquote&gt;If debugging is the process of removing software bugs,
+  then programming must be the process of putting them in.&lt;/blockquote&gt;
+&lt;/figure&gt;
+</pre>
+
+<div>{{EmbedLiveSample("Quotations")}}</div>
+
+<h3 id="诗歌">诗歌</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;p style="white-space:pre"&gt;
+Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.&lt;/p&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;,
+    by William Shakespeare&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<div>{{EmbedLiveSample("Poems", "100%", 250)}}</div>
+
+<h2 id="Specifications" name="Specifications">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("html.elements.figure")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>The {{HTMLElement("figcaption")}} element.</li>
+</ul>