<figure>: The Figure with Optional Caption element

<figure> HTML 元素表示自包含内容，可能带有可选标题，该标题是使用 <figcaption> 元素指定的。该图、其标题及其内容作为一个单元进行引用。

¥The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.

Try it

属性

¥Attributes

该元素仅包含全局属性。

¥This element only includes the global attributes.

使用说明

¥Usage notes

通常，<figure> 是在文档的主要流程中引用的图片、插图、图表、代码片段等，但可以将其移动到文档的其他部分或附录，而不影响主要流程。
通过在其中插入 <figcaption>（作为第一个或最后一个子元素），可以将标题与 <figure> 元素关联起来。图中找到的第一个 <figcaption> 元素显示为图的标题。
<figcaption> 为父级 <figure> 提供 accessible description。

示例

¥Examples

图片

¥Images

html

<!-- Just an image -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
</figure>

<!-- Image with a caption -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
  <figcaption>MDN Logo</figcaption>
</figure>

结果

¥Result

代码片段

¥Code snippets

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  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

结果

¥Result

语录

¥Quotations

html

<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>

结果

¥Result

诗歌

¥Poems

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 dishevelled 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>

结果

¥Result

技术总结

¥Technical summary

内容类别	流量内容, 可触知的内容.
允许的内容	一个 `<figcaption>` 元素，后跟流动内容；或流内容后跟 `<figcaption>` 元素；或流动内容。
标签遗漏	无，开始和结束标记都是强制性的。
允许的父级	任何接受流量内容的元素。
隐式 ARIA 角色	figure
允许的 ARIA 角色	没有 figcaption 后代： any，否则没有允许的角色
DOM 接口	`HTMLElement`

规范

Specification
HTML Standard # the-figure-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also

<figcaption> 元素。