figure 是语义容器而非 img 替代品，用于标识独立、可移动、自带说明的内容单元；必须含子元素（如 img），figcaption 须为首或尾子元素，alt 与 figcaption 各司其职。
figure 不是 img 的替代品，而是语义容器
figure 和 img 解决的是完全不同的问题：img 是一个内联内容元素，负责把一张图“画出来”；而 figure 是一个块级语义容器，负责声明“这段内容（不管是不是图）是一个独立、可移动、自带说明的单元”。它不渲染任何视觉样式，也不处理图像加载逻辑——这些仍得靠 img 或其他子元素完成。
常见错误现象包括：用 figure 替代 img 导致页面空白（忘了往里放 img）、给 figure 加 src 属性（它根本不支持）、或把装饰性图标硬塞进 figure（破坏语义，反而降低可访问性）。
-
figure必须包含至少一个内容子元素（如img、code、video），否则语义失效 -
figcaption只能是figure的第一个或最后一个子元素，放中间会被解析为普通内容，失去标题语义 - 如果图只是段落里的插图、无标题、也不需要独立引用，直接用
img更轻量、更准确
什么时候必须用 figure + figcaption 而不是 div + p
当你需要明确告诉浏览器和辅助技术：“这个内容块可以脱离上下文存在，且它的标题属于它自己”，就该用 figure。典型场景包括：
- 技术文档中的代码截图 ——
figure包裹pre+code，figcaption写“示例 3-2：React useEffect 清理函数写法” - 新闻稿里的信息图 ——
figure包裹img，figcaption写“图 1：2025 年全球碳排放趋势（数据来源：IEA）” - 博客中的引用截图 ——
figure包裹blockquote，figcaption标注出处和作者
用 div + p 模拟也能实现视觉效果，但会丢失结构语义：屏幕阅读器无法识别这是“图+标题”的绑定关系，SEO 工具无法提取图注作为上下文线索，CSS 媒体查询时也无法统一控制所有“图元”的响应行为。
立即学习“前端免费学习笔记（深入）”；
figure 中嵌套 img 的正确写法与易错点
最常被忽略的一点：在 figure 里用 img，alt 属性依然必须存在，且语义职责不变——它描述图像本身；而 figcaption 描述的是整个图元的上下文意义。两者不可互相替代。
<figure> <img src="chart-sales-q1.png" alt="柱状图：2025年Q1各区域销售额，华东最高达2400万元"> <figcaption>图 2：2025 年第一季度销售分布（单位：万元）</figcaption> </figure>
-
alt要具体到图像内容细节（比如数值、趋势、对象），不能只写“销售图表” -
figcaption可含编号、来源、说明性补充，但不宜重复alt已表达的信息 - 不要给
figure设置width/height—— 这些应作用于内部的img或通过 CSS 控制容器尺寸 - 若图需响应式缩放，优先用 CSS 的
max-width: 100%+height: auto，而非在img上写死像素值
figure 在现代布局中的实际影响
figure 本身不改变渲染流，但它让 CSS 和 JS 更容易做“语义化批量操作”。例如：
- CSS 中用
figure img { border-radius: 4px; }统一处理所有图元内的图像，比写一堆类名更干净 - 打印样式表中用
@media print { figure { page-break-inside: avoid; } }防止图元被截断 - 无障碍工具依赖
figure+figcaption的组合来生成图像索引或导出附录 - 某些 SSR 框架（如 Next.js）会基于
figure自动注入 loading=lazy 或预设宽高，但前提是内部img正确设置了width/height
真正容易被忽略的是：figure 的“独立性”不是视觉上的居中或加边框，而是逻辑上的可抽离。如果你在写文档时心里想的是“这段图可以挪到文末附录里”，那它大概率就该用 figure。
