figure和figcaption是定义图文语义关系的结构标签，非单纯排版工具；必须作为直接子元素置于figure首或尾，且仅一个；alt描述图像内容，figcaption说明其文档角色，二者缺一不可。
figure 和 figcaption 不是“给图片加个说明”的排版工具，而是表达图文语义关系的结构契约——用对了，能帮屏幕阅读器准确播报、让搜索引擎理解图文关联；用错了，就等于把标签当 div 用，反而破坏可访问性与 SEO。
figure 什么时候该用？看它能不能“拿掉不影响主逻辑”
figure 只适用于真正独立、可被单独引用的内容单元。判断标准很直接：删掉它，正文还能不能顺畅读下去？
- ✅ 该用：实验折线图 + 图注、代码截图附带功能说明、历史照片标注拍摄时间与出处
- ❌ 别用：文章段落旁的装饰配图、产品页主图配“点击查看大图”文字、轮播图里的单张图、用户头像旁的昵称
- ⚠️ 注意：figcaption 里别写“上图”“左侧示意图”——CSS 可能把图挪到侧栏或附录，说明文字必须自包含、脱离上下文也成立
figcaption 的位置和数量有硬性规则
它必须是 figure 的**第一个或最后一个直接子元素**，且一个 figure 只能有一个非空 figcaption。浏览器和读屏器靠 DOM 位置识别归属关系，中间插个 div 或 p 就断了语义。
- ✅ 正确写法：
图2：登录流程 - ✅ 也正确：
图2：登录流程 - ❌ 错误：
... - ❌ 错误：
说明文字
alt 和 figcaption 各司其职，缺一不可
alt 是图像的替代文本——无图时显示、供读屏器朗读，描述图像本身“是什么”；figcaption 是它的标题或上下文说明——解释这张图在文档中“扮演什么角色”，比如编号、来源、对比维度等。
- img 的 alt 不能空，哪怕图只是装饰也要写
alt=""（空字符串表示纯装饰） - figcaption 不能代替 alt：没 alt 的图对视障用户就是一张“没名字的空白”
- 如果 alt 已足够详细（如长描述），figcaption 可更精简，聚焦编号、类型、数据来源等元信息
多图、样式与常见误区
一组图不是“一个 figure”，而是多个 figure —— 每张图（或每组强关联图，如分步操作截图）都应各自包裹，配专属 figcaption。
- 轮播组件本身不该用 figure 包裹，外层用 div 或 section，内部每个 img 单独套 figure+figcaption
- 不要依赖 figure 自动实现图文环绕，它默认是块级元素，需配合 float、flex 或 grid 实现布局
- figcaption 默认不居中、不加粗，建议用
max-width或display: flex控制宽度与换行，避免长文本显示异常 - 千万别把 figcaption 写在 figure 外面——单独存在毫无语义，浏览器会忽略其作用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
