diff options
Diffstat (limited to 'files/zh-tw/web/html/element/meter/index.html')
| -rw-r--r-- | files/zh-tw/web/html/element/meter/index.html | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/files/zh-tw/web/html/element/meter/index.html b/files/zh-tw/web/html/element/meter/index.html new file mode 100644 index 0000000000..3043891ff8 --- /dev/null +++ b/files/zh-tw/web/html/element/meter/index.html @@ -0,0 +1,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> |