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

注意:
  • 作为一个 sectioning root,  <figure> 元素内容的纲要是被文档的主纲要排除在外的.
  • 可以通过在<figure>元素中插入一个<figcaption>来为其关联一个标题(作为它的第一个或者最后一个子元素).

属性

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

实例

插入图片和图片说明

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

显示样式:

MDN Logo

 

MDN Logo
Fig1. MDN Logo

 

插入代码段

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

显示样式:

Edsger Dijkstra :-

"If debugging is the process of removing software bugs,
then programming must be the process of putting them in"

其他用法

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

显示样式:

Depression is running through my head,
These thoughts make me think of death,
A darkness which blanks my mind,
A walk through the graveyard, what can I find?....

Depression. By: Darren Harris

 

规范

规范 状态 Comment
HTML Living Standard
<figure>
Living Standard  
HTML5
<figure>
Recommendation  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 8 4.0 (2.0) 9.0 11.10 5.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 4.0 (2.0) 9.0 11.0 5.1 (iOS 5.0)

See also

文档标签和贡献者

此页面的贡献者: lcw0622, ajfg93, Ende93, 041008725, you0509
最后编辑者: lcw0622,