caption专用于表格标题，必须为table首个子元素且唯一；单元格内图片说明应使用figure+figcaption；legend仅适用于fieldset表单分组；alt与figcaption需共存且职责分明。
caption 不是用来给表格里的图片加说明的，它是给整个表格加标题的。表格内部某张图需要文字说明？别硬套 caption，那会语义错乱、读屏器读不准。
表格标题用 caption，不是图注
caption 的唯一职责是描述整张表的内容、范围和上下文。比如“2024年Q1-Q3各部门人力成本汇总（单位：万元）”，而不是“这张图是张三的工牌照片”。它必须作为 <table> 的第一个子元素，且只能有一个。
<ul><li>放错位置（如塞进 <code><thead> 或 <code><td> 里）会导致 HTML 验证失败，辅助技术直接忽略
<li>内容要具体，避免“表格1”“数据表”这类无意义表述</li>
<li>支持 <code>lang 属性，多语言场景下建议显式声明，例如 <caption lang="zh-CN"></caption>
表格单元格里的图片说明，用 figure + figcaption
如果某列或某单元格里插了图（比如员工照片列），又需要配说明文字，正确做法是把 @@##@@ 和说明一起包进 <figure></figure>，再用 <figcaption></figcaption> 标注。
-
figcaption必须是figure的**首个或末个子元素**，中间不能插其他标签（哪怕只是一行<p></p>） - 示例结构：
<td><figure>@@##@@<figcaption>张三｜研发部｜入职日期：2023-08-15</figcaption></figure></td> - 这样屏幕阅读器能明确将图与说明绑定，CSS 也能独立控制样式（比如加背景色、缩小字号）
别把 legend 当图注用
legend 只能出现在 <fieldset></fieldset> 里，作用是给表单控件分组加标题。它和图片、表格完全无关。混用会导致语义污染，校验工具报错，无障碍支持失效。
- 常见错误：
<table><tr><td> <legend>员工照片</legend>@@##@@</td></tr></table>—— 这是非法嵌套，浏览器可能渲染异常 - 记住：
caption→ 表格标题；figcaption→ 图/媒体说明；legend→ 表单分组标题
alt 属性和 figcaption 各司其职
alt 是图像不可见时的替代文本，描述图“是什么”；figcaption 是图的上下文说明，解释图“为什么在这里、代表什么”。两者不互斥，要共存。
- 错误写法：
<img><figcaption>图1：2024年各季度销售额变化</figcaption>——alt太模糊，没说明坐标轴、时间范围、关键拐点 - 推荐写法：
alt="折线图：X轴为2024年Q1至Q3，Y轴为销售额（万元），Q2出现12%环比增长"，再配合figcaption补充业务背景 - 如果图本身是装饰性（比如表格左上角的小图标），
alt=""即可，但依然不该用figcaption
figcaption 放最后。这时候该用 CSS 的 flex-direction: column-reverse 调整渲染流，而不是为了“看起来对”去破坏 HTML 结构。语义合规比视觉表象更难检查，也更容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
