HTML <figure> 标签 详解
HTML基础 2022-06-02 09:40:21小码哥的IT人生shichen
HTML <figure> 标签
实例
用作文档中插图的图像：
<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
完整实例【亲自试一试】：
<!DOCTYPE HTML>
<html>
<body>
<p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>
<figure>
<p>黄浦江上的的卢浦大桥</p>
<p>拍摄者：phpcodeweb 项目组，拍摄时间：2010 年 10 月</p>
<img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
浏览器支持
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <figure> | 8.0 | 9.0 | 4.0 | 5.1 | 11.0 |
定义和用法
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
浏览器支持
所有主流浏览器都支持 <figure> 标签。
HTML 4.01 与 HTML 5 之间的差异
<figure> 标签是 HTML 5 中的新标签。
提示和注释
提示：请使用 <figcaption> 元素为 figure 添加标题（caption）。
全局属性
<figure> 标签支持 HTML 中的全局属性。
事件属性
<figure> 标签支持 HTML 中的事件属性。
相关阅读
- HTML <div> 标签的 align 属性 详解
- HTML <dir> 标签的 compact 属性 详解
- HTML <command> 标签的 type 属性 详解
- HTML <command> 标签的 radiogroup 属性 详解
- HTML <command> 标签的 label 属性 详解
- HTML <command> 标签的 icon 属性 详解
- HTML <command> 标签的 disabled 属性 详解
- HTML <command> 标签的 checked 属性 详解
- HTML <colgroup> 标签的 width 属性 详解
- HTML <colgroup> 标签的 valign 属性 详解
