figure标签应仅用于自包含、可独立引用的图表或代码块单元，figcaption须为直接子元素且唯一，dom顺序决定辅助技术播报流，语义失效即退化为普通div。
figure 标签能包裹图表和代码块，但必须满足“可抽离性”前提——删掉整个 figure，正文逻辑不能断；否则语义失效，读屏器和搜索引擎可能直接跳过说明文字。
哪些图表/代码块适合用 figure 包裹
判断依据不是“有没有图或代码”，而是它是否构成一个**自包含、可被独立引用的单元**：
- 技术文档中一段
<pre class="brush:php;toolbar:false;"><code>{ "status": "ok" }</code></pre>，配figcaption写“清单2：成功响应结构（HTTP 200）” - 博客里用 SVG 绘制的“前端请求链路图”，
figcaption标注“图3：React 应用数据流示意” - 论文附录中的 Matplotlib 生成的折线图 PNG，带编号与实验条件说明
- API 文档中 curl 命令 + 返回示例的组合块（需用
<pre class="brush:php;toolbar:false;"></pre>和<code>嵌套）
❌ 不适合的情况：@@##@@ 是段落内“如图所示”的局部截图、控制台报错贴图未加上下文、轮播图单帧、纯装饰性 SVG 图标——这些应直接用 @@##@@ 或 <div role="img">。
<h3>figcaption 必须是直接子元素，且只出现一次</h3>
<p>DOM 顺序决定辅助技术播报流。浏览器和读屏器只认第一个 <code>figcaption，第二个会被忽略：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 正确：
<figure><figcaption>图1：fetch 请求生命周期</figcaption><pre class="brush:php;toolbar:false;"><code>fetch(...)</code></pre></figure> - ✅ 也可后置：
<figure><pre class="brush:php;toolbar:false;"><code>...</code></pre> <figcaption>清单4：服务端返回的错误结构</figcaption></figure> - ❌ 错误：
<figure><div><figcaption>...</figcaption></div> <pre class="brush:php;toolbar:false;">...</pre></figure>（figcaption不是直接子元素） - ❌ 错误：
<figure><figcaption>A</figcaption><pre class="brush:php;toolbar:false;">...</pre> <figcaption>B</figcaption></figure>（第二个被忽略）
视觉上想让标题在上、代码在下，但语义要求说明后置？别用 position: absolute 或 flex-direction: column-reverse 移动 figcaption——DOM 结构没变，但语义和视觉错位，辅助技术仍按原始顺序播报。
多图/多代码块共用一个 figure 的边界在哪
可以，但前提是整组内容构成一个不可拆分的独立单元，且 figcaption 描述的是**整体**，不是拼凑：
- ✅ 合理：
<figure><img><img><figcaption>图5：表单提交前后 UI 状态对比</figcaption></figure> - ✅ 合理：
<figure><pre class="brush:php;toolbar:false;"><code>npm install</code></pre> <pre class="brush:php;toolbar:false;"><code>yarn add</code></pre> <figcaption>清单1：包管理器初始化命令对比（Node.js 20+）</figcaption></figure> - ❌ 错误：把三张产品图（正面/侧面/细节）塞进一个
figure，figcaption只写“产品外观”，不区分每张图的alt——视障用户听到三次“一张图”，无法对应视角
每张 <img src="before.png" alt="登录页初始状态"> 或每个 <pre class="brush:php;toolbar:false;"><code></code></pre> 仍需自己的 alt（对图像）或可访问文本（对代码），figcaption 不替代它们。
CSS 控制 figure 布局时容易踩的坑
figure 默认只有上下 margin，无 padding/border/display 设置，视觉上像普通 <div>，容易误以为样式没生效：
<ul>
<li>想左图右文？设 <code>figure { display: flex; align-items: flex-start; }，再控制 <img src="after.png" alt="提交后加载态"> 宽高和 figcaption 最小宽度，避免文字被压缩
@media (max-width: 768px) { figure { flex-direction: column; } } 回退为上图下文position: absolute 把 figcaption 移出文档流——辅助技术可能完全跳过它figure 横排？别用 float，改用 display: inline-flex 或 CSS Grid，确保 figcaption 在小屏下仍能自然换行最常被忽略的一点：figure 的语义强度取决于你是否真的把它当“可抽离单元”来用。如果只是为图加个标题而硬套 figure，那它就退化成一个带默认 margin 的 <div>，所有语义价值归零。
<img><img>
</div>
