语义正确的方式是用包裹图片和文字，后者必须是其直接子元素且仅一个；alt属性仅为替代文本，不可替代说明文字；响应式下需控制文字换行与尺寸。
用 <figure></figure> 和 <figcaption></figcaption> 包裹图片和文字
这是语义最正确、浏览器和屏幕阅读器都认的方式。直接把图片和说明文字放进 <figure></figure>，说明文字用 <figcaption></figcaption> 标签包起来，它默认渲染在图片下方（块级、居中），不需要额外写 CSS。
常见错误是只用 <p></p> 或 <div> 挨着放图片和文字——这样没语义，也不利于 SEO 和无障碍访问。<ul>
<li>
<code><figcaption></figcaption> 必须是 <figure></figure> 的**直接子元素**，且只能有一个（或放在开头/结尾）
<h3></h3> 里，描述放 <p></p> 里，都塞进 <figcaption></figcaption>
<figure> @@##@@ <figcaption>图1：晴天午后，家猫观察窗外飞鸟</figcaption></figure>
不用语义标签时，靠 CSS 控制文字位置
如果受限于旧项目结构，不能改 HTML 标签，就用 CSS 把文字“钉”在图片下方。关键是让容器形成 BFC，并控制文字块的 display 和 margin。
容易踩的坑：只加 <p></p> 标签却不设 margin-top: 0，导致文字和图片之间多出默认间距；或者忘记给容器设 display: inline-block 或 flex，导致文字换行错位。
- 给图片外层加一个
<div class="img-wrap">，里面放 <code><img src="cat.jpg" alt="一只橘猫蹲在窗台上">和<p class="caption"></p> -
.img-wrap { display: inline-block; }防止文字撑宽整行 .caption { margin: 4px 0 0; font-size: 0.875em; text-align: center; }
<div class="img-wrap"> @@##@@ <p class="caption">图2：成年金毛，摄于2024年春</p> </div>
alt 属性不是文字说明的替代方案
alt 是图片的**替代文本**，用于加载失败、SEO 和读屏软件，不是给普通用户看的“下方说明”。它不会显示在页面上（除非图片没加载出来）。
有人误以为写长 alt="这张图展示了……详见下方文字" 就能省掉 <figcaption></figcaption>，这是错的：视觉用户根本看不到 alt 内容，而且重复冗余。
-
alt要简短、准确，描述图片本身（如alt="穿红裙的女性站在咖啡馆门口"） - 如果图片是装饰性的，用
alt=""（空字符串），不要删掉这个属性 - 复杂图表或信息图，
alt写概要，详细说明仍需<figcaption></figcaption>或单独段落
响应式场景下文字容易被截断或重叠
当图片宽度随屏幕缩小，而说明文字字号或行高没适配，就会出现文字挤到图片上、或超出容器边界的情况。
关键不是调 font-size，而是控制文字容器的换行行为和最大宽度。
- 给
<figcaption></figcaption>或.caption加word-break: break-word;防止长英文单词撑破容器 - 避免固定
width，改用max-width: 100%;并配合text-align: center; - 小屏下可微调
font-size：用clamp(0.75rem, 0.875rem, 1rem)比媒体查询更轻量
别忘了测试图片在 max-width: 100% + height: auto 下，文字是否还稳稳停在下方——有时候 vertical-align 设为 bottom 能解决基线对齐偏移问题。
