figure是独立内容单元而非图片容器，可包含图表、代码、引文等可单独引用的内容；figcaption须唯一且位于首或尾，影响可访问性与SEO；允许多图共用一个figcaption，但需语义统一。
figure 标签不是“图片容器”，而是“独立内容单元”
很多人一看到 figure 就默认它是 figure。
常见错误是把所有带图的文字说明都硬套 figure，结果破坏了语义结构，反而不利于屏幕阅读器识别和 SEO。
- 适合用：
figure+img+figcaption表达一张有明确标题/说明的摄影图、示意图、数据图 - 不适合用：纯装饰性图片、按钮图标、头像、轮播图中的单帧（除非每帧本身构成独立信息单元）
-
figcaption必须是figure的第一个或最后一个子元素，且最多只能有一个
figcaption 放上面还是下面？浏览器默认位置与可访问性影响
HTML 规范允许 figcaption 出现在 figure 内部任意位置，但实际渲染和辅助技术（如读屏软件）会按 DOM 顺序解析。绝大多数场景下，把它放在 figure 最后更符合直觉和习惯——用户先看图，再读说明。
不过，如果说明文字是图注编号（如“图 3-2：用户登录流程”），且设计要求标题在图上方（常见于学术论文、技术文档），可以合法地把 figcaption 放最前面。CSS 可以视觉上调整布局，但 DOM 顺序仍决定语义优先级。
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器通常按 DOM 顺序朗读：先读
figcaption再读img（如果它在前） -
搜索引擎可能将
figcaption文本作为该图的强相关描述，影响图片搜索权重 - 不要用 CSS 的
order或flex-direction: column-reverse颠倒视觉顺序却保留 DOM 顺序不一致，这会误导辅助技术
figure 里能放多个 img 吗？组合图、对比图怎么处理
可以，figure 允许包含多个 img，也支持嵌套其他流内容（如 div、p、甚至另一个 figure），但关键在于整体是否构成一个语义完整的“独立单元”。比如左右并排的 A/B 测试截图、上下排列的步骤分解图，都算合理使用。
注意：多个图片共用一个 figcaption 是完全合法的，只要说明文字概括了全部内容；如果每张图都需要独立说明，则应拆分为多个 figure，而不是在一个 figure 里塞多个 figcaption（HTML 不允许）。
@@##@@ @@##@@ 图 4：CDN 与压缩策略实施前后首屏加载耗时对比
figure 没有默认样式，但 display 和 margin 会影响布局
浏览器对 figure 的默认样式非常轻量：display: block，没有内边距，上下外边距约 1em（各浏览器略有差异）。它不像 section 或 article 那样自带语义化样式，所以容易被忽略其垂直间距问题。
- 在段落中插入
figure时，常因默认margin-top/bottom导致图文间距过大，可用margin: 0重置 - 若需居中图片，别只给
img加display: block; margin: 0 auto，而应在figure上控制，避免破坏语义层级 - 响应式场景下，
figure本身不参与 flex/grid 布局的自动对齐，需显式设置display: flex或用text-align: center控制内部对齐
真正容易被忽略的是：当 figure 被设为 display: inline-block 或用于内联上下文时，底部默认留白（来自基线对齐），这时需要加 vertical-align: top/middle 或设 font-size: 0 清除间隙。
