meter是HTML5新增元素吗,HTML5中meter元素详解

前面我们介绍了HTML5的元素。HTML5的元素和元素经常会被混淆。但他们是不同的元素，在页面中的使用方式也是不同的。这在建站基础知识中也讲到过。

元素用于表示一个标量测量值或一个百分比值。和元素不一样，元素的最小值和最大值在私用前必须要知道，如果为指定，它们会被假设为0和1。

元素当前不能够在IE浏览器和Mobile Safari浏览器中使用。

使用meter元素

为了介绍这个元素，我们来举一个监控选举投票的例子。假设总共有27个席位，获得14个席位为多数赞成方，获得18个以上席位的为绝大多数赞成方。

假设使用元素来表示这次选举投票，每一个被选举方都可以使用一个元素来表示：

红方

max="27">

在大多数浏览器中，元素的外观和特别相似，但它不能动画。

红方

要使元素有效需要设置一个value属性。另外还可以为它添加更多的属性。optimum属性代表"优先"或"特别佳"值。在上面的例子中，可以设置获取14个席位时为optimum。

红方

optimum="14" max="27">

high属性用于表示从不多数，low属性用于表示极少数。

红方

low="2" high="18" max="27">

optimum属性值不一定需要大于low值或小于high值。浏览器会自动根据optimum、high和low属性的值来渲染指示条的外观。例如：

红方

low="2" optimum="14" high="18" max="27">

上面的代码得到下面的结果：

红方

元素也可以像元素一样使用CSS来自定义外观，但是方法要复杂得多，我们将在以后的文章中介绍这方面的内容。

可读性

因为元素在当前的浏览器支持上有所欠缺，而往往它显示的又是一些重要的数据。所以在每一个设备上都可以正常读到这些信息是特别重要的。一个简单的实现方法是在的开标签和闭标签之间放置文本提示信息。

红方

high="18" max="27">19 seats

得到的结果如下：

红方

这种做法有一点像图片的alt属性，在无法显示元素的浏览中会显示这些文字。如果使用屏幕阅读设备，也会阅读这些文字。

在不支持元素的浏览器上，你还可以使用一个js插件来达到元素的效果，如：HTML5-Progress-polyfill和meter-polyfill等插件。

元素和区别

元素和元素经常会被混淆。它们之间的区别主要有以下两点：

元素用于显示某个特定任务的时间进度。这个任务的时间上限是可以确定的值，如播放一段音乐的时间；或者是不可确定的值，如上传一个文件到服务器上。元素的最大值在元素显示时可能是不确定的。例如，完成一个表单提交所需要的进度条。

元素的不同之处在于，它的最小值和最大值必须是确定的。

另外一个区别是，元素的最小值可以是0。而元素的最小值必须是一个浮点数，包括负数，可以想象一下温度计的刻度。