directory search
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
characters

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

Previous article: Next article: