meter标签_html/css_WEB-ITnose-html教程-PHP中文网

meter标签_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:47:47

原创

1836人浏览过

meter

meter元素标签用来表示范围已知且可度量的等级标量或分数值，如磁盘使用量比例、关键词匹配程度等。需要注意的是，meter不可以用来表示那些没有已知范围的任意值，例如重量、高度，除非已经设定了它们值的范围。meter元素共有6个属性：

Value：表示当前标量的实际值；如果不做指定，那么meter标签中的第一个数字就会被认为是其当前实际值，例如2 out of 10中的“2”；如果标签内没有数字，那么标量的实际值就是0。
Min：当前标量的最小值；如不做指定则为0。
Max：当前标量的最大值；如不做指定则为1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。
Low：当前标量的低值区；必须小于或等于标量的高值区数字；如果低值区数字小于标量最小值，那么它会被认为是最小值。
High：当前标量的高值区。
Optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区。
来看一些代码范例；首先，不设定任何属性的状况：

<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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

登录后复制

增加了低值区、高值区和最佳值的属性设定：

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

登录后复制

这时meter的最大值会被认为是100%或1。

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

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

登录后复制

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>

登录后复制

HTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,output

HTML meter 标签