HTML meter 语法
在 HTML 中，meter 标签用来表示一个在已知范围内的数值，比如：
- 成绩等级（0 到 100 分）。
- 电池电量（0% 到 100%）。
- 存储空间使用情况。
语法：
<meter min="最小值" max="最大值" value="当前值"></meter>说明：
meter 标签常用属性有以下 3 个。
min：定义最小值，默认值为 0。max：定义最大值，必须大于 min 属性值。value：定义当前值，必须在 min 和 max 之间。
比如下面代码表示当前数值是 70，范围是 0 到 100，相当于 70%。
<meter min="0" max="100" value="70">70%</meter>HTML meter 摘要
| 属于 | HTML 标签 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML meter 示例
接下来，我们通过几个简单的例子来讲解一下 HTML meter 标签是如何使用的。
示例 1：meter 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<meter min="0" max="10" value="8"></meter><br>
<meter min="0" max="100" value="80"></meter>
</body>
</html>页面效果如下图所示。
meter 表示颜色状态
meter 标签不仅仅可以用于显示一个条，它最酷的功能能根据数值来自动变色（绿/黄/红）。比如：电量低于 20% 变红，磁盘占用超过 90% 变红。
如果想要实现这些效果，我们需要配合 low（低值）、high（高值）和 optimum（最佳值）属性来实现。
示例 2：meter 表示颜色状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>电量：<meter min="0" max="100" value="15" low="20" high="80" optimum="100"></meter>（低）</p>
</body>
</html>页面效果如下图所示。
meter 与 progress 的区别
meter 跟 progress 这两个标签非常相似，都是以进度条形式来显示数据比例。不过两者在语义上有很大的区别。
meter：一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。progress：一般用于显示动态数据比例。所谓动态数据，指的是会不断改变的数据，例如下载文件的进度。
