HTML
<figure>
(具有可选标题的图形) 元素
represents self-contained content, potentially with an optional caption, which is specified using the (
<figcaption>
) 元素。
The figure, its caption, and its contents are referenced as a single unit.
| 内容类别 | 流内容 , 区间根 ，可触及内容。 |
|---|---|
| 准许内容 |
A
<figcaption>
element, followed by
flow content
; or flow content followed by a
<figcaption>
element; or flow content.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 流内容 . |
| Implicit ARIA role | figure |
| Permitted ARIA roles | 不带 figcaption descendant: any , otherwise no permitted roles |
| DOM 接口 |
HTMLElement
|
此元素只包括 全局属性 .
<figure>
is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
<figure>
element is excluded from the main outline of the document.
<figure>
element by inserting a
<figcaption>
inside it (as the first or the last child). The first
<figcaption>
element found in the figure is presented as the figure's caption.
<!-- Just an image --> <figure> <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="The beautiful MDN logo."> </figure> <!-- Image with a caption --> <figure> <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="The beautiful MDN logo."> <figcaption>MDN Logo</figcaption> </figure>
<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 + "; ";
console.log("NavigatorExample", txt);
}
</pre>
</figure>
<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>
<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>
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<figure>' in that specification. |
实时标准 | |
|
HTML 5.2
The definition of '<figure>' in that specification. |
推荐 | No changes from HTML 5.0. |
|
HTML5
The definition of '<figure>' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
figure
|
Chrome 完整支持 8 | Edge 完整支持 12 | Firefox 完整支持 4 | IE 完整支持 9 | Opera 完整支持 11 | Safari 完整支持 5.1 | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 11 | Safari iOS 完整支持 5.1 | Samsung Internet Android 完整支持 Yes |
完整支持
<figcaption>
元素。