3.8 使用<meter>标记元素
在HTML 5中，可以使用<meter>标记元素实现百分比效果。<meter>是HTML 5中新增的标记，用于表示在一定数量范围中的值，例如投票中各个候选人各占比例情况及考试分数等。<meter>元素仅是帮助浏览器识别HTML中的数量，不对该数量做任何的格式修饰。在<meter>元素中有6个属性，通过这些属性会根据浏览器的特征以最好的方式展示这个数量。
<meter>标记元素的属性信息如表3-4所示。
表3-4 <meter>标记元素的属性信息
“low”“hight”“optimum”这三个属性值的功能是，将<meter>元素展示的测量范围划分为“low”、“medium”以及“high”三个部分，以此来判断该测量的哪个部分是最优的。请读者考虑下面这个<meter>元素：
在上述代码中，最低值可能为0，由“min”表示。但是实际最低为0.1，由“low”表示。最高值可能为1，但实际最高为0.9。
“low”“high”将测量范围【0～1】划分为【0～0.1】（low）、【0.1～0.9】（medium）、【0.9～1】（high）三个范围，“optimum”指明最优位置在1处，此时该值比“high”值大，那么就表示“value”值越大越好；类似的，如果“optimum”值比“low”小，则表示“value”值越小越好；如果“optimum”值落在“low”值与“high”值之间，则表示“value”值不高不低最好。
例如下面的代码演示了此元素的基本用法：
上述代码的执行效果如图3-16所示。
图3-16 执行效果
下面通过一个实例讲解使用<progress>标记元素实现进度条效果的方法。
本实例的功能是，显示两个投票候选人的票数比例。实例文件10.html的代码如下。
在上述代码中，候选人“BBB”所占的比例是百分制中的70，最低比例可能为0，但实际最低为10；最高比例可能为100，但实际最高为90。其实<meter>元素中的数量也可以使用浮点数表示，如上述代码中所示。为了展示这些比例值，可以引入其他的元素，例如本实例中使用了<span>元素展示这些数值。
执行后的效果如图3-17所示。
图3-17 执行效果