figure 和 figcaption 是语义化标签，用于标识可独立引用的图文单元；判断标准是删除后正文是否仍通顺；figcaption 必须为 figure 的首或尾直接子元素，alt 与 figcaption 职能不同不可混用。
figure 和 figcaption 是一对语义绑定的 HTML5 标签，不是“给图片加标题”的样式工具，而是向浏览器、搜索引擎和读屏器明确表达：这段图文是一个可独立引用、自包含的内容单元。
判断是否该用 figure + figcaption
关键标准只有一条：把这组图文整个删掉，正文是否依然通顺、逻辑完整？
- 适合用：学术论文里的折线图（带编号与数据来源）、技术文档中 fetch() 返回结构截图（附字段说明）、博客里自绘的 SVG 架构图（带设计意图）、引用的历史照片（标时间地点出处）、独立展示的代码块（配功能说明）
- 不该用：纯装饰性头图、轮播图单帧、产品页主图、列表项小图标——这些属于内容的一部分，不是可被单独引用的图元
figcaption 的位置必须严格合规
它只能是 figure 的第一个或最后一个直接子元素，中间不能插任何其他标签（包括
、
、按钮等）。
- 标题型说明（如“图3-2：用户登录流程图”）建议放最前面，符合编号习惯，也利于结构化数据提取
- 解释型说明（如“拍摄于2023年东京展会，iPhone 14 Pro 拍摄”）更适合放在图片之后，避免打断阅读流
- 不要用 CSS 的
flex-direction: column-reverse或position: absolute强行视觉翻转——DOM 顺序没变，但语义和视觉错位，会干扰辅助技术
alt 与 figcaption 各司其职，不可混用
alt 是图像自身的替代文本，figcaption 是整个 figure 单元的上下文说明，二者信息维度不同，重复写反而降低可访问性。
- alt 要简短准确（≤125 字符），描述“图上有什么”，例如：
alt="左侧导航含‘用户管理’‘角色配置’，主区为带搜索框的用户表格" - figcaption 可稍长，补充“为什么放这张图”，例如：
<figcaption>图1：权限管理模块界面布局，支持RBAC角色分级控制</figcaption> - 如果图是纯装饰（
alt=""），就绝不能加 figcaption——否则语义矛盾，辅助技术会困惑
常见结构陷阱与处理建议
figure 默认无边框、无 padding，视觉上像普通 div，容易误以为没生效。实际使用中几个细节要特别注意：
- 一个 figure 里只能有一个 figcaption；多段说明请拆成多个 figure
- 轮播图、图库、多图对比——每张图应各自包裹在独立的 figure 中，不能共用一个
- figure 里不能混入按钮、操作栏、来源链接等非图元内容；这些应移出 figure，用外层 div 或 section 承载
- 响应式图片（
<picture></picture>或srcset）仍需完整包裹在 figure 内，figcaption 位置规则不变
