指引网

当前位置: 主页 > 网页制作 > WEB开发 >

HTML5中meter元素详解

来源:网络 作者:佚名 点击: 时间:2017-08-01 21:39
[摘要] 前面我们介绍了HTML5的<progress>元素。HTML5的<progress>元素和<meter>元素经常会被混淆。但他们是不同的元素,……

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

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

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

 使用meter元素

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

假设使用<meter>元素来表示这次选举投票,每一个被选举方都可以使用一个<meter>元素来表示:

红方 <meter id="bogdanovists" value="7" min="0" 
         max="27"> </meter>

在大多数浏览器中,<meter>元素的外观和<progress>非常相似,但它不能动画。

红方 
------分隔线----------------------------