html中figure怎么调图片位置,HTML<figure> <figcaption> 标签定义图文并茂

本来想分两篇文章来解释说明figure、figcaption的，但是这俩个标签都是定义图文的，所以我们合起来讲解，大家更能容易接受。

大家在写xhtml、html中常常用到一种图片列表，图片+标题 或者 图片+标题+简单描述。以前的常规写法：

title

而在html5中有了新标签更能语义化的定义出这中图片列表，那就是figure标签。

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

实例代码：

黄浦江上的的卢浦大桥

figure用来代替原来li标签，P标签谁来取代呢？答案就是：figcaption

w3c赋予的定义：figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

那么上面的代码就变成了：

黄浦江上的的卢浦大桥

---------------------------------------------------------------------------

这是个非常易于理解的标签，其用法也非常清楚。即便是简单，这里也建议大家亲自动手写下。