meter的low/high不是警告线，而是语义边界，仅参与浏览器对“状态区间”的判断：value≤low为低值、lowhigh为高值，实际颜色还受optimum位置影响，且firefox忽略该逻辑。
meter 的 low/high 不是“警告线”，而是语义边界
很多人把 low 和 high 当作 CSS 里的警戒阈值线来画，其实它们不生成任何可见线条，也不控制刻度位置——只参与浏览器对「状态区间」的语义判断。Chrome 会据此切换填充色（如 value > high 时倾向红色），但 Firefox 完全忽略这些属性，Safari 则判定逻辑不同。真正起作用的是三者之间的数值关系：min low high max，缺一环就失效。
-
low必须大于min，写成low="0"会导致 Chrome 认为“无低区间”，不触发偏低状态 -
high必须小于max，high="100"在max="100"下无效（违反 strict 小于） -
optimum决定“理想方向”：若设为optimum="0"，则 value 越小越绿；设为optimum="100"，则越大越绿——它不是中间点
value 超出 low/high 区间时，颜色不一定会变
浏览器不会仅因 value > high 就强制标红。它还要比对 value 与 optimum 的相对距离。比如 value="95" min="0" max="100" low="30" high="80" optimum="98"，虽然 95 > high，但离 optimum 很近，Chrome 仍可能渲染为绿色。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- Chrome 的着色逻辑是分段加权：靠近
optimum→ 绿；在[low, high]内但远离optimum→ 黄；远离optimum且超出[low, high]→ 红 - Firefox 不实现该逻辑，所有值统一灰底，
low/high仅影响屏幕阅读器朗读（如 “95 out of 100, suboptimal”） - 别依赖颜色传达关键告警——必须同步写文本提示，例如在
<meter></meter>外加<span class="alert-text">超载</span>
动态更新 meter 时，low/high 也要同步改
监控场景中常需收紧告警阈值（如 CPU 高负载从 >90% 改为 >85%），但只改 value 不够。必须用 JS 同步调用 element.setAttribute('high', '85')，否则浏览器仍按旧 high 值做语义判断，视觉和读屏结果都会滞后。
- 更新顺序很重要：先改
low/high，再赋value，避免中间态出现value落在非法区间（如value=87但high=85未更新） -
value必须是数字类型，element.value = "87"会静默失败，得写element.value = 87 - 频繁更新时注意 layout thrashing：每改一次属性都可能触发重排，10 个
<meter></meter>同页建议用requestAnimationFrame批量更新
真正难的不是写对属性，而是接受它的不可控性
<meter></meter> 是语义容器，不是 UI 组件。它不提供动画、不支持自定义刻度、不能叠加图标、伪元素前缀不统一（WebKit 用 ::-webkit-meter-bar，Firefox 用 ::-moz-meter-bar），且 IE/Edge 18 及更早版本直接不渲染条形。如果你需要精确控制颜色过渡、响应式宽度或无障碍状态文本，<div role="meter"> + CSS + ARIA 才是可靠起点。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
