MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

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

注意:
  • Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
  • A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child).

属性

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

实例

插入图片和图片说明

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

 

Specifications

Specification Status Comment
WHATWG HTML Living Standard
<figure>
Living Standard  
HTML5
<figure>
Recommendation  

Browser compatibility

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

文档标签和贡献者

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