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