<figure>: 带可选标题的图形元素
<figure>
HTML 元素表示自包含内容,可能包含可选标题,标题使用 <figcaption>
元素指定。图形、标题及其内容作为一个单元引用。
尝试
属性
此元素仅包括 全局属性.
使用说明
- 通常,
<figure>
是文档主流程中引用的图像、插图、图表、代码片段等,但可以移动到文档的其他部分或附录,而不会影响主流程。 - 通过在
<figure>
元素中插入<figcaption>
(作为第一个或最后一个子元素)可以关联标题。在图形中找到的第一个<figcaption>
元素将显示为图形的标题。 <figcaption>
为父<figure>
提供 可访问名称.
示例
图像
html
<!-- Just an image -->
<figure>
<img src="favicon-192x192.png" alt="The beautiful MDN logo." />
</figure>
<!-- Image with a caption -->
<figure>
<img src="favicon-192x192.png" alt="The beautiful MDN logo." />
<figcaption>MDN Logo</figcaption>
</figure>
结果
代码片段
html
<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 + "; ";
console.log("NavigatorExample", txt);
}
</pre>
</figure>
结果
引用
html
<figure>
<figcaption><b>Edsger Dijkstra:</b></figcaption>
<blockquote>
If debugging is the process of removing software bugs, then programming must
be the process of putting them in.
</blockquote>
</figure>
结果
诗歌
html
<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 dishevelled 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>
结果
技术概述
内容类别 | 流内容,可感知内容. |
---|---|
允许的内容 | 一个 <figcaption> 元素,后面跟着 流内容;或者流内容后面跟着一个 <figcaption> 元素;或者流内容。 |
标签省略 | 无,开始和结束标签都是必须的。 |
允许的父元素 | 任何接受 流内容 的元素。 |
隐式 ARIA 角色 | figure |
允许的 ARIA 角色 | 没有 figcaption 子元素:任何,否则不允许任何角色。 |
DOM 接口 | HTMLElement |
规范
规范 |
---|
HTML 标准 # the-figure-element |
浏览器兼容性
BCD 表格只在浏览器中加载
另请参见
- The
<figcaption>
元素。