<figure>

版本：HTML5

HTML<figure>元素代表一段独立的内容，经常与说明<figcaption>配合使用，并且作为一个独立的引用单元。当它属于主内容流时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

浏览器支持


IE 9、Firefox、Opera、Chrome 和 Safari 支持`<figure>`标签。
注释：IE 8 或更早版本的 IE 浏览器不支持`<figure>`标签。

示例

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

<figure>
	<img src="img_pulpit.jpg" alt="the pulpit rock" width="304" height="228">
</figure>

标签定义及使用说明

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure>元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。可以移动到文档的另一部分或附录而不影响主流程。如果被删除，则不应对文档流产生影响。
<figure>标签用于对元素进行组合。通过在<figure>中插入<figcaption>标题（作为第一个或最后一个子元素），可以将标题与<figure>元素相关联。

内容分类	流式内容元素，章节内容元素，可触摸内容元素
允许的内容	A`<figcaption>`element, followed byflow content; or flow content followed by a`<figcaption>`element; or flow content.
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	所有接受流式内容元素的元素
允许的 ARIA roles	`group`,`presentation`
DOM 实例	`HTMLElement`

HTML 4.01 与 HTML5之间的差异

<figure>标签是 HTML 5 中的新标签。

属性

此元素只包含全局属性。

全局属性

<figure>标签支持HTML 的全局属性。

事件属性

<figure>标签支持HTML 的事件属性。

例子

图像

<!-- just an image -->
<figure>
  <img
  src="https://www.lanmper.cn/upload/browser/compatible_chrome.gif"
  alt="a robotic monster over the letters mdn.">
</figure>

<!-- image with a caption -->
<figure>
  <img
  src="https://www.lanmper.cn/upload/browser/compatible_chrome.gif"
  alt="a robotic monster over the letters mdn.">	
  <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;
}
</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>