<figure>:可選標題的圖片元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<figure>
HTML 元素代表自包含內容,可能具有可選的標題,可以使用 <figcaption>
元素指定。該圖片、其標題和其內容被引用為一個單一單位。
嘗試一下
屬性
該元素僅包括全域屬性。
使用注意事項
- 通常
<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 Standard # the-figure-element |
瀏覽器相容性
BCD tables only load in the browser
參見
<figcaption>
元素。