零基础建站培训介绍

当前位置:

HTML5中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>特别相似,但它不能动画。

红方 

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


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

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

红方 <meter id="bogdanovists" value="7" min="0" optimum="14" 
         low="2" high="18" max="27"> </meter>

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


红方 <meter id="bogdanovists" value="19" min="0"
         low="2" optimum="14" high="18" max="27"> </meter>

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

红方 

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

 可读性

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


红方 <meter id="bogdanovists" value="1" min="0" low="2" optimum="14"
         high="18" max="27">19 seats</meter>

得到的结果如下:

红方 

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

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

<progress>元素和<meter>区别

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

  • <progress>元素用于显示某个特定任务的时间进度。这个任务的时间上限是可以确定的值,如播放一段音乐的时间;或者是不可确定的值,如上传一个文件到服务器上。<progress>元素的最大值在元素显示时可能是不确定的。例如,完成一个表单提交所需要的进度条。
  • <meter>元素的不同之处在于,它的最小值和最大值必须是确定的。

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

上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 制作手机版网站的时候,除了页面简洁、操作方便等访问者可以看到的地方以外,就是 Meta 标签的设置,合理设置 Meta 标签 对手机版网站的搜索引擎优化
  • HTML5新增标签及含义 (15298 次浏览)
    HTML5较以前的HTML版本,增加了很多的标签:属性值描述autoplayautoplay如果出现该属性,则视频在就绪后马上播放。contr
  • header元素nav元素article元素section元素aside元素<footer> 标签time元素<audio> 标签<canvas> 标签<command> 标签<data
  • HTML5中meter元素详解 (14778 次浏览)
    前面我们介绍了HTML5的<progress>元素。HTML5的<progress>元素和<meter>元素经常会被混淆。但他们是不同的元素,在页面中的使用方
  • html元素标签属性大全 (115069 次浏览)
    什么是HTML属性每个HTML元素都可以给它添加一些属性,让它成为我们做网站时需要的样子。例如一段文字,我们可以给它添加属性,使这段文字变成红色,
  • 问题:在HTML中元素分为块状元素和行内元素,块状元素的外边距和内边距我们分别使用margin\padding属性来设置,那么行内元素可以设置margin\paddi
  • Part I 这种选择器的共同特征:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用CSS3中共有11种UI元素状态伪类选择器: