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
|
---
title: <meter>
slug: Web/HTML/Element/meter
translation_of: Web/HTML/Element/meter
---
<h2 id="摘要">摘要</h2>
<p><strong>HTML <code><meter></code> Element</strong> represents either a scalar value within a known range or a fractional value.</p>
<div class="note"><strong>Usage note: </strong>Unless the <strong>value</strong> attribute is between 0 and 1 (inclusive), the <strong>min</strong> attribute and <strong>max</strong> attribute should define the range so that the <strong>value</strong> attribute's value is within it.</div>
<ul class="htmlelt">
<li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, labelable content, palpable content.</li>
<li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>, but there must be no <code><meter></code> element among its descendants.</li>
<li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
<li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
<li><dfn>DOM interface</dfn> {{domxref("HTMLMeterElement")}}</li>
</ul>
<h2 id="屬性">屬性</h2>
<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<dl>
<dt>{{htmlattrdef("value")}}</dt>
<dd>The current numeric value. This must be between the minimum and maximum values (<strong>min</strong> attribute and <strong>max</strong> attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the <strong>min</strong> attribute and <strong>max</strong> attribute, the value is equal to the nearest end of the range.</dd>
<dt>{{htmlattrdef("min")}}</dt>
<dd>The lower numeric bound of the measured range. This must be less than the maximum value (<strong>max</strong> attribute), if specified. If unspecified, the minimum value is 0.</dd>
<dt>{{htmlattrdef("max")}}</dt>
<dd>The upper numeric bound of the measured range. This must be greater than the minimum value (<strong>min</strong> attribute), if specified. If unspecified, the maximum value is 1.</dd>
<dt>{{htmlattrdef("low")}}</dt>
<dd>The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (<strong>min</strong> attribute), and it also must be less than the high value and maximum value (<strong>high</strong> attribute and <strong>max</strong> attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the <strong>low</strong> value is equal to the minimum value.</dd>
<dt>{{htmlattrdef("high")}}</dt>
<dd>The lower numeric bound of the high end of the measured range. This must be less than the maximum value (<strong>max</strong> attribute), and it also must be greater than the low value and minimum value (<strong>low</strong> attribute and <strong>min</strong> attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the <strong>high</strong> value is equal to the maximum value.</dd>
<dt>{{htmlattrdef("optimum")}}</dt>
<dd>This attribute indicates the optimal numeric value. It must be within the range (as defined by the <strong>min</strong> attribute and <strong>max</strong> attribute). When used with the <strong>low</strong> attribute and <strong>high</strong> attribute, it gives an indication where along the range is considered preferable. For example, if it is between the <strong>min</strong> attribute and the <strong>low</strong> attribute, then the lower range is considered preferred.</dd>
<dt>{{htmlattrdef("form")}}</dt>
<dd>This attribute associates the element with a <code>form</code> element that has ownership of the <code>meter</code> element. For example, a <code>meter</code> might be displaying a range corresponding to an <code>input</code> element of <strong>type</strong> <em>number</em>. This attribute is only used if the <code>meter</code> element is being used as a form-associated element; even then, it may be omitted if the element appears as a descendant of a <code>form</code> element.</dd>
</dl>
<h2 id="範例">範例</h2>
<h3 id="Simple_example" name="Simple_example">Simple example</h3>
<pre class="brush: html"><p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
</pre>
<p>On Google Chrome, the resulting meter looks like this:</p>
<p><img alt="meter1.png" class="internal default" src="/@api/deki/files/4940/=meter1.png"></p>
<h3 id="Hilo_Range_example" name="Hilo_Range_example">高/低範圍範例</h3>
<p>Note that in this example the <strong>min</strong> attribute is omitted; this is allowed, as it will default to 0.</p>
<pre class="brush: html"><p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
</pre>
<p>On Google Chrome, the resulting meter looks like this:</p>
<p><img alt="meter2.png" class="internal default" src="/@api/deki/files/4941/=meter2.png"></p>
<h2 id="Specifications" name="Specifications">詳述</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">規格</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'the-button-element.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> </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>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>6.0</td>
<td>{{CompatGeckoDesktop("16.0")}} {{bug(555985)}}</td>
<td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("16.0")}} {{bug(555985)}}</td>
<td>{{CompatNo}}</td>
<td>11.0</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>{{HTMLElement("progress")}}</li>
</ul>
<p>{{HTMLRef}}</p>
|
