首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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。

max值域的上限边界值。如果设置了,它必须比最小值要大。如果没设置,默认为1。

low定义了低值区间的上限值(译者注:如果value介于min和low之间,该元素就会表现出低值的视觉效果,value落在[min,low]、[high,max]等不同的区间会使浏览器渲染该元素时出不同的视觉效果)。如果设置了,它必须比最小值属性大,并且不能超过high值和最大值。未设置或者比最小值还要小时,其值即为最小值。

high定义了高值区间的下限值。如果设置了,它必须小于最大值,同时必须大于low值和最小值。如果没有设置,或者比最大值还大,其值即为最大值。

optimum这个属性用来指示最优/最佳取值。它必须在正确的值域内(由最小值属性和最大值属性定义)。当使用了low和high属性时,它指明哪一个取值范围是更好的。例如,假设它介于最小值和low之间,那么lower区间就被认为是更佳的取值范围。

form该属性将本元素与对应的form元素关联。例如,一个计量器可能用来显示某个数值输入框(input元素,number类型)的范围。只有当计量器元素被用作表单关联的元素时,该属性才应当被使用;即便如此,如果它作为表单的后代元素出现,它仍然有可能被省略。

示例

简单的例子

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

扫码关注腾讯云开发者

领取腾讯云代金券