<figure> 和 <figcaption> 是進入 HTML5 之後才加入的引用區塊元素，主要會搭配網頁內容，進行引用文字、圖片、圖表或程式碼...等，這篇文章將會介紹 <figure> 和 <figcaption> 引用區塊元素的用法。

原文參考：引用區塊 figure、figcaption

認識 <figure> 和 <figcaption>

<figure> 是 HTML 裡作為引用的區塊元素，引用區塊的內容通常是主要內容裡，需要引用的文字、圖片、圖表或程式碼...等，<figcaption> 則是座位該引用區塊的標題。

• <figure> 和 <figcaption> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <figure> 和 <figcaption> 顯示類型為「block 塊級元素」，預設會強制換行。

例如下方的 HTML 開啟後，在網頁中會放入兩組引用區塊，每一組裡面會包含 <figure> 和 <figcaption>。

<figure>
  <figcaption>《春曉》作者：孟浩然</figcaption>
  春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。
</figure>
<figure>
  <figcaption>《夜思》作者：李白</figcaption>
  床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。
</figure>

<figure> 和 <figcaption> 支援屬性

<figure> 和 <figcaption> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，例如下方的 HTML，會將 <figure> 和 <figcaption> 加入 style 屬性改變顏色。

<figure style="background:#fcc;">
  <figcaption style="color:#f00;">《春曉》作者：孟浩然</figcaption>
  春眠不覺曉，處處聞啼鳥。夜來風雨聲，花落知多少。
</figure>
<figure style="background:#ccf;">
  <figcaption style="color:#00f;">《夜思》作者：李白</figcaption>
  床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。
</figure>

<figure> 和 <figcaption> 預設樣式

下方列出 <figure> 和 <figcaption> 的預設樣式：

figure {
  display: block;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 40px;
  margin-end: 40px;
}

figcaption {
  display: block;
}

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• ChatGPT 教學
• Midjourney 教學
• HTML 教學