figure标签仅支持一个figcaption且必须为直接子元素，位置限首或尾；多个媒体对象须分属独立figure，用CSS布局实现视觉并列而不破坏语义。
figure 标签内部不支持多个独立媒体对象共用一个 figcaption，这是语义结构的硬性前提。它不是“容器”，而是定义一个单一、自包含的语义单元——即一张图、一段代码、一个图表，配上一段专属说明。
所以，不存在“多个媒体对象如何排序”的自由安排；正确的做法是：每个需独立说明的媒体内容，都应各自包裹在独立的 figure 中。
figure 内部子元素的合法顺序与限制
-
figcaption必须是figure的直接子元素，且只能出现一次（W3C 规范强制限定）； - 它的位置只能是第一个或最后一个子元素，不可居中、不可嵌套、不可重复；
- 其他内容（如
<img>、<code>、<svg>、<video>等）必须与figcaption并列，同为figure的直接子元素； - 多个媒体元素（比如两张图、一段代码加一张图）不能塞进同一个
figure，否则语义坍塌：读屏器无法区分哪段说明对应哪个图，搜索引擎也无法准确索引。
✅ 正确示例（两个独立图元）：
<figure>
<img src="api-flow.png" alt="API 请求响应流程图">
<figcaption>图1：用户登录接口调用链路</figcaption>
</figure>
<figure>
<pre><code class="json">{"status":"error","code":401}</code></pre>
<figcaption>清单2：未授权错误响应示例</figcaption>
</figure>❌ 错误示例（强行合并）：
<!-- 语义失效：figcaption 无法明确指向任一具体媒体 --> <figure> <img src="a.png" alt="界面截图A"> <img src="b.png" alt="界面截图B"> <figcaption>图3：前后端交互界面对比</figcaption> </figure>
这种写法会让辅助技术丢失上下文关联，也违背“可抽离性”原则——删掉其中一张图，说明文字就失去意义。
如何处理需并列展示的多个相关图元？
若视觉上需左右/上下并排（如对比图、分步骤流程图），仍应保持语义分离：
- 每个图配独立
figure+figcaption； - 用 CSS（如 Flex/Grid）控制布局，不破坏 DOM 顺序；
- 小屏下可自然回流为上下结构，语义与可访问性全程保全。
例如：
<div class="figure-group">
<figure>
<img src="before.png" alt="优化前数据库查询耗时分布">
<figcaption>图4a：优化前慢查询占比</figcaption>
</figure>
<figure>
<img src="after.png" alt="优化后数据库查询耗时分布">
<figcaption>图4b：优化后慢查询占比</figcaption>
</figure>
</div>配合 CSS：
.figure-group { display: flex; gap: 1rem; }
@media (max-width: 768px) {
.figure-group { flex-direction: column; }
}这样既满足视觉需求，又确保每个图元可被独立引用、编号、朗读、索引。
不复杂但容易忽略。
