可以使用 <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 |
