<figure> + <figcaption> 是最语义化的方式，专用于媒体与说明组合；<figcaption> 必须为 <figure> 的首或尾子元素，默认块级居中显示，且仅能有一个；旧版 IE 不支持但现代项目无需考虑。
用 <figure> + <figcaption> 是最语义化的方式
HTML 原生就提供了专门用于“媒体+说明”组合的标签，<figure> 表示独立的内容单元，<figcaption> 必须是它的第一个或最后一个子元素，浏览器默认会把它渲染在图片下方（块级、居中、字体略小）。
常见错误是把文字塞进 <div> 或硬加 <p>，虽然能显示，但失去语义，对无障碍访问（如读屏软件）和 SEO 都不利。
-
<figcaption>只能出现在<figure>内部，且只能有一个 - 如果图在左、文字在右这种横向布局，需要额外加 CSS（比如
display: flex），默认不是横排 - 部分旧版 IE 不支持
<figure>和<figcaption>，但现代项目基本不用考虑
<figure> <img src="cat.jpg" alt="一只橘猫蹲在窗台上"> <figcaption>图：2024 年春摄于北京朝阳区</figcaption> </figure>
纯 CSS 控制文字位置时，display: block 是关键
如果不用 <figure>，而是用 <div> 包裹 <img> 和 <p>，图片默认是 inline 元素，会导致下方文字和图片底部不对齐、有空隙——这是最常被忽略的坑。
根本原因是图片的 vertical-align 默认是 baseline，会预留下降空间（给字母 g、j 留位置），即使你没写字母也会占位。
立即学习“前端免费学习笔记（深入）”；
- 给
<img>加display: block，立刻消除底部空白 - 或者设
vertical-align: top/middle/bottom，也能解决，但block更彻底、更常用 - 文字用
<p>或<div>都可以，但别用<span>（行内元素，需额外设display: block）
<div> <img src="dog.jpg" alt="金毛犬在草地上奔跑" style="display: block;"> <p>拍摄于杭州西溪湿地，2023 年秋</p> </div>
需要响应式或图文混排？优先用 flex 而非 float
当需求变成“图片左/右浮动，文字环绕”或“小图+短说明并排”，float 容易引发父容器塌陷、清除浮动麻烦等问题，现在应直接上 flex。
关键是把容器设为 display: flex，再控制主轴方向和对齐方式；图片和文字都作为 flex item，不再依赖文档流位置。
- 图片加
flex-shrink: 0防止被压缩变形 - 文字区域用
flex: 1占满剩余空间，自动换行 - 移动端想改成上下排列？用
@media改flex-direction: column就行
<div style="display: flex; align-items: flex-start; gap: 12px;">
<img src="icon.png" alt="设置图标" style="width: 48px; height: 48px; flex-shrink: 0;">
<div>
<strong>系统设置</strong>
<p style="margin: 4px 0 0; font-size: 14px;">调整通知、隐私与语言偏好</p>
</div>
</div>
alt 属性不是说明文字的替代品
alt 的作用是「当图片无法加载时提供等效信息」或「供辅助技术朗读」，它不负责视觉呈现。很多人误以为写了 alt 就不用下方文字了，结果页面里什么都没显示。
二者定位完全不同：alt 是技术性描述（如“蓝色按钮，带下载图标”），<figcaption> 或普通文字是面向所有用户的说明（如“点击下载最新版安装包”）。
- 没有
alt的图片会被读屏软件跳过，或显示 “image” 字样，必须补 -
alt=""表示图片纯装饰，此时若还有下方文字，说明内容就得靠那个文字承载 - 如果
<figcaption>和alt内容高度重复，反而可能让屏幕阅读器重复播报，需精简
display: block 这一行，以及把 alt 当成视觉说明来用。 
