是 html5 中用于显示已知范围内标量测量值的语义化标签，必须设置 min、max 和 value 属性，可选 low、high、optimum 表达优劣判断，内容文本提供可访问性回退，样式定制受限于浏览器兼容性。
关键在于：用对标签、设全属性、理解语义逻辑。
必须显式设置 min、max 和 value 三个属性
浏览器只有同时看到这三个数值，才能正确计算相对位置并渲染颜色反馈。
-
min：范围下限（如 0） -
max：范围上限（如 100） -
value：当前实际值（必须在 min 和 max 之间，否则可能被标为异常）
例如：
<meter value="72" min="0" max="100">72%</meter>
不写 min 和 max，或写成字符串（如 min="zero"），会导致渲染不可靠——部分浏览器可能 fallback 到默认 0–1，有的干脆不显示色块。
用 low、high、optimum 表达优劣判断
这些属性让 <meter></meter> 具备语义色彩，浏览器会据此自动着色（Chrome 等主流内核支持）：
-
low：低于该值视为“偏低”，常触发红色或暗红 -
high：高于该值视为“偏高”，常为橙色或黄色 -
optimum：理想目标值，决定哪一段算“最佳”；它可以等于min或max，比如节能模式下温度越低越优，optimum="18"就合理
示例（考试成绩）：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<meter value="86" min="0" max="100" low="60" high="90" optimum="95">86分</meter>
→ 0–60 显示为偏低（红），60–90 为中等（黄），90–100 接近最优（绿），而 86 虽未到 90，但离 95 不远，视觉上更倾向绿色调。
注意：optimum 不必落在 [low, high] 区间内；它的作用是定义“最佳点”，而非“合格线”。
内容文本作为可访问性回退
标签内部的文字（如 72% 或 86分）会在以下情况起作用：
- 浏览器不支持
<meter></meter>（如旧版 IE） - 屏幕阅读器读取时提供明确数值说明
- CSS 彻底禁用样式后保留可读信息
所以建议始终写上简明、有意义的文本内容，不要留空。
样式定制需谨慎，优先考虑兼容性
原生 <meter></meter> 外观由浏览器控制，CSS 支持有限：
- 可统一设置宽高、字体等基础样式
- WebKit 内核（Safari、Chrome）支持伪元素：
meter::-webkit-meter-bar { background: #f0f0f0; } meter::-webkit-meter-value { background: #4CAF50; } - Firefox 和 Edge 对伪元素支持弱，甚至不支持；若需强一致性，建议降级为
<div> + CSS 进度条，或用 SVG/Canvas 实现复杂仪表。<p>不复杂但容易忽略。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
