HTML5学习笔记(<figure>)

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> 元素的第一个或最后一个子元素的位置。

转载于:https://www.cnblogs.com/smileToMe/p/7828115.html