figure标签用于语义化独立可抽离的内容单元，需满足逻辑完整、可单独引用、承载上下文信息三条件；禁用场景包括示意小图、轮播单帧等；figcaption与alt各司其职，结构须合规。
判断是否该用 figure
- 删掉它，正文逻辑依然完整、能顺畅读下去
- 它能单独放进附录、侧栏或图库页，并被准确引用（比如“见图3.2”）
- 内容本身承载明确上下文信息：编号、结论、来源、参数等（如“图4：2024年Q3留存率对比”“清单1：JWT响应结构”）
以下情况不该用 figure：
- 正文旁示意小图（如“此处为流程图”）→ 直接用
<img alt="流程图：用户注册三步骤"> - 轮播图单帧、产品主图、头像、装饰 Banner、列表图标
figcaption 的位置与结构必须合规
- 必须是
<figure>的第一个或最后一个直接子元素，不能嵌套在<div>、<p>或其他标签里 - 一个
<figure>只能有一个<figcaption>，多段说明请拆成多个<figure> - 视觉上标题在上、说明在下？可用 CSS 控制显示顺序（如
flex-direction: column-reverse），但 HTML 结构必须保持语义正确
✅ 正确示例（标题前置）：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<figure> <figcaption>图2-1：后台权限管理流程图</figcaption> <img src="auth-flow.png" alt="流程图：管理员、编辑、访客三级权限操作路径"> </figure>
✅ 正确示例（说明后置）：
<figure> <img src="ui-dashboard.jpg" alt="数据看板界面，含折线图与指标卡片"> <figcaption>该看板支持实时刷新，延迟低于800ms（实测环境：Chrome 128 + 16GB内存）</figcaption> </figure>
alt 与 figcaption 各司其职，不可互换或重复
alt回答：“图里有什么？” → 描述图像本身内容，供无图环境或读屏器快速感知，建议 ≤125 字符
例：alt="柱状图：iOS 与 Android 次日留存率对比，横轴为渠道，纵轴为百分比"<figcaption>回答：“这张图为什么在这？” → 说明其文档角色：编号、结论、背景、数据来源、版本依据等
例：<figcaption>图5：Android 留存率持续领先 iOS，差距稳定在 7.2%～9.8%（数据截止 2024-03-31）</figcaption>
⚠️ 避免：
- figcaption 写“如图所示”“上图”“截图”——CSS 可能把图挪走，文字必须自包含
- alt 写主观判断（如“效果显著”“设计很美观”）——那是 figcaption 的职责
- 把 figcaption 文字复制进 alt，或反过来——语义价值归零
多图、样式与细节提醒
- 多张图 ≠ 一个 figure。每张图（或每组强关联图，如分步操作截图）都应各自包裹在独立的
<figure>中 - 若需统一标注（如“图1–图4：系统架构演进”），用
<section>或<h2>包裹整个图组，而非让一个 figcaption 覆盖多个 figure -
<figure>默认有上下外边距（margin-top: 1em; margin-bottom: 1em;），这是为“独立单元”预留的语义呼吸空间，慎用margin: 0直接清除 - figcaption 默认居中、字号略小，如需对齐控制，请用
justify-content或align-items，避免依赖text-align做布局
不复杂但容易忽略
