引用區塊 <figure>
、<figcaption>
<figure>
和 <figcaption>
是進入 HTML5 之後才加入的引用區塊元素,主要會搭配網頁內容,進行引用文字、圖片、圖表或程式碼...等,這篇文章將會介紹 <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>
的預設樣式:
詳細樣式教學可參考:CSS 教學
figure {
display: block;
margin-before: 1em;
margin-after: 1em;
margin-start: 40px;
margin-end: 40px;
}
figcaption {
display: block;
}
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~