4.3　图figure与figcaption

4.3　图figure与figcaption

figure元素是一个媒体的自合元素，通常作为插图、图标、照片和代码列表的自合。如果要为figure元素标签建立的标签组合定标题，则可以使用figcaption元素。

figure元素标签语法为：

figcaption元素标签语法为：

说明：

（1）figure元素可以包含多个内容块，例如多个图片。但不管figure元素里有多少内容，只允许有一个figcaption元素。

（2）可选的figcaption元素就是figure元素的标题，它并不是必需的，但如果出现，就必须是figure元素的第一个或最后一个元素。

（3）在网页中，图文是相伴出现的，图可以是图表、图形、照片、代码等，在HTML5之前，没有专门实现这个目的的元素。通过引入figure和figcaption元素，改变了这种情况。figure和figcaption元素是HTML5的新元素。

创建图及其标题的步骤如下：

（1）输入“＜figure＞”。

（2）作为可选步骤，输入“＜figcaption＞”开始图的标题。

（3）输入标题文字。

（4）如果在第（2）、（3）步创建了标题，就输入“＜/figcaption＞”。

（5）通过添加图像、视频、数据表格等内容的代码创建图。

（6）如果没有在figure元素内容之前包含figcaption元素，则可以在figure元素内容之后重复步骤（2）～（4）。

（7）输入“＜/figure＞”。

为img元素标签建立组合与标题的代码如下：

运行结果如图4-3所示。

图4-3　figure和figcaption元素标签实例运行结果