low和high是颜色区间的分界点而非报警线；浏览器按[min,low)、[low,high]、(high,max]三段划分，optimum所在段决定value的语义颜色，设错则静默失效。
high 和 low 不是报警线，而是颜色区间的分界点；设错会导致整个语义颜色失效，且浏览器静默忽略——不是报错，而是“看起来没反应”。
low 和 high 怎么划分 meter 的颜色区间
浏览器把 [min, max] 按 low 和 high 切成三段：[min, low)、[low, high]、(high, max]。这三段本身不带颜色，真正决定哪段绿/黄/红的是 optimum 落在哪一段。
例如：<meter min="0" max="100" low="30" high="70" optimum="25" value="28"></meter> 中，optimum=25 落在第一段 [0, 30)，所以 value=28 就显示绿色；但若 value=32，它就掉进第二段，变成黄色。
-
low必须严格大于min，否则该低值区间不存在（浏览器不渲染低色） -
high必须严格小于max，且大于low（如果low已设），否则高值区间被丢弃 - 区间是闭开混合的：第一段左闭右开，第二段全闭，第三段左开右闭——边界值归属直接影响颜色
为什么设了 low=20、value=15 却没变红
因为 low="20" 并不表示“低于 20 就报警”，它只定义 [min, 20) 是“低值区间”。而浏览器对“过低”的视觉反馈（比如红色边框或背景）是另一套逻辑，触发条件是 value < low 且 optimum 在右侧区间——此时它不认为你在“低区间内”，而是“跌出低区间了”。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 想让 0–20% 显示低值色，必须确保
value落在[min, low]内（即value ≤ low），且optimum在同一段或相邻段 -
low="20"+value="5"→ 多数浏览器显示“过低”态（红边框），不是“低区间填充色” - 填充长度永远只由
(value - min) / (max - min)决定，low和high完全不影响长度计算
动态修改 low/high 时 JavaScript 怎么写才生效
直接赋值 meter.low = 10 或 meter.high = 90 是无效的——它改的是 DOM property，不触发浏览器重新评估区间和颜色语义。
- 必须用
setAttribute()修改：meter.setAttribute('low', '10')、meter.setAttribute('high', '90') - 值必须是字符串数字，不能是 number 类型：
meter.setAttribute('low', 10)会隐式转成字符串，但显式写'10'更稳妥 - 修改后，
value是否变色，仍取决于它是否跨过新区间边界，以及optimum的位置
最容易被忽略的是：low 和 high 的数值约束是硬性规则，不是建议；浏览器不会警告，也不会 fallback，它只是默默关掉颜色语义——你得靠肉眼比对区间和 value 才能发现哪里断了。
