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