是语义化度量值显示组件，用于呈现固定区间内的标量测量值；区别于，它支持 min/max/low/high/optimum 属性以表达优劣判断，且仅显示不可交互的相对位置。
什么时候该用
关键区别在语义和行为：
-
min/max和可选的low/high/optimum，浏览器会据此渲染不同颜色（如 Chrome 中低于low显示红色，高于high显示橙色，optimum附近为绿色） -
表示「任务完成进度」，只有value和max，无优劣判断，也不支持low/high/optimum - 如果你要表达“CPU 使用率 78%（警告阈值是 80%，理想值是 40%）”，用
必须同时指定 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%）：
2.3 / 4 GB
容易出错的地方：
- 忘记写
min或max→ 渲染为空白或 fallback 文本 -
value超出[min, max]→ 浏览器可能截断或忽略样式，但不会报错 -
low>high→ 大多数浏览器仍能解析，但语义混乱，视觉反馈不可靠 - 用百分比字符串（如
value="85%"）→ 必须是纯数字，否则被当作无效值 - 依赖
实现可操作版本
真正要注意的是：它的样式高度依赖浏览器默认行为，CSS 自定义能力极弱（appearance: none 后各引擎表现不一），若需要精确控制颜色或动画，不如用 + JS + ARIA 模拟更稳妥。
