meter.value必须为数字，字符串会静默归零；min/max必须显式声明且为数字；low/high仅影响语义颜色，需在[min,max]内且low≤high；动态更新需同步js属性与html attribute。
value 必须是数字，传字符串会静默失效
浏览器对 value 的类型校验非常严格：传入字符串（如 "82" 或 "65.5"）时，不会报错，但会按 0 处理，导致进度条卡在起点或显示异常。这是监控页中“数值明明设对了却不动”的最常见原因。
- 正确做法：用
Number()或一元加号强制转换，例如meter.value = Number(apiData.cpu) - 避免直接赋值字符串：
meter.value = response.value（若 response.value 是字符串，就崩了） - 服务端返回的 JSON 字段即使看起来像数字，也常是字符串——务必检查类型，别信接口文档
min 和 max 缺一不可，不能依赖默认值
min 默认为 0、max 默认为 1，但实际使用中几乎从不适用。一旦漏写 max，value="85" 就会被归一化成 8500%，Chrome 渲染为空白，Firefox 可能只显示 fallback 文本。
- 必须显式写出三者：
<meter value="85" min="0" max="100"></meter> -
min和max也必须是数字类型，min="0"可接受，但min="zero"无效 - 若范围可能为负（如温度 -20°C ~ 45°C），
min="-20"要带负号，且不能加引号包裹成字符串
low/high 不控制进度长度，只影响语义颜色
很多人误以为 low 是进度起始点、high 是结束点，结果发现颜色没变、或者整个条变红。其实 low 和 high 只是阈值分界：低于 low 视为“低”，高于 high 视为“高”，中间才是“正常”。它们不影响进度条长度，只参与颜色判断逻辑。
-
low和high必须落在[min, max]区间内，否则被浏览器静默忽略（Chrome 不报错，Firefox 控制台可能警告） - 顺序很重要：
low必须 ≤high，否则语义混乱，Chrome 可能全条变灰，Firefox 直接降级为无色 - 颜色表现不可控：Chrome 中
value 常为红，<code>value > high常为橙；Firefox 可能全统一为浅蓝——别把关键状态依赖它
动态更新要同步 JS 属性和 HTML attribute
只改 meter.value = 92 在部分旧版 Edge 或 Safari 上可能不触发重绘；只改 setAttribute('value', '92') 则无法触发伪元素样式更新。两者必须配合，才能稳定生效。
- 推荐写法：
meter.value = 92; meter.setAttribute('value', '92'); - 如果值来自轮询 API，每次更新前先校验：
if (val >= meter.min && val - 不要用
innerHTML替换整个<meter></meter>标签——会丢失绑定事件、破坏无障碍阅读器上下文
<meter></meter> 本质是个语义容器：它不渲染逻辑，只反映已知静态标量的位置。一旦业务需要“高亮超阈值”“点击跳转详情”“支持键盘聚焦”，就得切到 <div role="meter"> + ARIA 手动维护，而不是硬撑着改伪元素。</div>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
