<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
# the-figure-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
figure

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見