<figure>: 带可选标题的图形元素

基线 广泛可用

此功能已成熟,可在许多设备和浏览器版本上运行。自以下时间起,它在浏览器中可用。 2015 年 7 月.

<figure> HTML 元素表示自包含内容,可能包含可选标题,标题使用 <figcaption> 元素指定。图形、标题及其内容作为一个单元引用。

尝试

属性

此元素仅包括 全局属性.

使用说明

  • 通常,<figure> 是文档主流程中引用的图像、插图、图表、代码片段等,但可以移动到文档的其他部分或附录,而不会影响主流程。
  • 通过在 <figure> 元素中插入 <figcaption>(作为第一个或最后一个子元素)可以关联标题。在图形中找到的第一个 <figcaption> 元素将显示为图形的标题。
  • <figcaption> 为父 <figure> 提供 可访问名称.

示例

图像

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>

结果

代码片段

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>

结果

引用

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>

结果

技术概述

内容类别 流内容可感知内容.
允许的内容 一个 <figcaption> 元素,后面跟着 流内容;或者流内容后面跟着一个 <figcaption> 元素;或者流内容。
标签省略 无,开始和结束标签都是必须的。
允许的父元素 任何接受 流内容 的元素。
隐式 ARIA 角色 figure
允许的 ARIA 角色 没有 figcaption 子元素:任何,否则不允许任何角色。
DOM 接口 HTMLElement

规范

规范
HTML 标准
# the-figure-element

浏览器兼容性

BCD 表格只在浏览器中加载

另请参见