figure标签用于语义化独立可抽离的内容单元，需满足逻辑完整、可单独引用、承载上下文信息三条件；禁用场景包括示意小图、轮播单帧等；figcaption与alt各司其职，结构须合规。

标签不是“给图加标题”的排版捷径，而是为**独立可抽离的内容单元**提供语义结构的原生方案。用对了，图文才真正“属于彼此”；用错了，反而割裂关系、干扰读屏器、削弱 SEO。

判断是否该用 figure

• 删掉它，正文逻辑依然完整、能顺畅读下去
• 它能单独放进附录、侧栏或图库页，并被准确引用（比如“见图3.2”）
• 内容本身承载明确上下文信息：编号、结论、来源、参数等（如“图4：2024年Q3留存率对比”“清单1：JWT响应结构”）

以下情况不该用 figure：

• 正文旁示意小图（如“此处为流程图”）→ 直接用 <img alt="流程图：用户注册三步骤">
• 轮播图单帧、产品主图、头像、装饰 Banner、列表图标

figcaption 的位置与结构必须合规

• 必须是 <figure></figure> 的第一个或最后一个直接子元素，不能嵌套在 <div>、<code><p></p> 或其他标签里
• 一个 <figure></figure> 只能有一个 <figcaption></figcaption>，多段说明请拆成多个 <figure></figure>
• 视觉上标题在上、说明在下？可用 CSS 控制显示顺序（如 flex-direction: column-reverse），但 HTML 结构必须保持语义正确

✅ 正确示例（标题前置）：


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载

<figure><figcaption>图2-1：后台权限管理流程图</figcaption>
  @@##@@
</figure>

✅ 正确示例（说明后置）：

<figure>
  @@##@@
  <figcaption>该看板支持实时刷新，延迟低于800ms（实测环境：Chrome 128 + 16GB内存）</figcaption></figure>

alt 与 figcaption 各司其职，不可互换或重复

• alt 回答：“图里有什么？” → 描述图像本身内容，供无图环境或读屏器快速感知，建议 ≤125 字符
  例：alt="柱状图：iOS 与 Android 次日留存率对比，横轴为渠道，纵轴为百分比"

• <figcaption></figcaption> 回答：“这张图为什么在这？” → 说明其文档角色：编号、结论、背景、数据来源、版本依据等
  例：<figcaption>图5：Android 留存率持续领先 iOS，差距稳定在 7.2%～9.8%（数据截止 2024-03-31）</figcaption>

⚠️ 避免：

• figcaption 写“如图所示”“上图”“截图”——CSS 可能把图挪走，文字必须自包含
• alt 写主观判断（如“效果显著”“设计很美观”）——那是 figcaption 的职责
• 把 figcaption 文字复制进 alt，或反过来——语义价值归零

多图、样式与细节提醒

• 多张图 ≠ 一个 figure。每张图（或每组强关联图，如分步操作截图）都应各自包裹在独立的 <figure></figure> 中
• 若需统一标注（如“图1–图4：系统架构演进”），用 <section></section> 或 <h2></h2> 包裹整个图组，而非让一个 figcaption 覆盖多个 figure
• <figure></figure> 默认有上下外边距（margin-top: 1em; margin-bottom: 1em;），这是为“独立单元”预留的语义呼吸空间，慎用 margin: 0 直接清除
• figcaption 默认居中、字号略小，如需对齐控制，请用 justify-content 或 align-items，避免依赖 text-align 做布局

不复杂但容易忽略