只有能脱离正文独立存在且自带解释性标题的图才必须用<figure>+<figcaption>，如图表、代码截图、历史照片、产品对比图；<figcaption>须为<figure>首个或最后一个直接子元素且唯一。
不是所有图片都该用 <figure> + <figcaption> —— 乱用反而破坏语义、影响读屏器和 SEO。
哪些图必须用 <figure> + <figcaption>
只适用于能脱离正文独立存在、自带解释性标题的图元。判断标准就一条：这张图抽出来放进附录或图库，主文逻辑是否依然完整？
- 图表（
<svg>或<canvas>生成的折线图、饼图） - 代码截图 + 标题，如
<figcaption>fetch() 请求失败时的错误处理逻辑</figcaption> - 历史照片 + 来源说明，如
<figcaption>1945年广岛原爆后废墟，美联社摄</figcaption> - 产品对比图 + 标题，如
<figcaption>iOS 与 Android 端主界面布局差异</figcaption>
这些场景下，<figure> 告诉浏览器：“这是个可引用的独立单元”，<figcaption> 是它不可分割的语义标签。
<figcaption> 的位置和数量有硬性限制
它必须是 <figure> 的**第一个或最后一个直接子元素**，且只能有一个。DOM 结构错，语义就失效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<figure><figcaption>图3-1：用户注册流程图</figcaption><svg></svg></figure> - ✅ 正确：
<figure><img src="..."><figcaption>拍摄于2023年东京展会现场</figcaption></figure> - ❌ 错误：
<figure><img><p>说明文字</p><figcaption>标题</figcaption></figure>（中间夹了<p>） - ❌ 错误：
position: absolute把<figcaption>移出文档流 —— 它必须是<figure>的直接子元素
普通文章配图别套 <figure>，用 <img> + alt 就够了
比如一篇讲咖啡冲泡的文章里，插一张手冲壶的照片，仅作示意、无编号、无解释性标题——它只是正文的视觉延伸，不是独立内容。
- ❌ 错误写法：
<figure><img src="..."><figcaption>手冲壶示意图</figcaption></figure>（语义上把它标成“可抽离单元”，但实际不能） - ✅ 正确做法：
<img src="..." alt="手冲壶正在注水，水流呈细柱状"> - 若真需要加一段说明文字，用
<p>或<div>挨着放，不塞进<figure>
滥用 <figure> 会导致屏幕阅读器重复播报、搜索引擎混淆主次内容。
<figure> 和 alt 的分工必须分清
alt 属性描述图像“是什么”，<figcaption> 解释它“为什么在这里、意味着什么”。
<img src="chart.png" alt="2024年Q1-Q4销售额柱状图，蓝色代表线上渠道，橙色代表线下"><figcaption>图2-4：线上渠道在Q4增速达37%，反映双十一大促拉动效应</figcaption>
删掉 <figure> 不应破坏正文逻辑；而删掉 alt 会让图像对视障用户完全不可读 —— 两者不可互相替代，也不可省略其一。
