HTML
<meter>
element
represents either a scalar value within a known range or a fractional value.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| 内容类别 | 流内容 , 措词内容 , labelable content, palpable content. |
|---|---|
| 准许内容 |
措词内容
, but there must be no
<meter>
element among its descendants.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 . |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLMeterElement
|
此元素包括 全局属性 .
value
min
attribute and
max
attribute) if they are specified. If unspecified or malformed, the value is
0
. If specified, but not within the range given by the
min
attribute and
max
attribute, the value is equal to the nearest end of the range.
注意：
除非
value
attribute is between
0
and
1
(inclusive), the
min
and
max
attributes should define the range so that the
value
attribute's value is within it.
min
max
attribute), if specified. If unspecified, the minimum value is
0
.
max
min
attribute), if specified. If unspecified, the maximum value is
1
.
low
min
attribute), and it also must be less than the high value and maximum value (
high
attribute and
max
attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the
low
value is equal to the minimum value.
high
max
attribute), and it also must be greater than the low value and minimum value (
low
attribute and
min
attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the
high
value is equal to the maximum value.
optimum
min
attribute and
max
attribute). When used with the
low
attribute and
high
attribute, it gives an indication where along the range is considered preferable. For example, if it is between the
min
attribute and the
low
attribute, then the lower range is considered preferred. The browser may color the meter's bar differently depending on whether the value is less than or equal to the optimum value.
form
<form>
element to associate the
<meter>
element with (its
form owner
). The value of this attribute must be the
id
的
<form>
in the same document. If this attribute is not set, the
<meter>
is associated with its ancestor
<form>
element, if any. This attribute is only used if the
<meter>
element is being used as a form-associated element, such as one displaying a range corresponding to an
<input type="number">
.
<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
On Google Chrome, the resulting meter looks like this:
Note that in this example the
min
attribute is omitted. This is allowed, as it will default to
0
.
<p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
On Google Chrome, the resulting meter looks like this:
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<meter>' in that specification. |
实时标准 | |
|
HTML5
The definition of '<meter>' in that specification. |
推荐 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
meter
|
Chrome 完整支持 6 | Edge 完整支持 ≤18 | Firefox 完整支持 16 | IE 不支持 No | Opera 完整支持 11 | Safari 完整支持 6 | WebView Android 不支持 No | Chrome Android 完整支持 18 | Firefox Android 完整支持 16 | Opera Android 完整支持 11 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 1.0 |
form
|
Chrome 完整支持 6 | Edge 完整支持 ≤18 | Firefox 完整支持 16 | IE 不支持 No | Opera 完整支持 11 | Safari 完整支持 6 | WebView Android 不支持 No | Chrome Android 完整支持 18 | Firefox Android 完整支持 16 | Opera Android 完整支持 11 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 1.0 |
high
|
Chrome 完整支持 6 | Edge 完整支持 ≤18 | Firefox 完整支持 16 | IE 不支持 No | Opera 完整支持 11 | Safari 完整支持 6 | WebView Android 不支持 No | Chrome Android 完整支持 18 | Firefox Android 完整支持 16 | Opera Android 完整支持 11 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 1.0 |
low
|
Chrome 完整支持 6 | Edge 完整支持 ≤18 | Firefox 完整支持 16 | IE 不支持 No | Opera 完整支持 11 | Safari 完整支持 6 | WebView Android 不支持 No | Chrome Android 完整支持 18 | Firefox Android 完整支持 16 | Opera Android 完整支持 11 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 1.0 |
max
|
Chrome 完整支持 6 | Edge 完整支持 ≤18 | Firefox 完整支持 16 | IE 不支持 No | Opera 完整支持 11 | Safari 完整支持 6 | WebView Android 不支持 No | Chrome Android 完整支持 18 | Firefox Android 完整支持 16 | Opera Android 完整支持 11 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 1.0 |
min
|
Chrome 完整支持 6 | Edge 完整支持 ≤18 | Firefox 完整支持 16 | IE 不支持 No | Opera 完整支持 11 | Safari 完整支持 6 | WebView Android 不支持 No | Chrome Android 完整支持 18 | Firefox Android 完整支持 16 | Opera Android 完整支持 11 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 1.0 |
optimum
|
Chrome 完整支持 6 | Edge 完整支持 ≤18 | Firefox 完整支持 16 | IE 不支持 No | Opera 完整支持 11 | Safari 完整支持 6 | WebView Android 不支持 No | Chrome Android 完整支持 18 | Firefox Android 完整支持 16 | Opera Android 完整支持 11 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 1.0 |
value
|
Chrome 完整支持 6 | Edge 完整支持 ≤18 | Firefox 完整支持 16 | IE 不支持 No | Opera 完整支持 11 | Safari 完整支持 6 | WebView Android 不支持 No | Chrome Android 完整支持 18 | Firefox Android 完整支持 16 | Opera Android 完整支持 11 | Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 1.0 |
完整支持
不支持
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>