+ 是最语义化的方式，专用于媒体与说明组合； 必须为 的首或尾子元素，默认块级居中显示，且仅能有一个；旧版 ie 不支持但现代项目无需考虑。
用 <figure></figure> + <figcaption></figcaption> 是最语义化的方式
HTML 原生就提供了专门用于“媒体+说明”组合的标签，<figure></figure> 表示独立的内容单元，<figcaption></figcaption> 必须是它的第一个或最后一个子元素，浏览器默认会把它渲染在图片下方（块级、居中、字体略小）。
常见错误是把文字塞进 <div> 或硬加 <code><p></p>，虽然能显示，但失去语义，对无障碍访问（如读屏软件）和 SEO 都不利。
-
<figcaption></figcaption>只能出现在<figure></figure>内部，且只能有一个 - 如果图在左、文字在右这种横向布局，需要额外加 CSS（比如
display: flex），默认不是横排 - 部分旧版 IE 不支持
<figure></figure>和<figcaption></figcaption>，但现代项目基本不用考虑
<figure> @@##@@ <figcaption>图：2024 年春摄于北京朝阳区</figcaption></figure>
纯 CSS 控制文字位置时，display: block 是关键
如果不用 <figure></figure>，而是用 <div> 包裹 <code><img src="cat.jpg" alt="一只橘猫蹲在窗台上"> 和 <p></p>，图片默认是 inline 元素，会导致下方文字和图片底部不对齐、有空隙——这是最常被忽略的坑。
根本原因是图片的 vertical-align 默认是 baseline，会预留下降空间（给字母 g、j 留位置），即使你没写字母也会占位。
- 给
<img>加display: block，立刻消除底部空白 - 或者设
vertical-align: top/middle/bottom，也能解决，但block更彻底、更常用 - 文字用
<p></p>或<div> 都可以，但别用 <code><span></span>（行内元素，需额外设display: block）<div> @@##@@ <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;"> @@##@@ <div> <strong>系统设置</strong> <p style="margin: 4px 0 0; font-size: 14px;">调整通知、隐私与语言偏好</p> </div> </div>alt 属性不是说明文字的替代品
alt的作用是「当图片无法加载时提供等效信息」或「供辅助技术朗读」，它不负责视觉呈现。很多人误以为写了alt就不用下方文字了，结果页面里什么都没显示。二者定位完全不同：
alt是技术性描述（如“蓝色按钮，带下载图标”），<figcaption></figcaption>或普通文字是面向所有用户的说明（如“点击下载最新版安装包”）。- 没有
alt的图片会被读屏软件跳过，或显示 “image” 字样，必须补 -
alt=""表示图片纯装饰，此时若还有下方文字，说明内容就得靠那个文字承载 - 如果
<figcaption></figcaption>和alt内容高度重复，反而可能让屏幕阅读器重复播报，需精简
display: block这一行，以及把alt当成视觉说明来用。
- 图片加
