figcaption必须作为figure的第一个或最后一个子元素，否则读屏器跳过说明、SEO丢失图文关联；alt描述图像内容，figcaption说明上下文；仅“可抽离+可独立引用”的图适用figure。

figcaption 不能单独存在，必须嵌在 figure 内且只能是第一个或最后一个子元素；写错位置、漏 alt、或把图注当装饰用，都会让读屏器跳过说明、SEO 丢失图文关联。

figcaption 必须紧贴 figure 开头或结尾

浏览器和读屏器靠 DOM 顺序判断归属关系，不是靠 CSS 渲染位置。中间插一个

、

或空格节点，语义就断了。

• ✅ 正确：

  图2:API 响应结构

  

• ✅ 正确：

  

  图2:API 响应结构

• ❌ 错误：

  来源：BI 系统

  ...

  （
  插在中间）
• 别用 flex-direction: column-reverse 或 order 强行视觉翻转——DOM 顺序没变，但读屏器会先读图再读标题，逻辑混乱

figcaption 和 img 的 alt 属性不能互换

alt 是图像缺失时的替代文本，面向盲人和搜索引擎；figcaption 是整张图的上下文说明，面向所有用户。两者信息维度不同，照抄或省略任一都破坏可访问性。

• alt 要描述“图里有什么”：比如 alt="折线图：横轴为月份，纵轴为日活用户数，2月到4月持续上升"
• figcaption 要说明“为什么放这里”：比如
  图3:Q1 用户增长加速与新渠道投放时间高度重合
• alt="" 表示图纯装饰 → 此时不该加 figcaption，否则语义矛盾
• 轮播图单帧、头像旁昵称、按钮图标这类内容，直接用 即可，不进 figure

哪些图真该用 figure + figcaption？

不是所有配图都适合。只有满足「可抽离 + 可独立引用」才用——删掉它，正文照样通顺；挪到附录里，标题依然准确。


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 适用：
  包裹代码截图（
  ）、SVG 架构图、带编号的数据图表、论文插图
• 不适用：banner 图、文章内辅助某句话的示意图（如“点击右上角保存按钮”，配个箭头图）、产品列表里的小图标
• 轮播图每张图要各自套一个 figure，不能一个 figure 包一堆 img
• 如果图注需 JS 动态插入，确保插入后 figcaption 仍在 figure 的首或尾，且不打乱原有子元素顺序

默认样式坑和基础修复

figure 几乎没有默认边距或边框，figcaption 默认居中、字体略小，但图片下方常有空白——那是 默认内联对齐基线导致的。

• 必加样式：figure img { display: block; } 消除底部间隙
• 居中图注建议：figure { text-align: center; }，而非依赖 text-align 对 figcaption 本身（它是块级）
• 响应式下别给 figcaption 设固定宽，文字可能撑破容器；用 max-width 控制 figure 更稳妥
• 不要用 position: absolute 把 figcaption 移出文档流——读屏器很可能忽略它

最常被忽略的是：figcaption 的位置不是“怎么好看怎么来”，而是“读屏器怎么读才合理”。DOM 顺序决定播报流，视觉样式只是表层——结构错了，再好看的 CSS 也救不回语义断裂。