<figure>: 图文容器标签

最后更新：2026-10-13

<figure>图文容器标签

表示一段独立的内容流，通常搭配 figcaption，用于图片、图表、代码、示例等。

<figure>图示内容</figure>

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
<figure>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： figure 内的内容即使被移动也不影响正文理解；标题用 figcaption 而非普通 p。

Qfigure 只能放图片吗？

A不是。<figure> 是「自包含、从文档主体抽走也不影响主旨」的内容单元：图片、代码块、表格、视频、图表、诗歌均可。常配合 <figcaption> 提供说明，相当于语义化的内容卡片。

Qfigure 和直接放 img 有什么区别？

A直接放 <img> 只是插图；包进 <figure> 后声明「这是可独立引用的内容单元」，屏幕阅读器把它当作带说明的整体朗读，配合 <figcaption> 还能建立图文关联。需要说明文字或成组内容时用 figure。

Qfigure 里可以放多张图片吗？

A可以。<figure> 允许多张图片共用一个 <figcaption>（如「图 1a 与图 1b」），这是它相对单个 <img> 的优势之一；每张图片仍需保留各自的 alt 属性。

更多案例即将上线，敬请期待。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。