figure和figcaption是定义图文语义关系的结构标签，非单纯排版工具；必须作为直接子元素置于figure首或尾，且仅一个；alt描述图像内容，figcaption说明其文档角色，二者缺一不可。
figure 和 figcaption 不是“给图片加个说明”的排版工具，而是表达图文语义关系的结构契约——用对了，能帮屏幕阅读器准确播报、让搜索引擎理解图文关联；用错了，就等于把标签当 div 用，反而破坏可访问性与 SEO。
figure 什么时候该用？看它能不能“拿掉不影响主逻辑”
figure 只适用于真正独立、可被单独引用的内容单元。判断标准很直接：删掉它，正文还能不能顺畅读下去？
- ✅ 该用：实验折线图 + 图注、代码截图附带功能说明、历史照片标注拍摄时间与出处
- ❌ 别用：文章段落旁的装饰配图、产品页主图配“点击查看大图”文字、轮播图里的单张图、用户头像旁的昵称
- ⚠️ 注意：figcaption 里别写“上图”“左侧示意图”——CSS 可能把图挪到侧栏或附录，说明文字必须自包含、脱离上下文也成立
figcaption 的位置和数量有硬性规则
它必须是 figure 的**第一个或最后一个直接子元素**，且一个 figure 只能有一个非空 figcaption。浏览器和读屏器靠 DOM 位置识别归属关系，中间插个 div 或 p 就断了语义。
- ✅ 正确写法：
<figure><figcaption>图2：登录流程</figcaption><img src="..." alt="..."></figure> - ✅ 也正确：
<figure><img src="..." alt="..."><figcaption>图2：登录流程</figcaption></figure> - ❌ 错误：
<figure><img alt="HTML5语义元素详解：figure、figcaption与内容描述规范" ><div class="wrap"><figcaption>...</figcaption></div></figure>（figcaption 不是直接子元素） - ❌ 错误：
<figure><img alt="HTML5语义元素详解：figure、figcaption与内容描述规范" ><p>说明文字</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></figure>（p 不是 figcaption，无法被识别为图注）
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 外面——单独存在毫无语义，浏览器会忽略其作用
