figure 和 figcaption 用于标识独立可引用的内容单元，非美化用途；必须满足图/媒体可脱离上下文存在且说明文字属其自身，如图表、代码截图、带来源说明的历史插图等。
figure 和 figcaption 不是用来“美化排版”的，而是告诉浏览器和辅助技术：“这部分图和文字是一个独立的、可被引用的内容单元”。用错地方反而会破坏语义，比如把纯装饰图、轮播图、文章配图（无说明性标题）塞进去。
什么时候必须用 figure + figcaption
核心判断标准：这张图/媒体是否能脱离上下文独立存在？它的说明文字是否属于它自身的一部分，而非正文叙述？
- 图表（
<svg>或<canvas>生成的统计图）、流程图、示意图 - 代码截图 + 对应的说明性标题（如“
fetch()请求失败时的错误处理逻辑”） - 引用的第三方照片、历史文献插图，并附带来源/作者说明
- 产品对比图 + 标题“iOS 与 Android 端主界面布局差异”
注意：figcaption 必须是 figure 的**第一个或最后一个子元素**，否则语义失效；且一个 figure 只能有一个 figcaption。
figcaption 放上面还是下面？有影响吗
视觉位置不影响语义，但会影响屏幕阅读器播报顺序和 SEO 解析倾向。默认行为是：屏幕阅读器先读 figcaption，再读图/媒体内容。
立即学习“前端免费学习笔记（深入）”；
- 标题型说明（如“图3-2：用户登录流程图”）建议放顶部——符合文档阅读习惯，也利于结构化数据提取
- 解释型说明（如“拍摄于2023年东京展会现场，设备为 iPhone 14 Pro”）更适合放底部，避免打断正文流
- CSS 可自由调整位置（
flex-direction: column-reverse或order），但不要用position: absolute把figcaption移出figure流
常见误用和替代方案
这些场景不该用 figure：
- 文章内嵌的普通配图（仅起装饰或示意作用，无独立说明）→ 直接用
<img>+alt属性即可 - 轮播图/画廊组件 → 它们是交互容器，不是独立引用单元；用
<section>或<div role="region"更合适 - 带标题的广告图 → 属于商业内容，用
<aside>或带aria-label的<div> - 多图并列但共用一个标题 →
figure不支持“一组图+一个标题”，应改用<section>包裹多个figure，或用<dl>搭配<dt>/<dd>
<!-- ✅ 正确：单图+独立说明 --> <figure> <img src="chart.png" alt="2023年各季度营收增长曲线"> <figcaption>图4.1：Q1–Q4 营收同比增长率（单位：%）</figcaption> </figure> <p><!-- ❌ 错误：无说明的装饰图 --> <figure> <img src="divider-line.png" alt=""> <!-- 没有 figcaption，且图本身无信息价值 --> </figure>
响应式图片和 figure 怎么配合
<picture> 和 <source> 可以直接放在 figure 内，语义完全兼容。关键点是：alt 必须写在 <img> 上，不能省略；figcaption 仍描述整个内容单元，不重复 alt 已说明的信息。
- 避免在
figcaption里写“一张柱状图”，而应写“2023年华东区门店销量TOP5” - 如果图本身含文字（如截图里的 UI），
alt需描述文字内容，figcaption描述其用途或上下文 - 不要为了“适配移动端”把
figure拆成多个，响应式靠 CSS 和<picture>控制，不是靠语义标签数量
真正容易被忽略的是：当 figure 被 CSS 设为 display: inline 或浮动后，若内部 figcaption 用了 width: 100%，可能意外撑宽父容器——语义正确不等于样式安全，得手动约束宽度或用 max-width: max-content。
