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.com/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

打印页面