figcaption必须是figure的首或尾直接子元素，否则语义失效；alt描述图像内容，figcaption说明上下文；figure仅用于独立可引用的内容，如图表、代码块等。
figcaption必须是figure的首或尾直接子元素
DOM结构错，语义就失效。屏幕阅读器和搜索引擎只认位置，不看CSS渲染顺序。中间插一个<p></p>、<div>或按钮，figcaption就脱离了绑定关系。
<p>常见错误写法：<code><figure><img><div><figcaption>...</figcaption></div></figure> —— figcaption不是figure的直接子节点，读屏器大概率跳过它。
- ✅ 正确：把
figcaption放在figure开头，紧挨着开标签：<figure><figcaption>图2:API响应结构</figcaption><img src="api.png" alt="..."></figure> - ✅ 也正确：放在结尾，但必须无其他兄弟节点：
<figure><img src="api.png" alt="..."><figcaption>图2:API响应结构</figcaption></figure> - ⚠️ 注意：
flex-direction: column-reverse或order只能调视觉顺序，DOM里仍得是首或尾——否则无障碍支持直接失效
alt和figcaption分工不能混
alt讲“图里有什么”，figcaption讲“为什么放这张图”。两者信息维度不同，照抄或省略任一者，都会让视障用户或搜索引擎丢失关键上下文。
典型错误：<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption> —— alt没描述内容，figcaption没提供额外信息，等于双空。
- ✅
alt应具体：如alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示表格与搜索框" - ✅
figcaption可精简但需有上下文：如<figcaption>图1:后台管理界面布局（v2.4版本）</figcaption>，带版本号或数据来源才真正有用 - ⚠️ 如果
img是纯装饰图（alt=""），就不该加figcaption——语义矛盾，读屏器会困惑
figure不是“给图加标题”的通用容器
滥用figure反而破坏语义。核心判断标准只有一条：删掉它，正文主干逻辑是否依然通顺？能挪到附录/图库里还成立吗？
轮播图单帧、文章配图示意、产品主图、头像旁昵称——这些都不是独立单元，硬套figure会让搜索引擎降权、读屏器重复播报。
- ✅ 该用：
<figure><svg>...</svg><figcaption>图3-1:用户注册流程图</figcaption></figure>（SVG可独立引用） - ✅ 该用：
<figure><pre class="brush:php;toolbar:false;"><code>...</code></pre> <figcaption>清单2:fetch()异常处理示例</figcaption></figure>（代码块自带说明） - ❌ 别用：
<figure><img src="coffee.jpg" alt="手冲壶注水"><figcaption>手冲壶示意图</figcaption></figure>→ 直接<img src="coffee.jpg" alt="手冲壶正在注水，水流呈细柱状">更干净
多图、样式与默认行为坑
figure默认几乎没样式，但img内联基线对齐会导致底部空白；figcaption默认块级居中、字体小，容易被忽略。
- 消除图片下方空白：
figure img { display: block; }，这是最常漏掉的基础修复 - 多图必须拆开：
<figure><img><figcaption>步骤1</figcaption></figure><figure><img><figcaption>步骤2</figcaption></figure>，不能塞进同一个figure - 轮播图每帧都要各自套
figure，外层用<section></section>统一管理，别指望一个figcaption覆盖全部 - 别用
<center></center>或align="center"——已废弃，用text-align: center或display: flex控制figcaption对齐
figcaption放前面——DOM顺序和CSS呈现必须分开考虑，不能靠样式“骗”结构。
