meter
<meter>
HTML <meter>元素用来显示已知范围的标量值或者分数值。
内容类别 | Flow content, phrasing content, labelable content, palpable content. |
---|---|
允许的内容 | Phrasing content ,但其后代中不得有<meter>元素。 |
标记遗漏 | 没有,起始和结束标签都是强制性的。 |
允许父级 | 任何接受短语内容的元素。 |
允许ARIA角色 | 没有 |
DOM界面 | HTMLMeterElement |
属性
这个元素包含全局属性。
value
当前的数值。如果设置了最小值和最大值(分别由min属性和max属性定义),它必须介于最小值和最大值之间。如果没有指定或者格式有误,值即为0.如果给定的值不在最小值和最大值之间,它的值就等于它最接近的一端的值。
使用说明:
除非值域在0到1(闭区间), 否则最小值和最大值属性需要定义,以保证value属性在值域范围内。换言之,默认的min和max值分别为0和1。
min
值域的最小边界值。如果设置了,它必须比最大值要小。如果没设置,默认为0。
示例
简单的例子
HTML内容
<p>Heat the oven to <meter min="200" max="500"
value="350">350 degrees</meter>.</p>
输出
在Google Chrome浏览器上, 计量器结果如下:
高和低范围的例子
注意本例中min属性被省略,这是允许的,默认值为0。
HTML content
<p>He got a <meter low="69" high="80" max="100"
value="84">B</meter> on the exam.</p>
Output
在谷歌浏览器上,计量器显示效果如下:
规范
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of '<meter>' in that specification. | Living Standard | |
HTML5The definition of '<meter>' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | 6 | (Yes) | 16 | No | 11 | 5.2 |
form | 6 | (Yes) | 16 | No | 11 | 5.2 |
high | 6 | (Yes) | 16 | No | 11 | 5.2 |
low | 6 | (Yes) | 16 | No | 11 | 5.2 |
max | 6 | (Yes) | 16 | No | 11 | 5.2 |
min | 6 | (Yes) | 16 | No | 11 | 5.2 |
optimum | 6 | (Yes) | 16 | No | 11 | 5.2 |
value | 6 | (Yes) | 16 | No | 11 | 5.2 |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | No | ? | (Yes) | 16 | No | 11 | No |
form | No | ? | (Yes) | 16 | No | 11 | No |
high | No | ? | (Yes) | 16 | No | 11 | No |
low | No | ? | (Yes) | 16 | No | 11 | No |
max | No | ? | (Yes) | 16 | No | 11 | No |
min | No | ? | (Yes) | 16 | No | 11 | No |
optimum | No | ? | (Yes) | 16 | No | 11 | No |
value | No | ? | (Yes) | 16 | No | 11 | No |