的 low 和 high 是划分“正常区间”的阈值，非起始/结束值；真正范围由 min/max 控制，当前值由 value 决定，且 low/high 必须在 [min, max] 内才生效。
meter 标签的 low 和 high 不是“起始/结束值”，而是阈值分界点
很多人一看到 <meter></meter> 就默认 low 是最小值、high 是最大值，结果进度条颜色不对、语义错乱。实际上，low 和 high 是用来划分“正常区间”的两个阈值：低于 low 算“低”，高于 high 算“高”，中间才算“正常”。真正的数值范围由 min 和 max 控制，而当前值由 value 决定。
常见错误现象：<meter value="70" low="50" high="90"></meter> 显示为“高”状态（橙色或红色），不是因为 70 > 90，而是浏览器认为 70 落在“正常区间”（50–90）内 —— 所以它其实是绿色（正常），但如果你没设 min/max，默认是 0–1，此时 value="70" 已溢出，直接不渲染或显示异常。
-
min和max必须显式设置，否则value按 0–1 归一化，70 会变成 7000% —— 浏览器通常截断或忽略 -
low和high必须在[min, max]范围内，否则被忽略（Chrome 会静默丢弃，Firefox 可能报警告） - 视觉反馈依赖浏览器默认样式：低值（
value ）常为浅红，高值（<code>value > high）为橙/红，中间为绿；无法用 CSS 直接选中“低区段”——meter::-webkit-meter-even-less-good-value这类伪元素已废弃且不跨浏览器
如何让 0–100 分数显示“60以下红、60–85绿、85以上黄”
这个需求很典型：考试分数分级着色。关键在于把语义和视觉对齐 —— low=60、high=85，同时确保 min=0、max=100、value 是真实分数。
<meter min="0" max="100" low="60" high="85" value="72">72/100</meter>
注意：<meter></meter> 的文本内容（如 72/100）只是降级 fallback，不参与计算；它只在 JS 禁用或浏览器不支持时显示。
- 若
value="55"→ 小于low→ 视为“低”，多数浏览器渲染为红色背景 - 若
value="90"→ 大于high→ 视为“高”，通常为黄色或橙色背景 - 若
value="75"→ 落在[low, high]内 → “正常”，绿色背景 - 不要试图用
low和high做动态范围切换：它们是静态属性，JS 修改后不会触发重绘（需替换整个元素或强制重流）
与 progress 标签的关键区别：语义不可互换
<progress></progress> 表示任务完成度（如上传进度、加载百分比），只有 value 和 max，没有 low/high；而 <meter></meter> 表示某个标量测量值的相对位置（如电量、温度、评分），天生带上下文语义。混用会导致无障碍阅读器误读、SEO 语义丢失。
- 上传进度用
<progress value="65" max="100"></progress>—— 正确 - 同个 65 分数用
<progress value="65"></progress>—— 错误：缺少max，且语义是“任务”，不是“测量值” - 分数必须用
<meter min="0" max="100" value="65"></meter>，加low/high才能表达分级 - 两者都不能用 CSS 的
transform: scaleX()模拟进度 —— 那只是视觉欺骗，丧失语义和可访问性
实际表单中绑定动态值时的坑
直接在 HTML 里写死 value 很简单，但表单中往往要响应用户输入（比如一个 <input type="number"> 改变后实时更新 <meter></meter>）。这时容易犯两个错：一是忘了同步更新 min/max（比如用户切到“满分150”的试卷），二是用 innerHTML 或 outerHTML 替换整个 <meter></meter> 导致焦点丢失或事件解绑。
- 安全做法：只修改
meterElement.value、meterElement.low、meterElement.high等属性（它们是可写的 DOM 属性） - 避免操作
innerHTML：它会销毁原元素并重建，meter的内部状态（如动画帧）会重置 - 如果
min/max动态变化，记得先改min/max，再改value，否则可能因value超出新范围而被浏览器 clamp（截断） - 无障碍提示建议加
aria-label，例如aria-label="数学成绩：78分，处于良好区间"，因为屏幕阅读器不一定读出low/high的语义
meter 的样式控制粒度很粗，别指望用 CSS 精确染色“60–70 这一段”；真有复杂视觉需求，<div> + ARIA + JS 手动绘制仍是更可靠的选择。</div>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
