figure标签仅适用于构成一个不可拆分、可整体引用的独立信息单元的多图组合，需共用编号与上下文，且删除后正文逻辑完整；figcaption须为直接子元素且唯一，推荐置顶，文字需自包含；每张图alt属性必须独立准确，不可省略或复用。
figure 标签不是多图容器的语法糖，它只在一组图构成**一个不可拆分、可整体引用的独立信息单元**时才适用。用对了，语义清晰、读屏友好、SEO 友好；硬套进去，反而让辅助技术失焦、搜索引擎误判。
判断是否该用单个 figure 包多图
关键看这组图有没有共同编号、统一上下文，且删掉整组后正文逻辑依然完整：
- ✅ 合理：实验前/中/后的三张显微照片，共用“图A1–A3：细胞形态变化过程”
- ✅ 合理：Chrome/Firefox/Safari 对同一组件的渲染截图，配“图4.2：跨浏览器布局一致性对比”
- ❌ 错误：首页轮播的5张 banner 图塞进一个 figure，仅写“推荐商品”——每张图语义独立，应各自用 figure
- ❌ 错误：产品主图+细节图+包装图拼在一起，figcaption 写“产品展示”——缺乏具体指向，无法区分各图作用
figcaption 的位置与写法要点
figcaption 必须是 figure 的直接子元素，且只能有一个。推荐放在开头——屏幕阅读器先读说明再读图，理解更自然：
- 正确结构：
<figure><figcaption>图5：用户注册流程三步界面（v3.1）</figcaption><img src="step1.png" alt="第一步：邮箱输入与验证"><img src="step2.png" alt="第二步：密码设置与强度提示"><img src="step3.png" alt="第三步：成功跳转至欢迎页"></figure> - figcaption 文字需自包含：不能写“如下三图”，而要明确说明“哪三步”“版本号”“设计目标”等关键信息
- 避免空内容或纯装饰性文字；若为空格或仅标点，会被忽略
每张图的 alt 属性不能省略或复用
figcaption 是对整组的概括，alt 是每张图自身的替代文本，二者职责不同，缺一不可：
- 每张
都必须有独立、准确的 alt，例如：
alt="Chrome 中表单提交按钮处于悬停状态，背景色加深" - 禁止所有图都设
alt=""或统一复制同一段文字——视障用户听到三次“一张图”，却不知哪张对应哪个状态 - 纯装饰图（如分隔线图标）不该出现在 figure 中；figure 不接受无语义内容
横排布局不靠 float，用 inline-block + 垂直对齐
多个 figure 并列默认竖排，想横排需控制样式，但不能破坏语义：
- 给每个 figure 设
display: inline-block和vertical-align: top，避免基线错位 - 配合宽度控制（如
width: 30%）和间距（margin: 0 1.5%），保证响应式下不溢出 - 务必重置默认 margin：
figure { margin: 0; }，否则左右留白叠加边框易导致布局异常 - 禁用 float、position: absolute 或 flex-direction: column-reverse 反转 DOM 顺序——语义流一旦断裂，读屏器就失效
