<meter>标签不能直接绑定JavaScript变量，因其无双向绑定机制，仅支持通过el.value = newValue手动更新数值，且须确保min/max/low/high/optimum等属性已预先正确设置。
<meter> 标签不是用来“定义结构”的，它只负责语义化地展示一个已知的、静态的标量值（比如磁盘使用率、投票占比），浏览器会按规范渲染成进度条样式。它不接受用户交互，也不能绑定动态逻辑——这点很多人一开始会误以为它像 <input type="range">。
为什么 <meter> 不能直接绑定 JavaScript 变量
<meter> 是纯展示型元素，没有 value 属性的双向绑定机制；它的值必须通过 HTML 属性显式设置或用 JS 手动更新 value 属性（注意：不是 setAttribute，而是直接赋值）。
- 错误写法：
el.setAttribute('value', newValue)—— 浏览器可能不重绘 - 正确写法：
el.value = newValue（触发原生 UI 更新） - 必须同时确保
min、max、low、high、optimum这些属性在 JS 更新前已设好，否则计算区间会出错
<meter> 的取值范围和语义边界怎么设才合理
浏览器用 min/max 算出归一化比例，再结合 low、high、optimum 决定颜色（如绿色/黄色/红色）。这些值不是装饰，是语义核心。
-
min和max必须为数字，且min < max，否则整个标签被忽略（DevTools 里能看到但不渲染） -
low和high必须落在 [min, max] 区间内，否则无效；它们定义“正常区间”的边界 -
optimum表示理想值，可以等于min或max（比如电池电量越低越差，optimum 就该是max） - 示例：
<meter min="0" max="100" low="30" high="70" optimum="100" value="85"></meter>—— 85 超出 high，显示“偏高”色（通常是红色）
如何让 <meter> 在不同浏览器里表现一致
默认样式差异大：Chrome 显示带刻度的彩色条，Firefox 是单色渐变，Safari 更窄且无文字提示。CSS 可控性有限，关键节点必须加覆盖：
立即学习“前端免费学习笔记（深入）”；
- 用
appearance: none清除原生样式（但 Safari 需要-webkit-appearance: none） - 进度条主体用
meter::-webkit-meter-bar（Chrome/Safari）或meter::-moz-meter-bar（Firefox）单独控制 - 当前值指示器：Chrome 用
meter::-webkit-meter-inner-element，Firefox 用meter::-moz-meter-bar（注意：Firefox 把值层和背景层混在一起） - 别依赖
<meter>自带辅助文本——它不生成aria-label，必须手动加aria-valuetext属性供读屏器识别
真正麻烦的是：当需要实时反馈（比如上传进度）、可拖拽、或支持键盘操作时，<meter> 就不够用了——得切回 <progress> 或自定义组件。它的定位很窄：只适合“你已经知道结果，只是需要语义化展示”这个场景。
