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

Content categories Flow content, sectioning root, palpable content.
Permitted content A <figcaption> element, followed by flow content; or flow content followed by a <figcaption> element; or flow content.
Tag omission 不允许,开始标签和结束标签都不能省略。
Permitted parents Any element that accepts Flow content.
Permitted ARIA roles group, presentation
DOM interface HTMLElement

属性

此元素只包含 全局属性

使用说明

  • Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the 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). The first <figcaption> element found in the figure is presented as the figure's caption.

例子

图像

<!-- Just an image -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="A robotic monster over the letters MDN.">
</figure>

<!-- Image with a caption -->
<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  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>

规范

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
figureChrome Full support 8Edge Full support YesFirefox Full support 4IE Full support 9Opera Full support 11Safari Full support 5.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support Yes

Legend

Full support  
Full support

参见

文档标签和贡献者

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