figure和figcaption必须成对使用，figcaption仅在figure内有效；figcaption须为figure首个或最后一个子元素且最多一个；alt与figcaption功能互补不可替代。
figure和figcaption必须成对出现，不能单独用figcaption
单独写 <figcaption></figcaption> 标签浏览器会忽略它，甚至可能被解析到 DOM 外部。只有包裹在 <figure></figure> 内部时，<figcaption></figcaption> 才具有语义意义和默认样式。
-
<figure></figure>是一个独立的流内容容器，代表一段自包含的内容（图、图表、代码块、照片等） -
<figcaption></figcaption>必须是<figure></figure>的第一个或最后一个子元素，且最多只能有一个 - 如果图注需要放在图片上方，就把
<figcaption></figcaption>放在<img>前面；放下方就放后面
figcaption位置影响渲染顺序，但不影响语义权重
视觉上 <figcaption></figcaption> 在 <img> 前或后，只改变显示顺序，屏幕阅读器仍会把整个 <figure></figure> 当作一个语义单元处理，按 DOM 顺序读出内容。
- 上方图注示例：
<figure><figcaption>图1：北极熊在浮冰上行走</figcaption> @@##@@ </figure>
- 下方图注更常见，也更符合多数设计习惯，但不是强制要求
- 不要为了“居中图注”把
<figcaption></figcaption>拆开或用多个标签模拟——语义会被破坏
alt属性和figcaption分工明确，不能互相替代
alt 是图片的文本替代，用于加载失败、纯文本环境或辅助技术；<figcaption></figcaption> 是对整张图的说明性文字，面向所有用户可见。两者功能不同，缺一不可。
-
alt要简短、准确，描述图像本身（如alt="穿红裙的女孩在公园长椅上读书"） -
<figcaption></figcaption>可稍长，补充上下文（如 “2023年春，北京朝阳公园，市民阅读常态化场景”） - 如果
alt=""（空值），说明图纯粹是装饰，此时不应再加<figcaption></figcaption>——否则语义矛盾 - 搜索引擎和无障碍工具依赖这两者协同工作，漏掉任一都降低可访问性
figure不自动带边框或间距，样式要自己控制
浏览器对 <figure></figure> 没有统一默认边框、背景或外边距，看起来和普通 <div> 几乎一样。容易误以为“没生效”，其实是样式没加。
<ul>
<li>常见遗漏：<code>figure img { display: block; } —— 否则图片下方会有空白间隙（内联元素基线对齐导致）
text-align: center 或 Flex 布局，别依赖 <center></center>（已废弃）<figure></figure> 可配合 max-width 和 margin 控制宽度，但不要给 <figcaption></figcaption> 设固定宽，以免文字换行异常<figcaption></figcaption> 当成通用标题标签乱用，或者以为加了它就不用写 alt。语义 HTML 不是套个标签就完事，关键在各部分是否各司其职。
