figure用于标记可独立抽离、不影响主文档逻辑的内容块，如图表、代码示例、引文等；figcaption必须为首个或末个直接子元素，用以提供语义化标题，不可替代img的alt属性。
figure 不是“给图片加标题的 div”，它只在内容真正独立、可抽离时才该用；乱套用反而破坏语义，还可能被屏幕阅读器误读。
什么时候必须用 figure 而不是 div
判断标准只有一个：这段内容（图/代码/引用等）拿掉后，主文档逻辑是否依然完整？如果它只是装饰、配图说明正文某一句，就别用 figure。
- ✅ 适用：文章中插入一段独立的
<pre><code>示例，附带说明文字；学术论文里的实验折线图 + 图注；带出处的历史照片 - ❌ 不适用：产品页里“主图+‘点击查看大图’文字”；轮播图的每一张图；头像旁的昵称标签
- ⚠️ 注意：
figure内容被 CSS 移到侧边栏或附录时，figcaption必须仍能准确描述它——所以标题里不能写“上图”“左侧示意图”这类上下文依赖词
figcaption 的位置和嵌套规则
figcaption 必须是 figure 的**直接子元素**，且只能出现在第一个或最后一个位置。中间放其他内容（比如多个 img）没问题，但标题不能夹在中间。
- 正确：
<figure><figcaption>...</figcaption><img></figure>或<figure><img><figcaption>...</figcaption></figure> - 错误：
<figure><img><p>说明</p></figure>（p不是figcaption） - 错误：
<figure><img><figcaption></figcaption><img></figure>（figcaption不在首尾）
和 img 的 alt 属性是什么关系
alt 是图像的**替代文本**（无图时显示、供屏幕阅读器朗读），figcaption 是它的**标题或上下文说明**（解释这张图在当前文档中扮演什么角色）。两者不互斥，要共存。
立即学习“前端免费学习笔记（深入）”；
- 例如：
<img src="chart.png" alt="2025年用户增长曲线图">+<figcaption>图1：A/B测试组与对照组的月活增长率对比（数据来源：内部后台）</figcaption> - 如果
alt已经足够详细（比如长描述），figcaption可以更简略，聚焦在编号、来源、类型等元信息上 - 千万别用
figcaption替代alt——没有alt的图对视障用户就是“一张没名字的空白”
兼容性和样式控制要点
IE9+、所有现代浏览器都支持 figure 和 figcaption，但默认样式极简（figcaption 就是普通块级文本），必须靠 CSS 控制外观和布局。
- 常见坑：直接写
figcaption { text-align: center; }会把整段文字居中，但若内容过长换行，效果难看；建议用display: flex或max-width约束宽度 - 不要依赖
figure自动实现“图文环绕”——它本身不带浮动逻辑，得用float或display: grid配合 - SEO 和可访问性收益不会自动发生：只有当
figcaption文字真正描述内容本质（而非“一张图”），且结构严格符合规范时，辅助技术和搜索引擎才能可靠识别
最常被忽略的是自包含性判断——很多人看到“有图有文”就条件反射套 figure，结果让语义变得模糊。宁可多花十秒想清楚“它离开这儿还能自己说清一件事吗”，再决定要不要用。
