figure 是语义化独立单元，必须包裹单图及对应figcaption；figcaption仅能出现一次且紧邻figure开头或结尾；alt描述图像内容，figcaption解释其意义；删掉figure不应破坏正文逻辑。
figure 不是“给图加个说明框”的快捷容器，它是语义化单元——删掉它，文档主干逻辑不能断。错用会导致读屏器误读、SEO 丢失图文关联、CSS 布局意外偏移。
figcaption 必须紧邻 figure 开头或结尾，且只能有一个
浏览器和辅助技术靠这个位置判断“哪段文字属于哪张图”。中间插个 <button></button> 或 <p></p>，语义就断了。
- 正确写法只有两种：
<figure><figcaption>...</figcaption><img></figure>（标题前置）或<figure><img><figcaption>...</figcaption></figure>（说明后置） - 如果设计稿要求标题在上、说明在下，但语义上说明更重要，别硬调顺序——用 CSS 的
flex-direction: column-reverse控制视觉流，保持 HTML 结构合规 - 写两个
<figcaption></figcaption>？浏览器会忽略第二个，读屏器只播报第一个
一张图一个 figure，轮播/图集不能共用一个
轮播组件本身不是独立内容单元，<figure></figure> 表达的是“一个”可被单独引用的实体（比如“图3：用户登录流程图”），不是“一组”。
- 每个
<img>都要包裹自己的<figure></figure>+<figcaption></figcaption> - 统一标题（如“图1–4：系统架构演进”）应放在外层
<section></section>或<h2></h2>里，而不是让一个<figcaption></figcaption>覆盖多个<figure></figure> - 用
<div class="carousel"> 包整个轮播，内部结构仍是 <code><figure><img><figcaption></figcaption></figure>的重复alt 和 figcaption 分工明确，别重复写相同信息
alt描述图像“是什么”，figcaption解释它“为什么重要”或“想表达什么”。混用会让无障碍体验变差，也浪费 SEO 价值。-
<img src="q4-revenue.png" alt="柱状图：Q4 各区域营收对比">—— 这是alt的职责 -
<figcaption>Q4 营收跃升 42%，主要来自新市场拓展</figcaption>—— 这才是figcaption该干的事 - 如果
figcaption只写“Q4 营收图”，等于没说；如果alt写成“公司业绩很好”，等于没描述图像本身
figure 默认有上下外边距，重置时注意语义边界
浏览器对
<figure></figure>的默认样式是margin-top: 1em; margin-bottom: 1em;，这其实是为“独立单元”留出呼吸空间。盲目设margin: 0可能压缩语义间距，影响可读性节奏。- 若需紧凑排版（如图库网格），优先用
display: grid或flex控制子项间距，而非直接清空<figure></figure>的 margin - 需要统一缩进？改父容器的
padding，比改每个<figure></figure>的margin-left更安全 - IE8 及更早版本不支持
<figure></figure>，如需兼容，得用<div role="figure"> 并补 aria-label，但语义完整性已打折 <p>最容易被忽略的一点：figure 的“独立性”不是视觉上的居中或加边框，而是逻辑上的可抽离。检查时问一句——把整个 <code><figure></figure>块删掉，正文还能通顺阅读吗？不能，那它大概率不该用<figure></figure>。
-
