<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月.
<figure> HTML 元素代表自成一體的內容，可能具有非必填的圖片說明（使用 <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; } 屬性
該元素僅包括全域屬性。
使用注意事項
- 通常
<figure>是文件主要架構中引用的圖片、插圖、圖表、程式碼片段等，但可以移動到文件的其他部分或附錄，而不影響主要架構。 - 可以通過在其中插入
<figcaption>（作為第一個或最後一個子元素）來將標題與<figure>元素產生關聯。在圖片中找到的第一個<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 |
規範
| Specification |
|---|
| HTML # the-figure-element |
瀏覽器相容性
參見
<figcaption>元素。