meter 标签专用于表示已知范围内的标量测量值，如磁盘使用率、投票支持率；progress 才表示任务完成百分比。必须设置 value、min、max，low/high/optimum 影响语义渲染，需配合 aria-label 或 label 保障可访问性。
meter 标签不是用来“显示进度”的，也不是 progress 的替代品——它专用于表示**已知范围内的标量测量值**，比如磁盘使用率、投票支持率、热量值。用错场景，语义就崩了。
什么时候该用 meter 而不是 progress
meter 描述的是“当前值在预设范围中的位置”，而 progress 描述的是“任务完成的百分比”。前者是静态度量（如“体温 36.8℃”），后者是动态过程（如“上传完成 73%”）。
常见误用：把文件上传进度条写成 meter；把加载动画的伪进度硬套 meter；把用户等级（如“Lv.12”）强行塞进 meter。
- ✅ 正确场景：
meter表示磁盘占用（value="45"，min="0"，max="100"） - ✅ 正确场景：
meter表示投票支持率（value="62"，low="40"，high="80"，optimum="90"） - ❌ 错误场景：
meter显示“正在下载… 2.3MB/15MB”（这是过程，该用progress+ 文本辅助）
meter 必须设置的属性和可选语义边界
最小必要属性是 value、min、max。不设 min/max 时浏览器按默认 0–1 解析，容易导致视觉比例错乱。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
low、high、optimum 不是装饰，它们直接影响浏览器对“状态区间”的渲染判断（例如 Chrome 会用不同颜色区分 low/high/optimum 区域）。
-
low和high定义“正常范围”的上下界（如 CPU 温度：low=40, high=85） -
optimum是“最理想值”，可以小于low（如噪音分贝越低越好）、大于high（如电池健康度越高越好）、或落在中间（如湿度 40–60% 最佳） - 如果
optimum缺失，浏览器默认取min和max中点，但这个“默认最优”往往不符合业务逻辑
样式兼容性和可访问性现实约束
原生 meter 在 Safari 和旧版 Edge 中样式支持极弱，且无法用 CSS 伪元素（如 ::before）可靠覆盖内部刻度。别指望靠纯 CSS 实现带标签的仪表盘效果。
屏幕阅读器对 meter 的朗读依赖于正确设置的属性组合：只写 value 不写 min/max，NVDA 或 VoiceOver 可能读成 “0.45 out of 1”，而非 “45 out of 100”。
- 必须提供
aria-label或包裹label元素，否则视障用户无法理解度量对象（如“磁盘空间”还是“内存使用”） - 避免仅靠颜色传达状态（如红/黄/绿），
low/high的语义必须配合文本提示（例：<span>偏高</span>） - 不要用
meter做动画数值更新——频繁重绘会触发 layout thrashing，尤其在大量meter同页时
真正难的不是写对属性，而是想清楚：这个数字到底有没有明确的物理/业务上下界？它的“高低优劣”是否可被客观定义？没想清这点，meter 就只是个披着语义外衣的 div。
