可以，figure允许包含多个，但必须满足“可抽离性”前提，即整组图构成自包含、可被整体引用的独立单元，如实验前后对比图或跨浏览器渲染截图，而非无逻辑关联的拼凑。
figure里能放多个![]()
吗？可以，但必须满足“可抽离性”前提
可以，figure 允许包含多个 <img>，但它不是“多图容器”的语法糖。关键判断标准仍是：这一组图是否构成一个**自包含、可被整体引用的独立单元**？比如“图A1–A3：显微镜下细胞形态对比”，删掉整组后正文逻辑依然成立——这才适合用单个 figure 包裹。
常见错误现象：figure 里塞三张产品细节图，每张都带不同 alt，但 figcaption 只写“产品外观”，用户无法区分哪张对应哪个视角；或把轮播图的全部 <img> 塞进一个 figure，结果语义上变成“这是一张由5张图拼成的大图”，完全失真。
- ✅ 合理场景：论文中并列展示实验前/中/后的三张显微照片，共用一个编号和说明
- ✅ 合理场景：技术文档中一组对比截图（Chrome/Firefox/Safari 渲染同一组件），
figcaption写明“不同浏览器下的布局表现” - ❌ 错误做法：用一个
figure包住首页 Banner 图 + 用户头像 + 二维码——内容无逻辑关联，纯为视觉排版
多个![]()
共用一个时，alt怎么写？
alt 属性仍需为**每张图单独提供**，不能留空或统一复制。因为 alt 是图像缺失时的替代文本，也是屏幕阅读器播报的基础单位；而 figcaption 是对整个 figure 单元的说明，不替代单图语义。
典型错误是给所有 <img> 都设 alt=""，只靠 figcaption 交代信息——视障用户听到“一张图”“一张图”“一张图”，然后才听到“三组对比截图”，完全无法建立映射。
- 每张
<img>的alt应简明描述其自身内容，如alt="Chrome 浏览器中按钮默认状态" -
figcaption聚焦整体上下文：编号（“图4.1”）、用途（“表单控件跨浏览器渲染对比”）、数据来源（“测试环境：Win11 + Chrome 124 / Firefox 125 / Safari 17.5”） - 若某张图纯装饰（如分隔线图标），它就不该出现在
figure里——figure不接受装饰性内容
多图并排不换行？别碰 float，用 inline-block + vertical-align
figure 默认是块级元素，连续写三个 <figure></figure> 必然竖排。想横排，不能靠 float 或 display: inline——前者在响应式下易塌陷，后者会让 figcaption 因换行撑开高度。
正确做法是控制每个 figure 的显示行为，而非修改内部结构：
- 给每个
figure设display: inline-block和vertical-align: top（缺后者会导致基线错位） - 用
width+margin控制间距，例如width: calc(33.333% - 20px); margin: 0 10px; - 务必重置默认外边距：
figure { margin: 0; }，否则浏览器自带的margin-top/bottom会破坏行内对齐
示例 CSS 片段：
figure {
display: inline-block;
vertical-align: top;
margin: 0;
width: calc(33.333% - 20px);
margin: 0 10px;
}
figcaption放在多个img前面还是后面？优先放前面
规范允许 figcaption 在 figure 的首或尾，但**放在第一个子元素位置更合理**。原因很实际：屏幕阅读器按 DOM 顺序播报，先读到 figcaption（“图2.3：移动端手势操作流程”），再依次读三张图各自的 alt（“左滑删除手势示意”“长按进入编辑模式”“双指缩放界面”），用户能带着上下文理解每张图的作用。
如果 figcaption 放最后，用户得先听三遍“一张图”，再听到整体说明，认知负担陡增。视觉上想让标题在下？靠 CSS 控制即可，比如 figcaption { margin-top: 0.5em; }，不要用 flex-direction: column-reverse 反转 DOM 顺序——那会彻底破坏语义流。
真正容易被忽略的点是：figcaption 文字本身是否经得起“脱离图像单独存在”的检验。比如写“见上图”或“左侧三张”，一旦这组图被 CSS 移到侧栏或打印为附录，这句话就完全失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
