figcaption 必须嵌套在 figure 内才具语义和渲染效果，是 figure 的专属子元素，用于简洁、自包含地说明其内容；应置于 figure 首或尾（推荐结尾），仅限一个，需重置 CSS 以确保布局稳定，且不可替代 img 的 alt 属性。
figcaption 必须嵌套在 figure 里才能生效
单独写 figcaption 标签浏览器会忽略它的语义，也不保证渲染位置。它不是独立容器，而是 figure 的专属子元素，用于说明其内部的流内容（最常见是图片，也可能是图表、代码块、引用等）。
常见错误：把 figcaption 放在 div 或直接放在 img 后面——这样只是普通文本，对可访问性、SEO、样式控制都没帮助。
-
figure是语义容器，表示一个独立的、可被引用的内容单元 -
figcaption必须是figure的第一个或最后一个子元素（HTML5 允许两者顺序，但推荐放最后，更符合阅读流） - 一个
figure最多只能有一个figcaption；如需多段说明，应在内部用p或div组织
figcaption 里的文字要简洁、自包含，避免“上图”“下图”这类指代
屏幕阅读器可能跳过上下文直接朗读 figcaption，所以内容必须能独立传达意义。比如“图3：用户登录流程时序图”比“上图展示了登录流程”有用得多。
编写时注意：
立即学习“前端免费学习笔记（深入）”；
- 不依赖相邻段落解释——把它当成一张海报的标题来写
- 长度建议控制在 120 字以内；超过则考虑拆成
figure+ 多段p，或另起正文说明 - 如果含数据来源或作者信息，用逗号分隔，例如：
2023年全球前端框架使用率（数据来源：State of JS 2023）
样式控制：默认居中，但需重置 margin 和 display 才能稳定布局
浏览器对 figcaption 的默认样式差异较大：Chrome 默认为 display: block 且带上下 margin，Firefox 有时会加粗，Safari 可能对垂直对齐处理不同。不显式重置容易出现换行错位或间距突兀。
推荐基础 CSS 重置：
figure figcaption {
display: block;
margin: 0.5em 0 0;
font-size: 0.9em;
color: #666;
}
- 不要依赖
text-align: center—— 它只影响内联内容，而figcaption是块级，应配合width和margin: auto控制居中 - 若需与图片同宽，给
figure设display: inline-block，再设figcaption为width: 100% - 避免用
float或绝对定位，会破坏语义流和响应式行为
替代方案：img 的 alt 属性 ≠ figcaption，别混用
alt 是图片的**功能替代文本**（无图时的兜底、SEO 关键字、无障碍核心），而 figcaption 是**说明性描述**（补充上下文、用途、来源等）。两者目的不同，不可互相替代，也不该重复相同内容。
正确组合示例：
@@##@@ 图2：2024年第二季度各获客渠道用户净增长（单位：万人）｜数据来源：内部BI系统
-
alt要具体到数值和比较关系，方便盲人用户理解关键信息 -
figcaption补充编号、图表类型、数据出处，不重复“柱状图”“Q2”等alt已覆盖的词 - 如果图片本身是装饰性（如分割线小图标），
alt=""，但仍可用figcaption做轻量说明（此时需评估是否真有必要）
figure 的语义边界——很多人把整段图文都包进去，结果破坏了文档大纲层级。figcaption 的价值不在“写了”，而在“写得准、包得对、样式稳”。
