figure 是独立内容单元，figcaption 必为首个或最后一个子元素且唯一；多图须分属不同 figure；alt 描述图像本身，figcaption 补充语义背景。
figure 和 figcaption 的语义关系必须严格匹配
HTML5 中 figure 不是“随便包个图+文字”的容器，它代表一个**独立的、可被文档流外引用的内容单元**（比如图表、照片、代码块、引文等）。figcaption 必须是 figure 的**第一个或最后一个子元素**，且最多只能有一个。浏览器和读屏器依赖这个结构识别图文归属关系。
- 错误写法：
figure里塞两个figcaption，或把说明文字放在div里再套进figure - 正确顺序：要么
figcaption在前（标题式说明），要么在后（常见说明式） - 如果图和说明之间有其他内容（如按钮、操作栏），不能硬塞进
figure—— 应该用div包裹整个模块，figure只管图+说明这对核心语义单元
figcaption 放前面还是后面？看内容性质
位置影响语义权重和渲染逻辑。CSS 默认不会自动换行或加粗，但位置决定了它在无障碍 API 中的播报顺序和视觉层级。
- 放前面：适合“标题型说明”，比如「图3-1：用户登录流程图」，强调这是对后续内容的命名
- 放后面：适合“解释型说明”，比如「该界面支持指纹与密码双验证」，补充图中未明示的信息
- 不要为了样式强行颠倒顺序——若设计要求标题在上、说明在下，但语义上说明更重要，应保持
figcaption在后，并用 CSS 控制显示位置（例如flex-direction: column-reverse）
多图共用一个 figcaption？不行，得拆开
figure 表达的是“一个”独立内容单元，不是“一组”。常见误区是把图库或轮播图用一个 figure 包住，再配一个 figcaption，这会破坏语义完整性。
- 每张图（或每组强关联图，如分步截图）都应单独包裹在自己的
figure中 - 轮播组件本身不是语义化图元，应由外层
div或section承载，内部每个img对应一个figure+figcaption - 若需统一说明（如“图1–图4：系统架构演进”），应在
figure外用section或h2标注，而不是让一个figcaption覆盖多个figure
<figure> <img src="login-flow.png" alt="用户登录流程：输入账号→验证→跳转首页"> <figcaption>图3-1：Web端登录核心流程</figcaption> </figure> <figure> <figcaption>该界面支持指纹与密码双验证</figcaption> <img src="auth-ui.png" alt="双因素认证界面，含指纹图标与密码输入框"> </figure>
alt 和 figcaption 别重复，分工要清楚
alt 是图像的**替代文本**（用于加载失败、纯文本环境、屏幕阅读器初始播报），figcaption 是图像的**上下文说明**（补充背景、用途、结论等）。两者信息维度不同，重复写会降低可访问性。
立即学习“前端免费学习笔记（深入）”；
-
alt应描述图“是什么”（如“柱状图：2023年各季度营收对比”） -
figcaption应说明图“为什么重要”或“想表达什么”（如“Q4营收跃升42%，主要来自新市场拓展”） - 如果图本身无实质信息（如装饰性分隔图），
alt=""，且不应放进figure——figure必须承载有意义的内容
figure 当成 div 用，或者把 figcaption 当成普通 caption 标签随意嵌套。语义一旦错位，自动化工具、SEO 提取、无障碍浏览都会出偏差。 
