figure中嵌套多张img时必须且只能有一个figcaption，作为其直接子元素置于开头或结尾，用于统一说明整组图内容，而非为每张图单独标注；figcaption与各img的alt属性分工明确，不可互换或省略。
figure里放多张img要不要加figcaption
不强制，但语义上建议至少有一个figcaption——它不是给每张图配一个，而是为整个figure内容提供统一说明。比如一组对比截图、同一场景不同角度的照片，用一个figcaption概括比重复写十次更合理。
常见错误是把figcaption塞在img标签里，或者每个img后面跟一个figcaption，这会破坏语义结构，屏幕阅读器也会误读为多个独立图表。
正确位置是figure的直接子元素，且只能出现一次，通常放在开头或结尾：
<figure> @@##@@ @@##@@ @@##@@ <figcaption>2024年用户界面A/B测试三组原型截图</figcaption></figure>
多图横向排列时该用CSS Grid还是Flexbox
优先用display: flex——简单、兼容性好、对齐控制直接。Grid更适合需要行列对齐、跨图合并或响应式断点复杂的情况。
Flex方案要注意三点：
- 给
figure设display: flex，别给img设，否则每张图变成独立flex容器 - 默认
flex-wrap: nowrap，图片多时会溢出；加flex-wrap: wrap并配合justify-content: center更稳妥 -
img本身有默认vertical-align（baseline），导致底部留白；加vertical-align: top或display: block可消除
示例最小可用样式：
figure { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
figure img { max-width: 100%; height: auto; display: block; }
figure嵌套多图时的无障碍与SEO影响
搜索引擎和读屏工具依赖figure/figcaption识别内容意图。如果只堆img不加alt或figcaption，相当于放弃这部分语义价值。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
关键实操点：
- 每张
img必须有alt属性，即使为空（alt=""）也要显式写出，不能省略 -
figcaption文字需具体，避免“图片1”“示意图”这类无信息量描述 - 如果图组有逻辑顺序（如步骤流程），用
aria-describedby关联到figcaption的id，强化顺序提示
错误写法：<img src="a.jpg">（缺alt）；正确写法：<img src="b.jpg">
响应式多图排版中figure宽度失控怎么办
常见现象是小屏幕下图片撑破容器、换行错乱、左右留白不一致——根本原因是figure默认是块级元素，但没设max-width，而img的max-width: 100%只对父容器生效。
必须加的约束：
-
figure自身设max-width: 100%，防止它超出上下文（比如在article内） -
img设width: 100%而非仅max-width，确保flex或grid子项能按比例收缩 - 如果用
gap，注意IE不支持，降级方案可用margin模拟，但要避免最后一行多余外边距
最简健壮组合：
figure { max-width: 100%; }
figure img { width: 100%; height: auto; display: block; }
复杂布局里容易忽略的是figure的margin默认值，部分浏览器会加上下边距，必要时重置margin: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
