HTML <figcaption> ƙaddama

定义和用法

<figcaption> 标签为 <figure> 元素定义标题。

<figcaption> 元素可以放置在 <figure> 元素的第一个或最后一个子元素的位置。

另请参阅：

HTML DOM 参考手册：Figcaption 对象

实例

例子 1

使用 <figure> 元素标记文档中的照片，使用 <figcaption> 元素定义照片的标题：

<figure>
  <img src="tulip.jpg" alt="Tulip" style="width:300px">
  <figcaption>Image 1 - Tulip, Liliaceae, Perennial Herb.</figcaption>
</figure>

Try It Yourself

例子 2

使用 CSS 设置 <figure> 和 <figcaption> 的样式：

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
</body>
<figure>
  <img src="tulip.jpg" alt="Tulip" style="width:300px">
  <figcaption>Image 1 - Tulip, Liliaceae, Perennial Herb.</figcaption>
</figure>
</body>
</html>

Try It Yourself

Global Attributes

<figcaption> The tag also supports Global Attributes in HTML.

Event Attributes

<figcaption> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <figcaption> Element:

figcaption {
  display: block;
}

Browser Support

The numbers in the table indicate the first browser version that fully supports this element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0