figure 和 figcaption 的核心价值是为独立内容单元提供清晰、可访问、语义准确的说明；关键在精准分工与结构合规，figcaption 必须是 figure 的首个或末个直接子元素，不可嵌套于 div 等元素内，且需避免复述内容本身，而应说明用途、场景或设计意图。
figcaption 必须直接归属 figure，且只出现一次
它只能是
✅ 正确：
<figure><figcaption>清单 4：用户登录态校验的 JWT 解析逻辑（Node.js）</figcaption><pre class="brush:php;toolbar:false;"><code>const payload = jwt.verify(token, SECRET);</code>
❌ 错误：
<figure><div><figcaption>……</figcaption></div> <pre class="brush:php;toolbar:false;">...
标题说明要回答“为什么放这里”，不是重复 alt 或代码本身
的 alt 属性不存在，但内容本身是可视文本，所以 figcaption 不该复述代码行；它应点明用途、场景、版本或设计意图。
- 图片的 alt 描述“图里有什么”，figcaption 解释“这张图为什么在这”。两者互补，不可互换。
常见有效写法包括：
- 带编号与归类：
图3-2：iOS 端表单提交异常捕获堆栈（v2.4.1） - 指向结论或关联：
该算法在 10 万级数据下平均耗时降低 37%，见性能对比表 - 标注来源与限制：
SVG 架构图（基于 Figma 导出，不含交互状态） - 区分变体说明：
响应式断点配置（mobile-first，最小支持 320px 宽度）
复杂代码块建议搭配 + lang 属性
figcaption 不负责语法高亮或语言识别，这部分由 或 承担。figcaption 只管宏观定位：
- 是示例？是生产代码片段？是已废弃逻辑？
- 属于哪个模块？对应哪条需求？是否含副作用？
例如：<figure><figcaption>模块入口：useAuthStore.ts 中的 token 刷新防重逻辑（防并发请求）</figcaption><pre class="brush:php;toolbar:false;"><code class="typescript">export const refreshAccessToken = async () => { ... }</code>
多段相关代码不要塞进一个 figure
若展示“请求发起 → 响应处理 → 错误兜底”三步，应拆为三个独立 下，避免一个标题覆盖多个语义单元。
图与代码共用同一套规则：只有能单独引用、删掉不影响正文主干、可移入附录仍成立的内容，才值得用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
