HTML <figcaption> 标签

在html中，figure标签和figcaption标签都是html5中新增的标签。figure标签是使用来定义独立的流内容，比如图像、图表、照片等，而figcaption标签是使用来为figure元素定义标题；

figure中的内容通常是与主内容相关，但又是一块独立的内容，如果把它删除，不会对网页中的其它内容产生影响；

figcaption标签一般是充当figure标签中的第一个或最后一个子元素来为figure元素定义标题；

实例

用作文档中插图的图像，带有一个标题：：

<!DOCTYPE html>
<html>
<body>
<p>布道石地处挪威南部，靠近斯塔万格市的吕瑟峡湾中部，是一块天然形成的巨石，突兀地直立于峡湾深处的崇山峻岭中，垂直落差604米，顶部有大约625平方米的平台，是挪威著名的旅游景点。</p>
<figure>
  <img src="/images/img_pulpit.jpg" alt="The Pulpit Rock" width="400" height="400">
  <figcaption>Fig.1 - 布道石, 挪威.</figcaption>
</figure>
</body>
</html>

运行一下

浏览器支持

元素
<figcaption>	8.0	9.0	4.0	5.1	11.0

定义和用法

<figcaption> 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

HTML 4.01 与 HTML 5 之间的差异

<figcaption> 标签是 HTML 5 中的新标签。

全局属性

<figcaption> 标签支持 HTML 中的全局属性。

事件属性

<figcaption> 标签支持 HTML 中的事件属性。

更多实例

<!DOCTYPE html>
<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>
<h1>figure 和 figcaption 元素 + CSS样式</h1>
<figure>
  <img src="/images/img_pulpit.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - 布道石, 挪威.</figcaption>
</figure>
</body>
</html>