HTML - <figcaption> 標籤

可以使用<figcaption>元素為figur元素新增標題。這是一個可選標籤，可以放在<figure>標籤包含的內容之前或之後。

儘管<figure>元素本身可能包含許多其他元素，例如<img>或<code>，但在<figure>標籤中只能巢狀一個<figcaption>元素。<figcaption>元素與<figure>元素一起使用，可以將其定位為<figure>元素的第一個或最後一個子元素。

語法

<figcaption>
   figure caption...
</figcaption>

屬性

HTML figcaption 標籤支援 HTML 的全域性和事件屬性。

HTML figcapton 標籤示例

下面的示例將說明 figcapton 標籤的使用方法。何時何地以及如何使用 figcapton 標籤，以及如何使用 CSS 操作 figcapton 元素。

使用 figcaption 標籤新增標題

以下是一個示例，我們將使用<figcaption>標籤併為影像新增標題。

<!DOCTYPE html>
<html>
<body>
   <figure>
      <img src=
"https://tutorialspoint.tw/cg/images/logo.png" 
           alt="logo" style="width:50%">
      <figcaption> Tutorialspoint Logo </figcaption>
   </figure>
</body>
</html>

設定 figcaption 元素的樣式

考慮另一種情況，我們將使用帶有 CSS 的<figcaption>標籤。

<!DOCTYPE html>
<html>
   <style>
      figure {
         border: 4px #D5F5E3 solid;
         padding: 4px;
         margin: auto;
      }
   
      figcaption {
         background-color: #E8DAEF;
         color: #DE3163;
         font-style: italic;
         padding: 2px;
         text-align: center;
      }
   </style>
<body>
   <figure>
      <img src=
"https://upload.wikimedia.org/wikipedia/commons/7/70/Mahendra_Singh_Dhoni_January_2016_%28cropped%29.jpg" 
           alt="Trulli" style="width:100%">
      <figcaption>MAHENDRASINGH DHONI</figcaption>
   </figure>
</body>
</html>

支援的瀏覽器

標籤
figcaption	是	是	是	是	是

html_tags_reference.htm

列印頁面