figure标签的核心是语义“可抽离性”，非图文并排样式开关；figcaption必须为直接子元素且位于首位；alt与figcaption职责分明、缺一不可。
Figure 标签不是“图文并排”的样式开关，而是告诉浏览器“这部分内容可被抽离、引用、独立理解”——用错位置，语义就断了，读屏器和搜索引擎可能直接忽略说明文字。
figure 该不该用？先看内容是否满足「可抽离性」
判断标准不是“有没有图”，而是这张图（或代码块、图表、SVG）拿掉后，正文是否依然逻辑自洽、无需补漏：
- ✅ 学术论文里的
系统架构图，配图3.2:微服务模块间调用关系—— 可放进附录，编号可被交叉引用 - ✅ API 文档中一段
<pre><code>{ "data": [] }</code></pre>，加清单 1:空数据响应结构—— 独立存在且有上下文 - ❌ 文章段落中一句“点击按钮后界面变化如图所示”，配一张局部截图 —— 图是辅助句意的，删掉句子就残缺，不该用
figure - ❌ 轮播图的某帧、产品主图、头像旁昵称、banner 图 —— 它们属于交互容器或装饰元素，用
<div role="region">或纯<img>更准确
figcaption 必须是第一个子元素，别信 CSS 视觉欺骗
DOM 顺序决定读屏器播报流：先读 figcaption，再读图/代码/媒体。如果把它写在 <img> 后面，用户会先听到“一张折线图”，再听到“图4:Q1 用户留存率对比”——认知断层立刻出现。
- ✅ 正确结构：
<figure><figcaption>图4:Q1 用户留存率对比</figcaption><img src="chart.png" alt="折线图：次日留存率从28%升至35%"></figure> - ❌ 错误结构：把
figcaption放后面，再用flex-direction: column-reverse拉回顶部 —— 视觉对了，语义废了 - ⚠️ 注意：
figcaption必须是figure的**直接子元素**，不能包在<div>或<p>里；也不能出现两个，否则第二个会被忽略
复杂布局中 figure 的 CSS 控制要点
figure 默认只有上下 margin，无 padding/border，也不设 display；figcaption 默认块级、居中、字体略小。想实现左图右文、网格、响应式堆叠，得靠现代布局控制，但必须守住语义底线：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 左图右文：给
figure设display: flex; align-items: flex-start;，控制<img>宽高 +figcaption最小宽度，避免文字被压缩 - 响应式切换：小屏下用
@media (max-width: 768px) { figure { flex-direction: column; } }回到上图下文 - 禁止操作：不用
position: absolute把figcaption移出文档流 —— 辅助技术可能完全跳过它 - 多图共用标题？
figure不支持。改用<section>包一组figure，或用<dl>+<dt>/<dd>组织
alt 和 figcaption 必须共存，但职责绝不重叠
alt 是图像缺失时的替代文本，供读屏器快速播报“这是什么”；figcaption 是整个 figure 单元的上下文说明，含编号、来源、结论等——二者缺一不可，也不能互换。
-
alt要简短（≤125 字符），描述图像本体：如alt="柱状图：iOS 与 Android 端平均加载耗时对比" -
figcaption可多行，补充“为什么放这里”：如<figcaption>图5:iOS 与 Android 端平均加载耗时对比（测试环境：WiFi，冷启动，v2.4.1）</figcaption> -
alt=""表示纯装饰图 → 此时就不该用figure，直接用<img>即可 - 若图是代码截图，
alt写“Python 异常堆栈截图”，figcaption注明 Python 版本、触发条件、修复建议
真正容易被忽略的点在于：设计稿里“标题在上”不等于 DOM 顺序可以乱；CSS 能骗过眼睛，但骗不过读屏器和爬虫。语义封装不是为了好看，是为了让内容在任何上下文（附录、侧栏、语音播报、结构化数据提取）里依然能被准确定位和理解。
