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;}