1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
---
title: <meter>
slug: Web/HTML/Element/meter
translation_of: Web/HTML/Element/meter
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><meter>元素用来显示已知范围的标量值或者分数值。</code></strong> </p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, labelable content, palpable content.</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>, but there must be no <code><meter></code> element among its descendants.</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>None</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLMeterElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<p>该元素包含所有的<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>.</p>
<dl>
<dt>{{htmlattrdef("value")}}</dt>
<dd>当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0.如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。
<div class="note"><strong>使用备注：</strong>除非值域在 0 到 1（闭区间）, 否则最小值和最大值属性需要定义，以保证 value 属性在值域范围内。换言之，默认的 min 和 max 值分别为 0 和 1。</div>
</dd>
<dt>{{htmlattrdef("min")}}</dt>
<dd>值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0。</dd>
<dt>{{htmlattrdef("max")}}</dt>
<dd>值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1。</dd>
<dt>{{htmlattrdef("low")}}</dt>
<dd>定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。</dd>
<dt>{{htmlattrdef("high")}}</dt>
<dd>定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。</dd>
<dt>{{htmlattrdef("optimum")}}</dt>
<dd>这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。</dd>
<dt>{{htmlattrdef("form")}}</dt>
<dd>该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。</dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="简单例子">简单例子</h3>
<h4 id="HTML_content">HTML content</h4>
<pre class="brush: html"><p>Heat the oven to <meter min="200" max="500"
value="350">350 degrees</meter>.</p>
</pre>
<h4 id="输出">输出</h4>
<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p>
<p>在 Google Chrome 浏览器上，计量器结果如下：</p>
<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>
<h3 id="高低值区间示例">高低值区间示例</h3>
<p>注意本例中 min 属性被省略，这是允许的，默认值为 0。</p>
<h4 id="HTML_content_2">HTML content</h4>
<pre class="brush: html"><p>He got a <meter low="69" high="80" max="100"
value="84">B</meter> on the exam.</p>
</pre>
<h4 id="输出_2">输出</h4>
<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p>
<p>Google Chrome 浏览器中，计量器显示效果如下：</p>
<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '<meter>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Edge</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>6.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("16.0")}}</td>
<td>{{CompatNo}}</td>
<td>20<sup>[1]</sup></td>
<td>11.0</td>
<td>5.2</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Edge Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("16.0")}}</td>
<td>{{CompatNo}}</td>
<td>20<sup>[1]</sup></td>
<td>11.0</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] See the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/meterelement">Microsoft Edge Platform Status page</a>.</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{HTMLElement("progress")}}</li>
</ul>
|
