<meter> 是只读标量值显示元素，需同时设 min、max、value；支持 low/high/optimum 触发语义化颜色，但兼容性差；与 <progress> 本质区别在于是否表达阈值关系及无障碍播报逻辑。
meter 元素的基本用法和语义边界
<meter> 不是滑块，也不是输入控件，它只负责「只读地」显示一个已知范围内的标量值。浏览器渲染为带背景色的刻度条，但用户不能拖动、点击或修改——这点常被误当成 <input type="range"> 的替代品。
必须同时提供 min、max 和 value 三个属性，否则不渲染或降级为纯文本。缺一不可：
<meter value="75" min="0" max="100">75%</meter>
-
min默认为 0，但显式写出更安全；max没有默认值，必须设 -
value必须在[min, max]闭区间内，超出时部分浏览器会忽略样式（如 Chrome 显示空条） - 内容文本（如上面的
75%）是 fallback，仅当 CSS 禁用或 UA 不支持时显示
low / high / optimum 属性如何影响颜色表现
浏览器会根据 low、high、optimum 自动切换 <meter> 的背景色（通常是 green/yellow/red），但规则比想象中严格：
-
low和high必须在[min, max]内，且low < high，否则颜色逻辑失效 -
optimum可以等于min或max，表示“最佳值在边界”，此时若value靠近它，仍会触发绿色 - Chrome/Firefox 对颜色映射不一致：Chrome 用三段（low 以下红、low–high 黄、high 以上绿），Firefox 是 low–optimum–high 三区动态配色
示例（推荐显式设全）：
立即学习“前端免费学习笔记（深入）”；
<meter value="20" min="0" max="100" low="30" high="70" optimum="80">20/100</meter>
此时 value=20 小于 low=30，多数浏览器会渲染为红色背景。
样式定制的可行范围与兼容性陷阱
原生 <meter> 支持有限的伪元素定制，但各浏览器差异大，别指望完全重绘：
- Chrome 支持
meter::-webkit-meter-inner-element、::-webkit-meter-bar、::-webkit-meter-optimum-value等 - Firefox 仅支持
meter::-moz-meter-bar和::-moz-meter-optimum，且无法单独控制“低/高”区颜色 - 所有浏览器都不支持通过
background直接覆盖整体样式；必须用伪元素 +appearance: none（仅 WebKit）
最稳妥的自定义方式其实是用 <div> 模拟，尤其当需要响应式缩放、动画或 IE 支持时。<meter> 的价值在于语义正确和无障碍（AT 会读出“20 out of 100, suboptimal”这类信息），不是视觉自由度。
与 progress 元素的关键区别在哪
两者长得像，但语义和行为完全不同：
-
<progress>表示「任务进度」，只有value和max（min固定为 0），无low/high/optimum -
<meter>表示「当前测量值」，比如磁盘使用率、电量、评分，强调与阈值的相对关系 -
<progress>的value可为不确定态（省略value属性），<meter>不允许 - 辅助技术对两者的播报不同：
progress读作“progress 30 percent”，meter读作“meter 30 out of 100”并附加状态（如 “suboptimal”）
选错元素不仅影响样式，更破坏可访问性。如果数据没有明确的“理想值”或“警戒线”，优先用 <progress>；如果有，才用 <meter>。
真正难的是把业务里的模糊阈值（比如“用户活跃度中等”）准确映射到 low/high/optimum 数值上——这一步没想清楚，后面所有样式和语义都白搭。
