正确使用 figure 和 figcaption 是建立图文语义契约：figure 仅用于可独立抽离的图元，figcaption 必须为直接子元素且与 alt 分工明确——alt 描述图像内容，figcaption 说明其文档角色。
用好 figure 和 figcaption 不是“给图加个标题”那么简单，而是建立图文之间的语义契约——让屏幕阅读器能准确播报、搜索引擎能理解关联、内容可独立抽离复用。
先判断：这张图配不配进 figure
只有满足以下任一条件，才该用 figure：
- 删掉整个
figure块，正文主干逻辑依然通顺 - 它能被单独放进附录、侧栏或参考文献，并被编号引用（如“见图2.1”）
- 它承载明确上下文信息，比如“图3：2024年用户留存率对比”“清单1：JWT响应结构”
轮播图单帧、产品主图、头像、banner、装饰图标、仅辅助某句话的示意图——这些都不是独立单元，直接用 img + alt 即可。硬套 figure 反而干扰读屏器。
figcaption 必须是 figure 的首个或末个直接子元素
这是 W3C 强制规范，不是样式建议。DOM 顺序决定读屏器播报顺序：先读 figcaption，再读图像内容。用户带着标题上下文去理解图，才不会困惑。
- ✅ 正确：
图2：API响应结构 
- ✅ 也正确：
图2：API响应结构 - ❌ 错误：
figcaption不是直接子元素） - ❌ 错误：
说明文字
p不是figcaption，无法被识别）
别用 flex-direction: column-reverse 把视觉位置拉回顶部来“骗”样式——语义断了，无障碍就失效了。
alt 和 figcaption 各司其职，不能重复也不能互换
alt 回答“图里有什么”，是图像的替代文本，供无图环境、加载失败或读屏器初始播报使用。
figcaption 回答“这张图为什么在这”，说明其文档角色、结论、编号、来源或数据背景。
- ✅ 推荐：
图1：后台管理界面布局（v2.4.0） - ❌ 错误：
图1：后台管理界面布局 - ⚠️ 注意：若
alt=""（纯装饰图），则绝不可加figcaption——语义矛盾
多图、轮播与排版细节
每张图必须独占一个 figure。轮播组件本身不是语义化图元，应由外层 div 或 section 承载，内部每个 img 配自己的 figure + figcaption。
统一标题（如“图1–图4：系统架构演进”）应放在外层 section 或 h2 中，而非让一个 figcaption 覆盖多张图。
figure 默认有上下外边距（margin-top: 1em; margin-bottom: 1em;），这是为“独立单元”预留的语义呼吸空间。如需紧凑排版（如图库网格），优先用 display: grid 或 flex 控制子项间距，而非粗暴清空 margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
