figure 和 figcaption 不是图片说明的快捷写法，figcaption 必须作为 figure 的首个或末个直接子元素，否则读屏器和搜索引擎无法识别图文关联；alt 描述图像内容，figcaption 解释上下文，二者不可替代。
figure 和 figcaption 不是“给图片加个说明”的快捷写法，用错位置或结构，读屏器会跳过说明，搜索引擎也收不到图文关联信号。
figcaption 必须是 figure 的第一个或最后一个直接子元素
浏览器和屏幕阅读器靠 DOM 位置判断图与说明的归属关系，不是靠 CSS 渲染顺序。中间插一个 <p></p>、<div> 或按钮，语义就断了。
<ul>
<li>✅ 正确：<code><figure><figcaption>图2:用户登录流程</figcaption><img src="login.png" alt="..."></figure>
<figure><img src="login.png" alt="..."><figcaption>图2:用户登录流程</figcaption></figure>
<figure><img><div class="meta"><figcaption></figcaption></div></figure>（figcaption 不是直接子元素）<figure><img><p>说明文字</p></figure>（p 不是 figcaption，无法被识别为图注）alt 和 figcaption 分工不同，不能互相替代
alt 是图像缺失时的替代文本，面向无图环境与无障碍；figcaption 是上下文说明，面向文档逻辑与 SEO。二者信息维度不同，重复写等于放弃一半语义价值。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
alt描述“是什么”：alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示表格与搜索框" -
figcaption解释“为什么放这里”：<figcaption>图1:后台管理界面布局</figcaption> - 如果
alt=""（纯装饰图），就不该加figcaption——否则语义矛盾 - 错例：
<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption>（alt没讲清内容，figcaption又没提供额外上下文）
哪些图真该用 figure + figcaption？
figure 不是通用容器，它只适用于「可抽离 + 可独立引用」的内容：删掉它，正文依然通顺；挪到附录里，标题仍准确。
- ✅ 适用：
<figure><img><figcaption>图3:Q1 用户增长加速与新渠道投放时间高度重合</figcaption></figure>（图表有编号、来源、结论） - ✅ 适用：代码截图、SVG 架构图、论文插图、带出处的历史照片
- ❌ 不适用：轮播图单帧（每帧应各自套一个
figure）、banner 图、按钮图标、正文内配图解释某句话（如“点击右上角保存按钮”，直接用<img alt="">即可） - ⚠️ 轮播图不能共用一个
figcaption，必须拆成多个figure，外层用<section></section>或<h2></h2>统一编号
默认样式坑和基础修复
figure 几乎没有默认边距或边框，figcaption 默认块级居中、字体略小，但图片下方常有空白间隙——那是 img 默认内联对齐基线导致的。
- 给
<img>加display: block，立刻消除底部空白 - 横向布局（如左图右文）别用
float，改用display: flex控制，保持 DOM 合规 - 视觉上想标题在上、图在下？用 CSS
flex-direction: column-reverse，但 HTML 中仍保持figcaption在前或后，不破坏语义流 -
figcaption不能为空（只含空格也会被忽略），多段说明请拆成多个figure
最容易被忽略的是 DOM 顺序和语义分工：figcaption 写在哪儿，决定了读屏器先读什么；alt 写成什么样，决定了盲人能不能理解图里有什么。这两件事没做对，其他所有样式和交互都白搭。
