figcaption是必须手动写入HTML的语义化标签，需作为figure的直接子元素且位于首或尾，配合img等媒体内容使用，alt与figcaption职责不同，不可互替。
HTML源码本身不能“保存为figcaption标签”——figcaption是语义化标签，必须手动写入HTML结构中；你真正需要的是：把图题正确嵌入源码、确保它被识别为图注，而不是随便加一行文字。
figcaption不是“保存出来”的，是写进HTML里的
很多人误以为能从网页里“提取出figcaption”，其实它根本不存在于原始源码之外。如果你拿到的是纯HTML文本（比如右键→“查看页面源代码”复制的内容），而里面没有figure和figcaption，那它就真的没有——你得自己补。
- 浏览器“另存为→网页，全部”生成的文件夹里，
figcaption不会自动出现，它只存在于你编辑过的HTML中 - 用开发者工具在
Elements面板里看到的figcaption，说明它本来就在源码里，或由JS动态插入 - 如果源码里只有
<img src="x.jpg" alt="...">，那就没有图题语义，alt再长也不是figcaption
图题要生效，必须满足三个硬性条件
figcaption不是写了就能被读屏器或搜索引擎识别的。W3C规范强制要求它处于特定位置和上下文中：
-
figcaption必须是figure的**直接子元素**，且只能是第一个或最后一个——中间插个<p>或<div>就失效 -
figure内部至少得有一个媒体内容（如<img>、<svg>、<pre><code>...），空figure无意义 -
img的alt属性不能省，也不能和figcaption重复——alt讲“图里有什么”，figcaption讲“为什么放这张图”
错误示例：<figure><img><div><figcaption>图1</figcaption></div></figure> —— DOM结构错，读屏器跳过
立即学习“前端免费学习笔记（深入）”；
保存带图题的网页副本时，资源路径容易崩
你手动补好<figure><figcaption>.../figure>后，如果直接保存为index.html，图片很可能不显示——因为src路径还是线上绝对地址，或相对路径指向原网站目录。
- 把图片下载到本地，和HTML放在同一级目录，然后把
src改成"photo.jpg"这类同级相对路径 - 避免
src="/assets/img/photo.jpg"这种以/开头的路径，它会从根目录找，离线时必然404 - 如果原网页用了CSS背景图或JS动态加载图，这些
figcaption无法覆盖——它们根本不走img标签
轮播图、多图对比、文章内小图，别硬套figure
强行给不满足语义条件的图加figure+figcaption，反而破坏可访问性。常见误用场景：
- 文章段落中一句“如图所示”，配一张局部截图 → 应该用
<img alt="...">，不要figure - 三张手机界面截图并排展示 → 每张都应单独套
figure，共用一个figcaption是错的 - 首页banner图、头像旁昵称、按钮图标 → 这些是UI装饰或交互元素，用
<img>或<span role="img">更准确
真正该用figure的，是那种删掉它正文照样通顺、挪到附录也成立的内容——比如论文插图、带编号的API响应截图、注明拍摄参数的摄影作品。
