meter标签用于表示已知范围内的标量值，如分数、容量等，语法为，支持low、high和optimum属性以实现区间颜色提示，适用于成绩、磁盘使用率等静态测量场景，不用于动态进度展示。
HTML5 提供了 meter 标签，专门用于表示某个已知范围内的标量值，比如进度、分数、容量等。它非常适合用来实现度量条功能，例如显示考试得分、磁盘使用率或任务完成度。
什么是 meter 标签？
meter 元素表示一个标量测量值，且该值处于已知的最大值和最小值之间。它不适用于表示进度（如加载进度），进度应使用 progress 标签。而 meter 更适合展示像“得分：85/100”这类静态测量值。
基本语法如下：
常用属性说明：
立即学习“前端免费学习笔记（深入）”；
- value：必需，表示当前的测量值
- min：最小值，默认为 0
- max：最大值，默认为 1
- low：定义“低”值范围的上限
- high：定义“高”值范围的下限
- optimum：最佳值，影响浏览器对颜色的渲染（绿色表示接近最佳，红色表示远离）
简单示例：显示考试成绩
以下是一个用 meter 显示学生成绩的例子：
浏览器会显示一个度量条，填充到 85% 的位置，直观反映成绩水平。
结合 low、high 和 optimum 实现智能颜色提示
通过设置 low、high 和 optimum，可以让浏览器自动调整度量条颜色：
在这个例子中：
- 0–40：低区间（通常显示为红色）
- 40–80：中等区间（黄色）
- 80–100：高区间（绿色）
- optimum=100 表示越高越好，所以 90 接近最佳，显示为绿色
不同浏览器对颜色的渲染略有差异，但语义一致。
实际应用场景建议
适用场景包括：
- 用户评分展示（如 4.5/5 星）
- 磁盘使用率、电量百分比
- 测试得分、问卷结果
- 投票比例显示
注意：不要用 meter 表示动态加载进度，应使用 progress 标签替代。
基本上就这些。meter 标签语义清晰，使用简单，配合 CSS 可进一步美化样式，是实现度量条功能的理想选择。
