<meter>标签专用于显示已知范围内的静态度量值（如磁盘使用率、CPU温度），必须显式设置min、max、value三属性且value∈[min,max]；low/high/optimum提供语义分段，影响浏览器自动着色逻辑，不可用于进度场景。
<meter> 标签不是用来显示任意数值的“进度条”，它专用于表达**已知范围内的标量测量值**——比如磁盘使用率、热量指数、投票支持率等有明确 min/max 边界的客观度量。用错场景（例如加载进度、任务完成度）会导致语义错误，且可能被屏幕阅读器误读。
什么时候该用 <meter> 而不是 <progress>
关键区别在语义和动态性：<progress> 表示任务的完成状态（如“上传已完成 65%”），是随时间推进的；<meter> 表示某一时刻的静态测量值（如“当前 CPU 温度为 72°C”，而正常范围是 20–90°C）。
- ✅ 正确：磁盘占用率
<meter value="48" min="0" max="100">48%</meter>（已知 0–100% 范围） - ❌ 错误：页面加载进度
<meter value="32"></meter>（应改用<progress value="32">） - ⚠️ 注意：
value必须在min和max之间，否则浏览器会忽略或归一化（如value="120" min="0" max="100"实际按 100 渲染）
<meter> 的五个视觉状态由浏览器自动判断
浏览器根据 value 相对于 min/max 及可选的 low、high、optimum 属性，决定颜色/样式（如绿色→黄色→红色）。这些属性不控制样式本身，只提供语义线索：
-
low和high定义“正常区间”边界（如电池电量低于 20% 为 low，高于 80% 为 high） -
optimum指“最理想值”，可以小于min（如噪音分贝越低越好）或大于max（如评分越高越好） - 若未设
low/high，浏览器仅靠value相对位置做粗略判断（如靠近max就偏红） - CSS 中无法直接选中“low 状态”，但可通过
meter:indeterminate或属性选择器模拟（如meter[value<20]，注意兼容性）
实际使用时必须显式声明 min、max 和 value
这三个属性缺一不可。省略 min 或 max 会导致 <meter> 退化为无意义的空元素（多数浏览器不渲染或仅显示 fallback 文本）。
立即学习“前端免费学习笔记（深入）”；
<!-- ✅ 正确：完整声明 --> <meter value="85" min="0" max="100" low="30" high="70" optimum="50">85%</meter> <p><!-- ❌ 错误：缺少 min/max，视觉可能消失 --> <meter value="85">85%</meter></p><p><!-- ⚠️ 注意：value 是数字，不是字符串；不要写成 value="85%" -->
真正容易被忽略的是 optimum 的方向性——它定义“好”的方向，而非固定中心点。比如服务器响应时间越短越好，optimum 应设为 min；而用户评分越高越好，则 optimum 应设为 max。这个细节决定了浏览器如何解释“偏高”或“偏低”的语义。
