<figure>:可附标题内容元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <figure> 元素代表一段独立的内容,可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。

尝试一下

内容分类 流式内容可感知内容
允许的内容 <figcaption> 元素,且紧随着流式内容;或紧随流式内容的 <figcaption> 元素;或流式内容。
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 所有接受流式内容的元素
明确的 ARIA 角色 figure
允许的 ARIA 角色 无子 figcaption 元素:any,否则没有允许的角色
DOM 接口 HTMLElement

属性

此元素只包含全局属性

使用说明

  • 通常,<figure> 的内容为图像、插图、图表、代码片段等,在文档的主内容流中引用,但可以移动到文档的另一部分或附录而不影响主内容流。
  • 通过在其中插入 <figcaption>(作为第一个或最后一个子元素),可以将标题与 <figure> 元素相关联。图中找到的第一个 <figcaption> 元素显示为图的标题。

示例

图像

html
<!-- 只有图像 -->
<figure>
  <img
    src="/zh-CN/docs/Web/HTML/Element/figure/favicon-192x192.png"
    alt="The beautiful MDN logo." />
</figure>

<!-- 有标题的图像 -->
<figure>
  <img
    src="/zh-CN/docs/Web/HTML/Element/figure/favicon-192x192.png"
    alt="The beautiful MDN logo." />
  <figcaption>MDN Logo</figcaption>
</figure>

代码段

html
<figure>
  <figcaption>使用 <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>

引用

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>

诗歌

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>

规范

Specification
HTML
# the-figure-element

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
figure

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见