?
このドキュメントでは、 php中國(guó)語(yǔ)ネットマニュアル リリース
HTML <meter>元素用來(lái)顯示已知范圍的標(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)簽都是強(qiáng)制性的。 |
允許父級(jí) | 任何接受短語(yǔ)內(nèi)容的元素。 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLMeterElement |
這個(gè)元素包含全局屬性。
value
當(dāng)前的數(shù)值。如果設(shè)置了最小值和最大值(分別由min屬性和max屬性定義),它必須介于最小值和最大值之間。如果沒有指定或者格式有誤,值即為0.如果給定的值不在最小值和最大值之間,它的值就等于它最接近的一端的值。
使用說(shuō)明: 除非值域在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之間,該元素就會(huì)表現(xiàn)出低值的視覺效果,value落在[min,low]、[high,max]等不同的區(qū)間會(huì)使瀏覽器渲染該元素時(shí)出不同的視覺效果)。如果設(shè)置了,它必須比最小值屬性大,并且不能超過(guò)high值和最大值。未設(shè)置或者比最小值還要小時(shí),其值即為最小值。
high
定義了高值區(qū)間的下限值。如果設(shè)置了,它必須小于最大值,同時(shí)必須大于low值和最小值。如果沒有設(shè)置,或者比最大值還大,其值即為最大值。
optimum
這個(gè)屬性用來(lái)指示最優(yōu)/最佳取值。它必須在正確的值域內(nèi)(由最小值屬性和最大值屬性定義)。當(dāng)使用了low和high屬性時(shí),它指明哪一個(gè)取值范圍是更好的。例如,假設(shè)它介于最小值和low之間,那么lower區(qū)間就被認(rèn)為是更佳的取值范圍。
form
該屬性將本元素與對(duì)應(yīng)的form元素關(guān)聯(lián)。例如,一個(gè)計(jì)量器可能用來(lái)顯示某個(gè)數(shù)值輸入框(input元素,number類型)的范圍。只有當(dāng)計(jì)量器元素被用作表單關(guān)聯(lián)的元素時(shí),該屬性才應(yīng)當(dāng)被使用;即便如此,如果它作為表單的后代元素出現(xiàn),它仍然有可能被省略。
<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
在Google Chrome瀏覽器上, 計(jì)量器結(jié)果如下:
注意本例中min屬性被省略,這是允許的,默認(rèn)值為0。
<p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
在谷歌瀏覽器上,計(jì)量器顯示效果如下:
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 |