<figure>:可附标题内容元素
HTML <figure>
元素代表一段独立的内容, 经常与说明(caption) <figcaption>
配合使用, 并且作为一个独立的引用单元。当它属于主内容流(main flow)时,它的位置独立于主体。这个标签经常是在主文中引用的图片,插图,表格,代码段等等,当这部分转移到附录中或者其他页面时不会影响到主体。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
内容分类 | Flow content, sectioning root, palpable content. |
---|---|
允许的内容 | A <figcaption> element, followed by flow content; or flow content followed by a <figcaption> element; or flow content. |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
允许的父元素 | 所有接受 Flow content 的元素 |
允许的 ARIA roles | group , presentation |
DOM 实例 | HTMLElement |
属性
此元素只包含 全局属性。
使用说明
- 通常,
<figure>
是图像,插图,图表,代码片段等,在文档的主流程中引用,但可以移动到文档的另一部分或附录而不影响主流程。 - 作为sectioning root,
<figure>
元素的内容轮廓将从文档的主要轮廓中排除。 - 通过在其中插入
<figcaption>
(作为第一个或最后一个子元素),可以将标题与<figure>
元素相关联。图中找到的第一个<figcaption>
元素显示为图的标题。
例子
图像
<!-- Just an image -->
<figure>
<img
src="https://developer.mozilla.org/static/img/favicon144.png"
alt="A robotic monster over the letters MDN.">
</figure>
<!-- Image with a caption -->
<figure>
<img
src="https://developer.mozilla.org/static/img/favicon144.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 |
浏览器兼容性
BCD tables only load in the browser
参见
- The
<figcaption>
element.