HTML <figure> 标签

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

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

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

实例

用作文档中插图的图像：

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

运行一下

浏览器支持

元素
<figure>	8.0	9.0	4.0	5.1	11.0

定义和用法

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

浏览器支持

所有主流浏览器都支持 <figure> 标签。

HTML 4.01 与 HTML 5 之间的差异

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

提示和注释

提示：请使用<figcaption> 元素为 figure 添加标题（caption）。

全局属性

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

事件属性

<figure> 标签支持 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>

运行一下

CSS 默认样式

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

HTML <figure> 标签

实例

浏览器支持

定义和用法

浏览器支持

HTML 4.01 与 HTML 5 之间的差异

提示和注释

全局属性

事件属性

更多实例

CSS 默认样式

分类导航