figure与figcaption必须用于“独立可引用+说明属自身”的内容，如图表、代码块、引文等；figcaption须为figure首个或最后一个直接子元素，仅一个且不可为空，与img的alt属性分工明确、不可互替。
figure 和 figcaption 不是“给图片加个标题”的快捷写法，用错地方反而会让语义混乱、影响可访问性和 SEO。
什么时候必须用 figure + figcaption
只有当内容满足「独立可引用」+「说明文字属于它自身」两个条件时才该用：
- 图表、代码块、引文、信息图这类脱离上下文仍能自解释的内容
- 说明文字是标题、编号（如“图3”）、来源（如“数据来自2024年公开调研”）或简要注释，不是泛泛的“如图所示”
- 这张图如果被移到附录、侧边栏或单独打印，
figcaption依然能准确描述它——所以不能写“上图”“左侧示意图” - 纯装饰图、轮播图单帧、头像旁昵称、产品页主图配操作按钮，都不适用
figcaption 必须是 figure 的第一个或最后一个子元素
浏览器和读屏器依赖这个结构识别归属关系，中间插别的元素会破坏语义：
- 正确：先
figcaption后img，或先img后figcaption - 错误：
figure>div>figcaption，或figure>figcaption>img>figcaption - 一个
figure只能有一个figcaption；多段说明请拆成多个figure -
figcaption不能省略结束标签，且必须有内容（空格或 不算有效内容）
alt 和 figcaption 是互补，不是重复
两者职责完全不同，缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
img的alt描述图像“是什么”，面向无障碍场景，比如alt="折线图：用户登录量在1月到3月呈上升趋势" -
figcaption解释图像“为什么在这里”，面向文档上下文，比如<figcaption>图2：Q1用户活跃度变化趋势（数据来源：内部埋点）</figcaption> - 不写
alt会直接损害可访问性；把alt写成和figcaption一样，等于放弃其中一项语义价值
样式与兼容性要注意的硬限制
默认行为简单，但改起来容易踩坑：
- 所有现代浏览器（IE9+、Chrome、Firefox、Safari、Opera）都支持，IE8 及更早版本完全不识别，需降级处理（如用
div包裹并加 ARIA） -
figure默认只有上下 margin，没有 padding 或 border；重置时别漏掉margin: 0 -
figcaption默认是块级、居中、字体略小，但对齐方式（text-align）只影响内联内容，Flex/Grid 布局下需用justify-content或align-items - 响应式切换布局（比如小屏切为上下结构）时，别用
float或position: absolute把figcaption挤出流，否则读屏器可能跳过它
真正难的不是怎么写，而是每次插入图之前先问一句：它算不算一个能被单独引用、带明确上下文说明的独立单元？这个问题答错，后面所有样式和逻辑都会跑偏。
