必须用 figure 的唯一标准是删掉该块后主文档逻辑仍完整；它专用于可独立引用的实体，如编号架构图、JSON 截图、显微照片组，而非段落配图或 banner 图。

figure 不是给图片加个标题框的快捷方式，它只在内容真正独立、可抽离时才该用；乱套会导致读屏器误读、SEO 丢失图文关联、CSS 布局意外偏移。

什么时候必须用 figure 而不是

或直接

核心判断标准只有一个：删掉这个块，主文档逻辑是否依然完整？

• ✅ 适用：
  包裹一张带编号的架构图（“图3.2: 用户认证流程”）、一段 JSON 响应截图（配说明“成功响应的 HTTP 200 结构”）、论文附录里的三张显微照片组（统一标注“图A1–A3”）
• ❌ 不适用：段落中解释某句话的配图（如“点击按钮即可提交”，配一张界面截图）、首页 banner 轮播图的单张图、用户头像旁的昵称标签
• ⚠️ 注意：
  表达的是“一个可被单独引用的实体”，不是“一组视觉上挨着的图”。轮播组件本身要用
  包，内部每张图仍各自配自己的

  figcaption 必须是 figure 的直接子元素且只能有一个

  W3C 规范强制要求：

  必须紧邻

  开头或结尾，不能嵌套在

  里，也不能出现两次。

  • 正确写法只有两种：

    ...

    （标题前置），或

    ...

    （说明后置）
  • 错误示例：

    ...

    —— 浏览器会忽略该
    ，读屏器可能跳过或误读
  • 错误示例：

    图1

    补充说明

    图2

    —— 第二个
    被完全忽略

  alt 和 figcaption 分工明确，不能互相替代

  alt 是图像缺失时的替代文本，供屏幕阅读器朗读、搜索引擎理解图像“是什么”；figcaption 是语义化标题或上下文说明，告诉用户这张图“为什么重要”或“在文档中扮演什么角色”。

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载

  • 混用相同内容（比如都写“后台管理界面截图”）会让无障碍体验变差，也浪费 SEO 价值
  • 推荐搭配： +
    图1: v2.3.0 版本后台核心功能布局（2025年Q2上线）
  • 如果图只是装饰性（如分隔线小图标），alt="" 即可，别硬塞

  多图共用一个 figure 和 figcaption 的边界在哪

  可以，但必须满足两个硬条件：这些图共同构成一个不可拆分的信息单元，且

  文字能准确概括全部内容。

  • 正例：

    

    图4: 用户登录全流程界面截图（v2.3.0）

    —— 三步操作缺一不可，标题覆盖整体
  • 反例：把首页 5 张商品 banner 全塞进一个
    ，配一句“推荐商品”——每张图语义独立，应各自用

  • ⚠️ 注意：统一标题（如“图1–4: 系统架构演进”）应放在外层
    或
    里，而不是让一个
    覆盖多个

  最容易被忽略的点是 DOM 顺序与语义优先级的冲突：哪怕设计稿要求标题在上、说明在下，只要语义上说明更重要（比如学术排版习惯先读注释再看图），就该把

  放在

  开头，用 flex-direction: column-reverse 控制视觉流——HTML 结构合规比视觉对齐更关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！