正确使用 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，再读图像内容。用户带着标题上下文去理解图，才不会困惑。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<figure><figcaption>图2：API响应结构</figcaption><img src="api.png" alt="JSON格式响应体截图"></figure> - ✅ 也正确：
<figure><img src="api.png" alt="JSON格式响应体截图"><figcaption>图2：API响应结构</figcaption></figure> - ❌ 错误：
<figure><img alt="HTML5 中怎么用 figure 和 figcaption 标签完美图文排版" ><div><figcaption></figcaption></div></figure>（figcaption不是直接子元素） - ❌ 错误：
<figure><img alt="HTML5 中怎么用 figure 和 figcaption 标签完美图文排版" ><p>说明文字</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></figure>（p不是figcaption，无法被识别）
别用 flex-direction: column-reverse 把视觉位置拉回顶部来“骗”样式——语义断了，无障碍就失效了。
alt 和 figcaption 各司其职，不能重复也不能互换
alt 回答“图里有什么”，是图像的替代文本，供无图环境、加载失败或读屏器初始播报使用。
figcaption 回答“这张图为什么在这”，说明其文档角色、结论、编号、来源或数据背景。
- ✅ 推荐：
<img alt="左侧导航含‘用户管理’‘角色配置’菜单，主区为带搜索框的用户列表表格"><figcaption>图1：后台管理界面布局（v2.4.0）</figcaption> - ❌ 错误：
<img alt="后台管理界面"><figcaption>图1：后台管理界面布局</figcaption>（alt太简略，figcaption又没补充新信息） - ⚠️ 注意：若
alt=""（纯装饰图），则绝不可加figcaption——语义矛盾
多图、轮播与排版细节
每张图必须独占一个 figure。轮播组件本身不是语义化图元，应由外层 div 或 section 承载，内部每个 img 配自己的 figure + figcaption。
统一标题（如“图1–图4：系统架构演进”）应放在外层 section 或 h2 中，而非让一个 figcaption 覆盖多张图。
figure 默认有上下外边距（margin-top: 1em; margin-bottom: 1em;），这是为“独立单元”预留的语义呼吸空间。如需紧凑排版（如图库网格），优先用 display: grid 或 flex 控制子项间距，而非粗暴清空 margin。
