meter标签本质是语义化标尺而非仪表盘，用于表示已知范围内的标量值，需设置min、max、value属性，浏览器默认渲染为横向进度条，不支持环形/指针式可视化，自定义外观受限，复杂仪表盘应选用SVG/Canvas或专用库。
meter 标签本质不是仪表盘，而是语义化度量标尺
如何让 meter 标签正确显示数值与范围
必须提供 min、max 和 value 三个属性，否则行为未定义（部分浏览器可能不渲染或显示 NaN）：
73%
常见错误包括：
- 漏写
min或max→ 浏览器按默认min=0、max=1解析，导致value=73超出范围而显示为空或异常色块 - 用字符串传
value（如value="73%"）→ 解析失败，回退为 0 - 动态更新时只改 innerText 不改
value属性 → 视觉不变，辅助技术也无法感知新值
用 CSS 自定义 meter 外观的限制与可行路径
Chrome/Edge 支持伪元素 ::-webkit-meter-bar、::-webkit-meter-optimum-value 等；Firefox 仅支持极简样式（如 background），Safari 兼容性更弱。实际可操作点：
立即学习“前端免费学习笔记（深入）”；
- 统一高度和圆角：
height: 20px; border-radius: 10px; - 覆盖默认颜色（需分别处理不同状态）：
meter::-webkit-meter-bar { background: #e0e0e0; }meter[value="0"]::-webkit-meter-optimum-value { background: #9e9e9e; }meter[value="100"]::-webkit-meter-optimum-value { background: #4caf50; } - 无法添加文字标签、刻度线、指针箭头——这些必须用额外 DOM 元素叠加实现
真正要做仪表盘？换方案更靠谱
如果目标是圆形仪表、动态指针、多段色带或响应式缩放，
- 语义优先 + 可视化分离：用
或 SVG 渲染图形，通过 JS 同步value - 轻量级库：Chart.js 的
doughnut图配cutout: '80%'模拟环形表，或使用svg-gauge这类专做仪表的微型库 - 无障碍注意：自定义仪表必须手动加
aria-valuenow、aria-valuemin、aria-valuemax，并监听键盘交互（如左右键微调）
别为了“用了 HTML5 新标签”硬套
