figcaption必须嵌在figure中才有效，单独使用语义丢失、读屏器不识别、SEO不认；它只能是figure的首或尾直接子元素，alt描述图像内容，figcaption说明上下文，二者不可互换或省略。
figcaption 必须嵌在 figure 里才有效
单独写 figcaption 标签，浏览器会当普通文本渲染，语义丢失，读屏器不识别，SEO 也不认。它不是独立标签，而是 figure 的专属子元素，作用是说明“这个 figure 里的内容”。
常见错误包括：figcaption 放在 div 里、紧跟在 img 后面但没包 figure、或者用 section / article 替代 figure。这些写法都等于没写。
-
✅ 正确：<figure><img src="x.jpg" alt="服务器响应时序"><figcaption>图1：API 请求与响应时间分布</figcaption></figure> -
❌ 错误：<div><img src="x.jpg" alt="..."><figcaption>图1...</figcaption></div> -
❌ 错误：<img src="x.jpg" alt="..."><figcaption>图1...</figcaption>（无容器）
figcaption 只能是 figure 的首或尾子元素
DOM 顺序决定语义归属。浏览器和读屏器靠节点位置判断“这段说明属于哪张图”，不是靠 CSS 渲染位置。中间插一个 div、p 或空格文本节点，就断了关联。
比如加个来源行：<figure><img><p class="source">数据来源：内部监控系统</p><figcaption>图2：延迟 P95 分布</figcaption></figure> —— 这样 figcaption 就失效了。
立即学习“前端免费学习笔记（深入）”；
- 推荐放结尾，符合阅读流；放开头也合法，但需确保它是第一个子节点（不能有空白字符）
- 别用
flex-direction: column-reverse或order强行视觉翻转——DOM 没变，读屏器仍先读图再读说明，逻辑错乱 - 如果真要多段说明，用
<p>包在figcaption里，而不是另起一个figcaption
alt 和 figcaption 信息维度不同，不能互换或省略
alt 是图像的功能替代：图挂了、盲人用户、搜索引擎爬虫靠它理解“图里有什么”；figcaption 是上下文说明：告诉所有人“为什么放这张图、它在这儿意味着什么”。
两者缺一不可，照抄或删掉任一个，都会破坏可访问性。例如，一张折线图的 alt 写“折线图”，等于没写；而把 figcaption 写成“上图显示增长”，对跳过前文的读屏器用户毫无意义。
-
alt示例：alt="2024Q1 各渠道用户留存率对比：微信渠道7日留存达42%，高于APP端的31%" -
figcaption示例：<figcaption>图3：微信渠道留存优势与新上线的裂变活动启动时间高度重合</figcaption> - 纯装饰图（如分隔线、背景点缀）应设
alt=""，此时不该加figcaption，否则语义矛盾
默认样式不稳定，必须显式重置
Chrome、Firefox、Safari 对 figcaption 的默认 display、margin、font-weight 处理不一致。不重置容易出现换行错位、间距突兀、居中失效等问题。
基础重置建议直接写在 CSS 里：
figure figcaption {
display: block;
margin: 0.5em 0 0;
font-size: 0.9em;
color: #666;
text-align: center;
}
- 别依赖
text-align: center让块级元素居中——它只影响内联内容；要居中整个figcaption，得配合width和margin: auto - 若需与图片同宽，给
figure设display: inline-block，再设figcaption为width: 100% - 避免用
float或position: absolute，会脱离文档流，破坏响应式和语义顺序
alt/figcaption 的分工。很多人调好样式就以为完成了，结果读屏器读不出说明，或 SEO 抓不到图文关系——问题不在 CSS，而在 HTML 结构本身是否严格符合规范。 
