HTML <figure> 标签
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <figure> 标签。
注释:IE 8 或更早版本的 IE 浏览器不支持 <figure> 标签。
标签定义及使用说明
<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。
<figure> 元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的。如果被删除,则不应对
文档流产生影响。
这是菜鸟网站上的说明。
那么让我们看看下这个<figure>的google翻译
如图明显的解释作用了。
这就是个语义化的div,语义作用就是翻译里的了。
什么时候用这个呢?
你所包裹的内容里有翻译这些东西,并且不写这些东西不会影响你的全文内容就可以写这个。
与 aside有点类似吧,都是独立的,不同点就在于aside 和全文是有联系的。
例子:
<figure>
<img src="sl.png" alt="The Pulpit Rock">
<img src="sl.png" alt="The Pulpit Rock">
<img src="sl.png" alt="The Pulpit Rock">
<img src="sl.png" alt="The Pulpit Rock">
<img src="sl.png" alt="The Pulpit Rock">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
结果:
<figcaption> 标签为 <figure> 元素定义标题。
<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。