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
|
---
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><figure></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><figure></code>是图像，插图，图表，代码片段等，在文档的主流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。</li>
<li>作为<a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots">sectioning root</a>，<code><figure></code>元素的内容轮廓将从文档的主要轮廓中排除。</li>
<li>通过在其中插入{{HTMLElement("figcaption")}}（作为第一个或最后一个子元素），可以将标题与<code><figure></code>元素相关联。图中找到的第一个<code><figcaption></code>元素显示为图的标题。</li>
</ul>
<h2 id="例子">例子</h2>
<h3 id="图像">图像</h3>
<pre class="brush: html"><!-- Just an image -->
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="A robotic monster over the letters MDN.">
</figure>
<!-- Image with a caption -->
<figure>
<img
src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
alt="A robotic monster over the letters MDN.">
<figcaption>MDN Logo</figcaption>
</figure>
</pre>
<div>{{EmbedLiveSample("Images", "100%", 250)}}</div>
<h3 id="代码段">代码段</h3>
<pre class="brush: html"><figure>
<figcaption>Get browser details using <code>navigator</code>.</figcaption>
<pre>
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;
}</pre>
</figure></pre>
<div>{{EmbedLiveSample("Code_snippets", "100%", 250)}}</div>
<h3 id="引用内容">引用内容</h3>
<pre class="brush: html"><figure>
<figcaption><cite>Edsger Dijkstra:</cite></figcaption>
<blockquote>If debugging is the process of removing software bugs,
then programming must be the process of putting them in.</blockquote>
</figure>
</pre>
<div>{{EmbedLiveSample("Quotations")}}</div>
<h3 id="诗歌">诗歌</h3>
<pre class="brush: html"><figure>
<p style="white-space:pre">
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.</p>
<figcaption><cite>Venus and Adonis</cite>,
by William Shakespeare</figcaption>
</figure></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', '<figure>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</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>
|
