<figure>: 帶可選標題的圖形元素

基線廣泛可用

此功能已成熟，可在許多裝置和瀏覽器版本上執行。自以下時間起，它在瀏覽器中可用。 2015 年 7 月.

<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> 元素。