figure 标签表示独立可引用的内容单元，如图、图表、代码块等；figcaption 是其唯一且语义明确的说明，须自包含、不依赖上下文，与 img 的 alt 属性分工协作——alt 为图像缺失时的简短替代，figcaption 提供完整上下文。
figure 标签不是“给图片加标题的快捷方式”，它表达的是一个独立、可移动的内容单元——图、图表、代码块、引用，甚至一段视频，只要它在文档中能被单独引用、编号或跨页浮动，就适合用 figure。
什么时候必须用 figure 而不是 div + img
语义上需要明确“这个内容块可脱离上下文存在”时，比如论文里的插图、技术文档中的架构图、API 文档里的响应示例截图。搜索引擎和读屏软件会把 figure 当作一个整体识别，figcaption 则是它的官方说明，不是装饰性文字。
常见错误现象：
– 把 banner 图、头像、纯装饰图也套 figure（语义过载）
– 用 div 包 img 和 p 模拟图注，结果无法被辅助技术正确关联
-
figure内容必须是自包含的：即使从正文中抽出来，读者也能理解它在讲什么 - 如果图只是段落内一个普通配图（比如解释某句话），直接用
img加alt更合适 -
figcaption必须是figure的第一个或最后一个子元素，且只能有一个
figcaption 放上面还是下面？浏览器有默认行为吗？
HTML 规范没强制位置，但所有主流浏览器默认把 figcaption 渲染在 figure 底部（无论写在开头还是结尾）。不过——写在开头更符合可访问性逻辑：屏幕阅读器通常按 DOM 顺序读，先听到说明再看到图，理解成本更低。
立即学习“前端免费学习笔记（深入）”；
使用场景：
– 学术出版、长文档：推荐 figcaption 在前，方便编号（如“图 3.1：系统流程图”）
– 简单博客配图：位置影响不大，但保持项目内统一
- 不要依赖 CSS
order或flex-direction反转 DOM 顺序，会破坏语义流 - 用
text-align: center居中图注即可，别用margin: auto或绝对定位强行“居中对齐” - 避免在
figcaption里塞链接或按钮——它本质是说明文字，不是交互容器
和 img 的 alt 属性冲突吗？怎么分工？
不冲突，而且必须共存。alt 是给 img 自身的简短替代文本（图像缺失时显示，或供屏幕阅读器快速播报），figcaption 是对整个 figure 单元的说明（可能含背景、数据来源、结论等）。
参数差异：
– alt="" 表示该图纯装饰（此时不该用 figure）
– alt 长度建议 ≤125 字符；figcaption 可以多行，甚至含简单列表
- 图表类
figure：用alt描述图形类型（如“柱状图：2023 年各季度营收”），figcaption补充数据范围、单位、异常点 - 代码截图：用
alt写“Python 异常堆栈截图”，figcaption注明 Python 版本、触发条件 - 千万别删掉
alt，只留figcaption——图像加载失败时，用户将看不到任何替代信息
真正容易被忽略的点是：图注内容是否经得起“脱离图像单独存在”的检验。比如写“如上图所示”，在打印版或 RSS 订阅里，“上图”根本不存在。语义化不是加个标签就完事，而是每句图注都要能自己讲清楚故事。
