html figure和image的区别

html figure和image的区别如下：1、figure元素是一种元素的组合，可带有标题（可选）。figure标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。figure拥有一个子标签——figcaption标签。实例：用作文档中插图的图像：<figure><p>黄浦江上的的卢浦大桥</p><img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure>2、img 元素向网页中嵌入一幅图像。这个标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。用法如下：<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />区别：figure用于对元素进行组合。多用于图片与图片描述组合。而img只是一个图片元素而已。可以嵌套在figure中使用。

HTML5中figure与figcaption标签的使用方法

HTML 5 <figure>标签

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，注意：如果该元素被删除，不会对文档流产生影响。对此可以理解为，该标签类似于 <div>标签，用来定义一个独立的内容块，你可以对此内容块设定一个标题，该标签不是一个构成页面必须的元素，但可以让你的网页源代码的结构更清晰明了。

在文档中插入独立图像的示例：

<figure><div>标签的使用方法</div><img src="test.jpg" width="300" height="200" /></figure>

代码效果如下：

标签的使用方法

提示：虽然 <figure>标签是 HTML 5 中的新标签，但是所有主流浏览器都支持它，您可以使用<figcaption>元素为 figure 添加标题（caption）。

HTML 5 <figcaption>标签

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

下面是一个简单的示例：

<figure><figcaption>HTML5新加标签使用方法</figcaption><img src="test.jpg" width="987" height="130" /></figure>

下面是示例效果：

HTML5新加标签使用方法

提示：与 <figure>标签一样，<figcaption>也是 HTML 5 中的新标签，所有主流浏览器都支持它，本文所述两个标签均支持 HTML 5 中的 全局属性 和 事件属性 。

从人的视觉上看是一样没错，但从机器搜索引擎的角度看HTML5的<figure>标签更加语义化，更友好！

所谓的语义化就是通过HTML标签就能知道它的用途，比如：

<footer></footer>

代表网页的底部。

---