?
This document uses PHP Chinese website manual Release
HTML <meter>元素用來顯示已知范圍的標(biāo)量值或者分?jǐn)?shù)值。
內(nèi)容類別 | Flow content, phrasing content, labelable content, palpable content. |
|---|---|
允許的內(nèi)容 | Phrasing content ，但其后代中不得有<meter>元素。 |
標(biāo)記遺漏 | 沒有，起始和結(jié)束標(biāo)簽都是強制性的。 |
允許父級 | 任何接受短語內(nèi)容的元素。 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLMeterElement |
屬性
這個元素包含全局屬性。
value當(dāng)前的數(shù)值。如果設(shè)置了最小值和最大值（分別由min屬性和max屬性定義），它必須介于最小值和最大值之間。如果沒有指定或者格式有誤，值即為0.如果給定的值不在最小值和最大值之間，它的值就等于它最接近的一端的值。
使用說明: 除非值域在0到1（閉區(qū)間）, 否則最小值和最大值屬性需要定義，以保證value屬性在值域范圍內(nèi)。換言之，默認(rèn)的min和max值分別為0和1。
min值域的最小邊界值。如果設(shè)置了，它必須比最大值要小。如果沒設(shè)置，默認(rèn)為0。
max值域的上限邊界值。如果設(shè)置了，它必須比最小值要大。如果沒設(shè)置，默認(rèn)為1。
low定義了低值區(qū)間的上限值（譯者注：如果value介于min和low之間，該元素就會表現(xiàn)出低值的視覺效果，value落在[min,low]、[high,max]等不同的區(qū)間會使瀏覽器渲染該元素時出不同的視覺效果）。如果設(shè)置了，它必須比最小值屬性大，并且不能超過high值和最大值。未設(shè)置或者比最小值還要小時，其值即為最小值。
high定義了高值區(qū)間的下限值。如果設(shè)置了，它必須小于最大值，同時必須大于low值和最小值。如果沒有設(shè)置，或者比最大值還大，其值即為最大值。
optimum這個屬性用來指示最優(yōu)/最佳取值。它必須在正確的值域內(nèi)（由最小值屬性和最大值屬性定義）。當(dāng)使用了low和high屬性時，它指明哪一個取值范圍是更好的。例如，假設(shè)它介于最小值和low之間，那么lower區(qū)間就被認(rèn)為是更佳的取值范圍。
form該屬性將本元素與對應(yīng)的form元素關(guān)聯(lián)。例如，一個計量器可能用來顯示某個數(shù)值輸入框（input元素，number類型）的范圍。只有當(dāng)計量器元素被用作表單關(guān)聯(lián)的元素時，該屬性才應(yīng)當(dāng)被使用；即便如此，如果它作為表單的后代元素出現(xiàn)，它仍然有可能被省略。
示例
簡單的例子
HTML內(nèi)容
<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
輸出
在Google Chrome瀏覽器上, 計量器結(jié)果如下:
高和低范圍的例子
注意本例中min屬性被省略，這是允許的，默認(rèn)值為0。
HTML content
<p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
Output
在谷歌瀏覽器上，計量器顯示效果如下:
規(guī)范
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 |