使用 <figure> 元素标记文档中的一个图像。<figure> 元素带有一个标题:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <figcaption> 标签。
注释:IE 8 或更早版本的 IE 浏览器不支持 <figcaption> 标签。
标签定义及使用说明
<figcaption> 标签为 <figure> 元素定义标题。
<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。
html中figure 和 figcaption 元素的区别
figure和figcaption是两个经常在一起使用的语义化元素。
figure元素经常用于图片,如下所示:
<figure>
<img src="/it-htmltag/dog.jpg" alt="Maltese Terrier">
</figure>
figure元素表示内容的一个自包含单元。这就意味着你要么可以在文档中向下移动该元素,要么使其处于文档的底部,它都不会影响文档的含义。
因此,我们需要记住,不是每一个图片都是一个figure.
figure中有多张图片
你可以在一个figure中放置多张图片,如果这些图片在你的文档中存在上下文关系。
<figure>
<img src="/it-htmltag/dog1.jpg" alt="Maltese Terrier">
<img src="/it-htmltag/dog2.jpg" alt="Black Labrador">
<img src="/it-htmltag/dog3.jpg" alt="Golden Retriever">
</figure>
figure中也可以使用其它元素
figure元素不仅仅只限于图片的使用,也适用于其他元素,如下:代码块,视频,音频剪辑,广告。
如何使用figcaption元素
figcaption元素代表了figure元素的一个标题或者说是其相关解释。并不是每一个figure元素都需要一个figcaption。但是在使用figcaption时,它最好是figure块的第一个或者最后一个元素。
<figure>
<figcaption>Three different breeds of dog.</figcaption>
<img src="/it-htmltag/dog1.jpg" alt="Maltese Terrier">
<img src="/it-htmltag/dog2.jpg" alt="Black Labrador">
<img src="/it-htmltag/dog3.jpg" alt="Golden Retriever">
</figure>
或者:
<figure>
<img src="/it-htmltag/dog1.jpg" alt="Maltese Terrier">
<img src="/it-htmltag/dog2.jpg" alt="Black Labrador">
<img src="/it-htmltag/dog3.jpg" alt="Golden Retriever">
<figcaption>Three different breeds of dog.</figcaption>
</figure>
HTML 4.01 与 HTML5之间的差异
<figcaption> 标签是 HTML5 中的新标签。
<figcaption> 标签支持 HTML 的全局属性。
<figcaption> 标签支持 HTML 的事件属性。