figcaption是仪表盘图表图例的语义正确方案，必须嵌套在figure内作为首/末子元素，用于说明图表用途与上下文；caption仅适用于table，注释标签完全不可见，不可用作图例。
figcaption 是给仪表盘图表加图例说明的语义正确方案，caption 不适用，<!-- --> 注释标签完全不可见、不参与渲染，不能当图例用。
图表图例必须用 figcaption，不是 caption
caption 只能属于 <table>，且只能描述整张表；仪表盘里的 <code><canvas></canvas> 或 <svg></svg> 不是表格，硬套 caption 会失效——浏览器不识别、读屏器跳过、CSS 样式（如 caption-side）无效。
正确做法是把图表和说明一起包进 <figure></figure>，再用 <figcaption></figcaption> 做图例：
-
<figcaption></figcaption>必须是<figure></figure>的首个或末个子元素，中间不能插<p></p>或其他标签 - 文字要说明“为什么这张图在这里”，比如
<figcaption>CPU 使用率（5分钟滚动平均值）</figcaption>，而不是只写“CPU 图” - 若图表有多个数据系列（如温度+湿度双曲线），
figcaption可配合<ul></ul>列出图例项，但需确保整个<ul></ul>在<figcaption></figcaption>内部
<!-- --> 注释标签不能当图例用
HTML 注释 <!-- 这是CPU图表 --> 在源码里可见，但浏览器完全不渲染，用户永远看不到。它只对开发者有用，比如标记某段 JS 是轮询逻辑，或备注 API 路径变更。
立即学习“前端免费学习笔记（深入）”；
常见误用：
- 在
<canvas id="cpuChart"><!-- CPU实时曲线 --></canvas>—— 注释被忽略，图例没显示 - 把注释放在
<div class="chart-wrapper"> <!-- 温度趋势图 --><canvas></canvas> </div>—— 依然不可见，且破坏语义结构
如果真想隐藏图例（比如仅给辅助技术用），该用 aria-label 或 aria-labelledby，而不是注释。
Canvas/SVG 图表的图例要手动同步数值
用 <figure><canvas><figcaption></figcaption></canvas></figure> 结构时，figcaption 文字不会自动随数据更新。比如 CPU 值从 42% 变到 87%，你得用 JS 同步改 figcaption.textContent：
const figcap = document.querySelector('figure#cpu-fig figcaption');
const cpuValue = 87;
figcap.textContent = `CPU 使用率：${cpuValue}%（当前峰值）`;容易漏的点：
- 没加单位或时间上下文（如缺 “%” 或 “实时”），导致语义模糊
- 在 requestAnimationFrame 循环里反复设置
textContent却没做防抖，引发无谓重排 - WebSocket 推送新值时，只更新了 canvas 绘制，忘了刷新
figcaption，图例和图形脱节
复杂图例建议拆成独立 DOM 元素而非塞进 figcaption
当图例需要交互（如点击切换数据系列）、带颜色块、或含 HTML（如图标 + 文字），figcaption 就不够用了——它只接受流内容，不支持内联样式或事件绑定。
替代方案：
- 在
<figure></figure>外另起一个<div class="chart-legend">，用 CSS 定位紧贴图表下方<li>每个图例项用 <code><button type="button" data-series="temp"><span class="color-box" style="background:#3498db"></span> 温度</button> - 用 JS 控制点击后 canvas 重绘，并同步更新
aria-live区域供读屏器感知
这时候 figcaption 可降级为总标题（如 “机房环境监控”），具体项交给独立图例容器管——分工清晰，可维护性高。
