HTML - figcaption 标签

可以使用 <figcaption> 标签添加 <figur> 标签的标题。它是一个可选标签，可以出现在 <figure> 标签中包含的内容之前或之后。

尽管 <figure> 元素本身可能包含许多其他元素，如 <img> 或 <code>，但只有一个 <figcaption> 标签可以嵌套在 <figure> 标签中。<figcaption> 标签与 <figure> 标签一起使用，可以定位为 <figure> 标签的第一个或最后一个子元素。

语法


<figcaption> 

figure caption... 

</figcaption>

属性

<figcaption> 标签支持 HTML 的全局属性和事件属性。

<figcaption> 标签示例

下面的示例将说明 <figcaption> 标签的用法。在哪里、何时以及如何使用 <figcaption> 标签，以及我们如何使用 CSS 操作 <figcaption> 标签。

使用 <figcaption> 标签添加标题

以下示例，我们将使用 <figcaption> 标签并将标题添加到图像中。


<!DOCTYPE html>
<html>
<body>
   <figure>
      <img src="/cg/images/logo.png" alt="logo" style="width:50%">
      <figcaption> QikepuCom 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>	Yes	Yes	Yes	Yes	Yes

本页