<figure>

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

• Content categories Flow content, sectioning root, palpable content.
• Permitted contentA <figcaption> element, followed by flow content; or flow content followed by a <figcaption> element; or flow content.
• Tag omission 不允许，开始标签和结束标签都不能省略。
• Permitted parent elements Any element that accepts Flow content.
• DOM interface HTMLElement

属性

这个标签只包含 全局属性.

实例

插入图片和图片说明

<!-- Just a figure -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">	
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p></p>

显示样式：

插入代码段

<figure>
  <figcaption>Get browser details using 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>

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;
}

Example 3

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

Specifications

Browser compatibility

See also

• The <figcaption> element.