只有当多图构成语义上不可拆分的独立单元时才应共用figure；figcaption须唯一且首尾放置；每张img需独立准确的alt；横排推荐flex布局。
用 figure 嵌套多张对比图片，关键不在“怎么包”，而在“该不该包”——只有当这几张图共同构成一个**语义上不可拆分的独立单元**时，才适合共用一个 figure。
判断是否真该共用一个 figure
不是所有多图都适合塞进同一个 figure。核心标准是：删掉整组后，正文逻辑依然成立，且这组图在文档中被当作一个整体引用（比如论文里写“见图4.1–4.3”）。
- ✅ 合适：实验前/中/后的三张显微照片，统一编号为“图A1–A3”，配一句说明“细胞形态随处理时间变化”
- ✅ 合适：Chrome/Firefox/Safari 对同一组件的渲染截图，figcaption 写“表单按钮在主流浏览器中的表现差异”
- ❌ 不合适：首页 Banner、用户头像、二维码拼在一起只为视觉排版
- ❌ 不合适：轮播图的5张产品图——它们是动态切换的多个独立内容，不是静态对比单元
结构必须合规：figcaption 只能出现一次，且紧邻开头或结尾
figcaption 必须是 figure 的**第一个或最后一个直接子元素**，不能嵌套在 div 或 p 里，也不能有两个。
推荐两种写法：
- 标题前置（强调编号与归属）：
<figure><br> <figcaption>图2.1：API 响应状态码对照</figcaption><br> @@##@@<br> @@##@@<br> @@##@@<br></figure>
- 说明后置（侧重解释）：
<figure><br> @@##@@<br> @@##@@<br> <figcaption>前端资源压缩与懒加载实施前后性能对比（测试环境：Lighthouse 11.2）</figcaption><br></figure>
每张 img 的 alt 属性必须独立、准确、不可省略
alt 是图像缺失时的替代文本，也是屏幕阅读器播报的基础单位。它不共享，也不留空。
- 错：所有
<img src="200.png" alt="HTTP 200 成功响应示例">都设alt=""，只靠figcaption交代信息 - 对：每张图单独描述其内容，例如：
alt="Chrome 124 中导航栏默认状态"alt="Firefox 125 中导航栏悬停高亮效果"alt="Safari 17.5 中导航栏焦点轮廓样式" - figcaption 则聚焦整体：编号、用途、数据来源等，不重复描述图像本身
横排展示不靠 float，用现代布局控制
figure 默认块级，连续多个会竖排。要并排显示多图，别用已淘汰的 float。
- 推荐方案：给
figure设置display: flex，内部img设flex: 1或固定宽，并配合gap - 响应式友好写法：
figure { display: flex; flex-wrap: wrap; gap: 1rem; }<br>figure img { flex: 1 1 calc(33% - 0.66rem); max-width: 100%; } - 若需等高对齐，加
align-items: flex-start，避免因图高不同导致错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
