figure - [ HTML 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

directory search

Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

characters

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

内容类别	流量内容，切片根，可触及的内容。
允许的内容	一个<figcaption>元素，其次是流程内容; 或流量内容后跟一个<figcaption>元素; 或流量内容。
标记遗漏	没有，起始和结束标签都是强制性的。
允许的父母	任何接受Flow内容的元素。
允许ARIA角色	组，演示文稿
DOM界面	HTML元素

属性

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

使用主义

通常，a <figure>是在文档的主流程中引用的图像，插图，图表，代码段等，但可以移动到文档的另一部分或附录中，而不影响主流程。

作为一个 sectioning root, <figure> 元素内容的纲要是被文档的主纲要排除在外的.

可以通过在<figure>元素中插入一个<figcaption>来为其关联一个标题(作为它的第一个或者最后一个子元素).

示例

示例1

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

图.1.MDN标志

示例2

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

示例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 :-

“如果调试是消除软件错误的过程，

那么编程必须是将它们放入“

示例4

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

规范

Specification	Status	Comment
HTML Living StandardThe definition of '<figure>' in that specification.	Living Standard
HTML5The definition of '<figure>' in that specification.	Recommendation

浏览器兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	8	(Yes)	4	9	11	5.1

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	(Yes)	(Yes)	(Yes)	4	9	11	5.1

Previous article： Next article：