3.6.1 <meter>元素的基本特性

单词meter直译意思是“计量器”“计量表”，因此，在Web中，任何与丈量相关且需要分阶段提示的场景都非常适合使用<meter>元素。

例如，汽车油箱剩余油量、降雨量、风度、温度、游戏中人物角色的血量等。

先看下面一段代码：

此时，在Chrome浏览器下就会有图3-44所示的效果（不同的操作系统和不同版本的Chrome下的效果可能会有所不同），从上往下进度部分的颜色分别是红、黄、绿。

上述示意代码中出现了6个HTML属性，正好涵盖了<meter>元素所有的常用属性。

属性简介

· min和max属性表示数值范围，默认为0或1。也就是说，如果min属性不做设置，则默认为0；如果max属性不做设置，则默认为1。

· value表示当前的值，默认为0。

· low和high是比较特殊的HTML属性，目前仅出现在<meter>元素上，表示警戒值，其中low表示过低警戒值，high表示过高警戒值。

但是，大家务必注意，是过低还是过高、是否需要警戒值还需要一个属性进行判定，那就是optimum属性。

optimum属性表示最佳值，用来决定过低值和过高值是正常还是属于异常，这个属性很重要，也是学习<meter>元素的难点。

对optimum属性的作用表现描述如下。

· 如果optimum属性值在low和high之间，则说明low和high都是警戒值，只有在这个区间范围内的值才是正常的，因此，最终的色值状态只有两个，即橙色警戒和绿色正常。

代码示意：

效果如图3-45所示，最多只会出现两种颜色。

· 如果optimum属性值比low小，则说明low不是警戒值，而是推荐值，也就是值越小安全性反而越高，此时，low-high之间的范围就属于警戒范围，而超过high的值就属于危险范围了。

于是，最终<meter>元素可以有3段色值状态，HTML代码示意如下：

效果如图3-46所示，出现了三种颜色。

· 如果optimum属性值比high大，也会出现3段色值状态，此时，大于high的值会被认为是正常的，因此表现为绿色，这个效果就是一开始提到的密码强度对应的效果，代码示意：

效果如图3-47所示，依次出现了红、黄、绿三种颜色。

回到一开始提到的密码强度效果，由于密码强度越强越好，因此，很显然需要设置optimum属性值比high大。

但是，我们需要的是图3-48这样的效果，需要明显分段，而浏览器默认的<meter>元素效果就是一个色条，不符合产品需求，所以我们还需要对<meter>元素的外观进行自定义。