合法，但须满足“可抽离性”和“不可拆分性”：多图共用一个figure仅适用于逻辑关联、不可分割的内容单元，如实验阶段对比图或跨浏览器截图，禁用于无关联拼凑；每张img需独立alt描述，figcaption须为单个且位于figure首或尾；横排布局应采用inline-block或grid而非float；轮播图必须每图单独figure，不可合并。
多张图共用一个figure是否合法？
合法，但必须满足“可抽离性”和“不可拆分性”两个硬条件。浏览器不拦你写多个 <img> 在一个 <figure></figure> 里，但语义上它就代表“这是一组不可分割的独立内容单元”。
- ✅ 合理：实验前/中/后三张显微照片，共用
<figcaption></figcaption>“图4.1：细胞凋亡过程阶段性对比（2026-05-12）” - ✅ 合理：Chrome/Firefox/Safari 渲染同一组件的三张截图，
<figcaption></figcaption>写明“跨浏览器布局一致性验证” - ❌ 错误：首页 Banner、用户头像、二维码拼在一起塞进一个
<figure></figure>——内容无逻辑关联，纯为视觉凑数 - ⚠️ 注意：
<figcaption></figcaption>仍是单个、且必须是<figure></figure>的首个或最后一个直接子元素，不能为每张图单独加一个
多图时alt属性怎么写才不踩坑？
alt 是每张图的独立替代文本，不是 figcaption 的复读机。留空、统一复制、或写“图片1”“图片2”都等于放弃无障碍支持。
- 每张
<img>必须有专属alt，例如：alt="Chrome 中按钮悬停状态：背景色变深蓝，边框加粗" - 不要写
alt=""除非该图纯装饰——而 figure 里根本不该放纯装饰图 - figcaption 可以精简，但
alt要承担描述职责：单位、趋势、关键数值、UI 元素位置等都得体现 - 常见错误：所有
<img>都设alt="系统界面截图"，然后指望屏幕阅读器靠<figcaption></figcaption>区分——它做不到
多图横排布局该用 float 还是 inline-block？
别碰 float，也别依赖 display: inline。现代方案是用 <figure></figure> 自身设 display: inline-block 或嵌套在 display: grid 容器里。
-
<figure></figure>默认块级，连续写三个必然竖排；想横排，必须控制其容器或自身显示模式 - 推荐做法：给每个
<figure></figure>加display: inline-block; vertical-align: top;，避免因换行导致<figcaption></figcaption>高度错乱 - 更稳妥方案：外层用
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)));">，内部每个 <code><figure></figure>保持语义原样 - 禁用
float：响应式下易塌陷，且与<figcaption></figcaption>的块级默认行为冲突，调试成本高 - 正确做法：每张
<img>单独包裹一个<figure></figure>，配专属<figcaption></figcaption>，例如“图2.1：登录页 Banner A”“图2.2：登录页 Banner B” - 统一编号需求？用外层
<section></section>或<h3></h3>标注“图2：登录页系列 Banner”，内部各<figure></figure>独立编号 - 轮播容器本身用
<div role="region" aria-label="首页轮播图"> 更准确，<code><figure></figure>不负责交互逻辑 - 切记：
<figure></figure>表达的是“可被整体引用的单元”，不是“视觉上挨着的图”
实际中最容易被忽略的点是 DOM 顺序和语义绑定：figcaption 放后面再用 CSS 倒序，视觉对了，读屏器却先听到图再听到标题——这种“伪合规”比不用还糟。
轮播图里的多张图能套一个figure吗？
不能。轮播图每一帧都是独立可操作、可引用的内容，硬塞进同一个 <figure></figure> 会让语义变成“这是一张由5张图合成的大图”，完全失真。
