figure和figcaption必须成对使用，figcaption仅在figure内有效；figcaption须为figure首个或最后一个子元素且最多一个；alt与figcaption功能互补不可替代。

figure和figcaption必须成对出现，不能单独用figcaption

单独写 <figcaption> 标签浏览器会忽略它，甚至可能被解析到 DOM 外部。只有包裹在 <figure> 内部时，<figcaption> 才具有语义意义和默认样式。

• <figure> 是一个独立的流内容容器，代表一段自包含的内容（图、图表、代码块、照片等）
• <figcaption> 必须是 <figure> 的第一个或最后一个子元素，且最多只能有一个
• 如果图注需要放在图片上方，就把 <figcaption> 放在 <img> 前面；放下方就放后面

figcaption位置影响渲染顺序，但不影响语义权重

视觉上 <figcaption> 在 <img> 前或后，只改变显示顺序，屏幕阅读器仍会把整个 <figure> 当作一个语义单元处理，按 DOM 顺序读出内容。

• 上方图注示例：

  <figure>
    <figcaption>图1：北极熊在浮冰上行走</figcaption>
    <img src="bear.jpg" alt="一只北极熊站在白色浮冰上">
  </figure>

• 下方图注更常见，也更符合多数设计习惯，但不是强制要求
• 不要为了“居中图注”把 <figcaption> 拆开或用多个标签模拟——语义会被破坏

alt属性和figcaption分工明确，不能互相替代

alt 是图片的文本替代，用于加载失败、纯文本环境或辅助技术；<figcaption> 是对整张图的说明性文字，面向所有用户可见。两者功能不同，缺一不可。

html-to-pptx-converter

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

下载

• alt 要简短、准确，描述图像本身（如 alt="穿红裙的女孩在公园长椅上读书"）
• <figcaption> 可稍长，补充上下文（如 “2023年春，北京朝阳公园，市民阅读常态化场景”）
• 如果 alt=""（空值），说明图纯粹是装饰，此时不应再加 <figcaption> ——否则语义矛盾
• 搜索引擎和无障碍工具依赖这两者协同工作，漏掉任一都降低可访问性

figure不自动带边框或间距，样式要自己控制

浏览器对 <figure> 没有统一默认边框、背景或外边距，看起来和普通 <div> 几乎一样。容易误以为“没生效”，其实是样式没加。

立即学习“前端免费学习笔记（深入）”；

• 常见遗漏：figure img { display: block; } —— 否则图片下方会有空白间隙（内联元素基线对齐导致）
• 若需居中图片+图注，推荐用 text-align: center 或 Flex 布局，别依赖 <center>（已废弃）
• 响应式场景下，<figure> 可配合 max-width 和 margin 控制宽度，但不要给 <figcaption> 设固定宽，以免文字换行异常

实际用的时候，最常踩的坑是把 <figcaption> 当成通用标题标签乱用，或者以为加了它就不用写 alt。语义 HTML 不是套个标签就完事，关键在各部分是否各司其职。