figure + figcaption 仅适用于可独立存在、自带说明的图元；普通文章配图应直接用 img + alt，否则导致屏幕阅读器误读和SEO降权。
figure + figcaption 不该用在普通文章配图上——它只适用于能脱离上下文独立存在、自带说明文字的内容单元。乱用反而会让屏幕阅读器误读、SEO 降权。
哪些图必须套 figure + figcaption？
判断标准只有一个：这张图/内容能不能被抽出来放到附录、图库或单独页面，而不影响主文逻辑？它的标题或说明是不是它自身的一部分？
- 图表（
<svg>或<canvas>生成的折线图、饼图） - 代码截图 + 标题如
"fetch() 请求失败时的错误处理逻辑" - 引用的历史照片 + 来源说明，如
"1945年广岛原爆后废墟，美联社摄" - 产品对比图 + 标题
"iOS 与 Android 端主界面布局差异"
这些场景下，figure 告诉浏览器：“这是个可引用的独立单元”，figcaption 是它不可分割的语义标签。
为什么普通文章配图不能用 figure？
比如一篇讲咖啡冲泡的文章里，插一张手冲壶的照片，仅作示意、无来源、无编号、无解释性标题——它只是正文的视觉延伸，不是独立内容。
立即学习“前端免费学习笔记（深入）”；
- 用
<figure><img><figcaption>手冲壶示意图</figcaption></figure>是错的：语义上把它标成了“可抽离单元”，但实际不能 - 正确做法是直接
<img src="..." alt="手冲壶正在注水，水流呈细柱状">，靠alt传递必要信息 - 若真需要加说明，用
<p>或<aside>，而不是强行塞进figure
滥用会导致辅助技术重复播报、搜索引擎混淆主次内容。
figcaption 必须放第一个或最后一个子元素
位置错，语义就失效。即使 CSS 用 order 或 flex-direction: column-reverse 调换视觉顺序，只要 DOM 结构里 figcaption 不是首或尾直接子节点，屏幕阅读器就可能跳过或误读。
- ✅ 正确：
<figure><figcaption>图3-1：用户注册流程图</figcaption><svg>...</svg></figure> - ✅ 正确：
<figure><svg>...</svg><figcaption>拍摄于2023年东京展会现场</figcaption></figure> - ❌ 错误：
<figure><svg>...</svg><p>说明文字</p><figcaption>标题</figcaption></figure>（中间夹了<p>）
别用 position: absolute 把 figcaption 移出文档流——它必须是 figure 的直接子元素，且唯一。
多图共用一个标题怎么办？
figure 不支持“一组图 + 一个 figcaption”。常见错误是把三张手机截图全塞进一个 figure，再加一个 figcaption。
- ❌ 错误：
<figure><img><img><img><figcaption>iPhone 截图对比</figcaption></figure> - ✅ 正确：用
<section>包裹多个<figure>，每个图配自己的figcaption - ✅ 或用
<dl>：<dt>iPhone 截图对比</dt><dd><figure>...</figure></dd>
语义结构比视觉整齐更重要。宁可多写几行 HTML，也不要牺牲可访问性。
