<figure>：可附标题内容元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
HTML <figure> 元素代表一段独立的内容，可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。
尝试一下
<figure> <img src="/shared-assets/images/examples/elephant.jpg" alt="Elephant at sunset" /> <figcaption>An elephant at sunset</figcaption> </figure> figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 220px; margin: auto; } img { max-width: 220px; max-height: 150px; } figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center; } | 内容分类 | 流式内容、 可感知内容 |
|---|---|
| 允许的内容 | <figcaption> 元素，且紧随着流式内容；或紧随流式内容的 <figcaption> 元素；或流式内容。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 所有接受流式内容的元素 |
| 明确的 ARIA 角色 | figure |
| 允许的 ARIA 角色 | 无子 figcaption 元素：any，否则没有允许的角色 |
| DOM 接口 | HTMLElement |
属性
此元素只包含全局属性。
使用说明
- 通常，
<figure>的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流。 - 通过在其中插入
<figcaption>（作为第一个或最后一个子元素），可以将标题与<figure>元素相关联。图中找到的第一个<figcaption>元素显示为图的标题。
示例
图像
html
<!-- 只有图像 --> <figure> <img src="/zh-CN/docs/Web/HTML/Element/figure/favicon-192x192.png" alt="The beautiful MDN logo." /> </figure> <!-- 有标题的图像 --> <figure> <img src="/zh-CN/docs/Web/HTML/Element/figure/favicon-192x192.png" alt="The beautiful MDN logo." /> <figcaption>MDN Logo</figcaption> </figure> 代码段
html
<figure> <figcaption>使用 <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> 规范
| Specification |
|---|
| HTML # the-figure-element |
浏览器兼容性
参见
<figcaption>元素