是语义化度量值显示组件，用于呈现固定区间内的标量测量值；区别于，它支持 min/max/low/high/optimum 属性以表达优劣判断，且仅显示不可交互的相对位置。
<meter></meter> 标签不是布局标签，它不参与页面结构排版，也不影响盒模型；它是语义化**度量值显示组件**，仅用于呈现已知范围内的标量测量值（比如磁盘使用率、投票占比、热量摄入进度等）。
什么时候该用 <meter></meter> 而不是 <progress></progress>
关键区别在语义和行为：
-
<meter></meter>表示「当前值在某个固定区间内的相对位置」，有明确的min/max和可选的low/high/optimum，浏览器会据此渲染不同颜色（如 Chrome 中低于low显示红色，高于high显示橙色，optimum附近为绿色） -
<progress></progress>表示「任务完成进度」，只有value和max，无优劣判断，也不支持low/high/optimum - 如果你要表达“CPU 使用率 78%（警告阈值是 80%，理想值是 40%）”，用
<meter></meter>；如果只是“文件上传已完成 65%”，用<progress></progress>
<meter></meter> 的必需属性与取值逻辑
必须同时指定 value、min 和 max，否则浏览器可能不渲染或降级为纯文本。三者必须是有效数字，且满足：min ≤ value ≤ max。
可选属性含义如下：
立即学习“前端免费学习笔记（深入）”；
-
low：低于此值视为“偏低”，触发视觉提示（如红色） -
high：高于此值视为“偏高”，同样触发提示（如橙色） -
optimum：理想值点，决定哪一段被视作“最佳区间”（即使value在low–high之间，若离optimum很远，仍可能被标为非最优）
注意：optimum 不必落在 [low, high] 内；它可以等于 min 或 max，此时“最佳”就是极小或极大。
实际写法与常见坑
以下是一个典型示例，表示内存使用率：当前 2.3GB，总量 4GB，警告线是 3.2GB（80%），理想值是 1.6GB（40%）：
<meter value="2.3" min="0" max="4" low="3.2" high="3.2" optimum="1.6"> 2.3 / 4 GB </meter>
容易出错的地方：
- 忘记写
min或max→ 渲染为空白或 fallback 文本 -
value超出[min, max]→ 浏览器可能截断或忽略样式，但不会报错 -
low>high→ 大多数浏览器仍能解析，但语义混乱，视觉反馈不可靠 - 用百分比字符串（如
value="85%"）→ 必须是纯数字，否则被当作无效值 - 依赖
<meter></meter>做交互控制（如拖动）→ 它是只读的，需配合<input type="range">实现可操作版本
真正要注意的是：它的样式高度依赖浏览器默认行为，CSS 自定义能力极弱（appearance: none 后各引擎表现不一），若需要精确控制颜色或动画，不如用 <div> + JS + ARIA 模拟更稳妥。</div>
