HTML5 <meter>标签详解

2010年12月14日 13:50 by:译名

<meter>是HTML5的新标签;W3C的只是给了个大概的定义,并没有给出详细的解释,通过其它资料找到了更详细的解释:

meter标签用来表示范围已知,且可度量的等级标量或分数值,例如磁盘使用量比例、关键词匹配程度等。

需要注意的是,<meter>不可以用来表示那些没有已知范围的任意值,例如重量、高度,除非已经设定了它们值的范围。

<meter>标签有6个属性:

Value:表示当前的实际值;如果不做指定,那么<meter>标签中的第一个数字就会被认为是其当前实际值,例如<meter>2 out of 10</meter>中的“2”;如果标签内没有数字,那么标量的实际值就是0。

Min:当前的最小值;如不做指定则为0。

Max:当前的最大值;如不做指定则为1;如果指定的最大值小于最小值,那么最小值会被认为是最大值。

Low:当前的低值区;必须小于或等于max值;如果低值区数字小于最小值,那么它会被认为是最小值。

High:当前的高值区。

Optimum:最佳值;其范围在最小值与最大值区间当中,并且可以处于高值区。

HTML5 meter标签的代码范例:

不设定任何属性的状况:

<p>Your score is:  <meter>2 out of 10</meter></p>

最大值与最小值的属性设定:

<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>

低值区、高值区和最佳值的属性设定:

<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

不设定任何属性的时候,也可以使用百分比及分数形式,<meter>的最大值会被认为是100%或1,例如:

<meter>80%</meter>
<meter>3/4</meter>

下面这段代码可以用作节日倒计时:

<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>

<meter>标签对于价格的标注:

<dl>
  <dt>Target</dt>
  <dd><meter min="145" value="145" title="pounds">£145</meter></dd>
  <dt>Amount raised so far</dt>
  <dd><meter min="0" max="1000" low="50" high="125" value="145" optimum="145" title="pounds">£145</meter></dd>
</dl>

<meter>标签中的内容可以不包含任何数字,这时最大值会被认为是1;可以参考以下的代码及实际效果截图:

<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>

浏览器对<meter>的支持

...Safari 4,Firefox 3.5,Chrome 2,Opera 9.64原生支持<meter>标签;对于我就不多说了,凡是大家认为好的东西都不支持,IE6,7,8,需要以下条件注释来引入html5shiv

<!--[if IE]>
  <script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

标签:meter标签