HTML <figure> 元素

HTML <figure> 元素表示独立的内容，经常带有标题（<figcaption>），并且做为一个独立的引用单元。

使用 <figure> 元素标记文档中的一个图像：

<figure>
  <img src="/examples/img_pulpit.jpg" alt="布道台" width="304" height="228">
</figure>

尝试一下 »

特性

内容类别	流式内容，章节根节点，可触知内容。
允许的内容	一个 <figcaption> 元素，后面跟着 流式内容；或流式内容后面跟着一个 <figcaption> 元素；或流式内容
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受流式内容的元素。
允许的 ARIA 角色	group，presentation
DOM 接口	HTMLElement

属性

该元素只包含全局属性。

事件属性

<figure> 元素支持 HTML 的事件属性。

使用注意

• 通常，<figure> 是一个文档内容中引用的图像，插图，图表，代码段等，它可以移动到文档的另一部分或附录，而不会影响文档内容。
• 作为章节根节点，<figure> 元素内容的纲要会从文档的主要纲要中排除。
• 可以通过在 <figure> 中插入一个 <figcaption> 元素（作为第一个或最后一个子节点），将标题与 <figure> 元素关联起来。

更多实例

单独一个 <figure>

<figure>
  <img src="/images/firefox-64x64.png" alt="一个很棒的图片">
</figure>

尝试一下 »

在 <figure> 中使用 <figcaption> 作为标题

<figure>
  <img src="/images/firefox-64x64.png" alt="一个很棒的图片">
  <figcaption>图.1 Firefox Logo</figcaption>
</figure>

尝试一下 »

使用 <figure> 展示一段代码

<figure>
  <figcaption>通过 navigator 获取浏览器详情</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>

尝试一下 »

通过 <figure> 引用一段话

<figure>
  <figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
  <p>"If debugging is the process of removing software bugs,
    <br> then programming must be the process of putting them in"</p>
</figure>

尝试一下 »

<figure> 元素还可以用来标记一首诗。

<figure>
 <p>
  Depression is running through my head,<br>
  These thoughts make me think of death,<br>
  A darkness which blanks my mind,<br>
  A walk through the graveyard, what can I find?....
 </p>
 <figcaption><cite>Depression</cite>.
  By: Darren Harris</figcaption>
</figure>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard <figure> 的定义	现行的标准	-
HTML5 <figure> 的定义	推荐	-

HTML 4.01 与 HTML5 之间的差异

<figure> 元素是 HTML5 中的新元素。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• <figcaption> 元素。