HTML5之figure标签和figcaption标签

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

实例代码：

<figure>

<p>黄浦江上的的卢浦大桥</p>

<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />

</figure>

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

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

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

<figure>

<figcaption>黄浦江上的的卢浦大桥</figcaption>

<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />

</figure>

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

相关教程

html5做网站：怎样用HTML5在网页图片上写文字 (159757 次浏览)

在做网站过程中，如果想在一张网页上实现图片加文字的格式，就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片，然后
「网站特效」html5 canvas粒子线条特效制作方法 (19727 次浏览)

canvas是html5中比较重要的一个标签，canvas的实现需要借助原生态的js特效代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中ca
HTML5之figure标签和figcaption标签 (115630 次浏览)

figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。实例
HTML文本格式化标签，“计算机输出”标签，引用标签 (131080 次浏览)

HTML 文本格式化：使用 pre 标签对空行和空格进行控制。“计算机输出”标签：这些标签常用于显示计算机/编程代码。引用标签：使用 blockquote
HTML文字倾斜标签是什么 (136376 次浏览)

HTML文字倾斜标签是什么？我们在做网站时，有的文字需要倾斜显示，这时就需要使用HTML文字倾斜标签了。HTML斜体标签：HTML 斜体标签元素知识与