html meter標(biāo)簽的使用與作用詳解

2020-03-24 19:11:49

字體：大中小

供稿：網(wǎng)友

定義和用法：
meter 標(biāo)簽定義度量（單位）。僅用于已知最大和最小值的度量。

提示和注釋：
注釋：必須定義度量的范圍，既可以在 text 中，也可以在 min/max 屬性中定義。
例子：

 meter min= 0 max= 20 5 /meter  meter 2 out of 10 /meter  meter 30% /meter

meter 標(biāo)簽是HTML5新增的標(biāo)簽，定義度量衡。僅用于已知最大和最小值的度量。也就是必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。

 meter min= 0 max= 20 5 /meter  meter 2 out of 10 /meter  meter 30% /meter

high number 定義度量的值位于哪個(gè)點(diǎn)，被界定為高的值。 low number 定義度量的值位于哪個(gè)點(diǎn)，被界定為低的值。 max number 定義最大值。默認(rèn)值是 1。 min number 定義最小值。默認(rèn)值是 0。 optimum number 定義什么樣的度量值是最佳的值。如果該值高于 high 屬性，則意味著值越高越好。如果該值低于 low 屬性的值，則意味著值越低越好。 html' target='_blank'>value number 定義度量的值。

可以用CSS的偽元素對默認(rèn)的顯示方式處理下（因?yàn)楹芸赡芨鱾€(gè)瀏覽器的顯示方式不一）：

 !doctype html  html lang= en  head  meta charset= UTF-8  title Coolwp.net Demo /title  style  .deal meter { -webkit-appearance: none; }.deal ::-webkit-meter-bar { height: 1em; background: white; border: 1px solid black;.deal ::-webkit-meter-optimum-value { background: green; } /* 好 */.deal ::-webkit-meter-suboptimum-value { background: orange; } /* 湊合 */.deal ::-webkit-meter-even-less-good-value { background: blue; } /* 糟糕 */.deal ::-moz-meter-bar { background: rgba(0,96,0,.6);} /style  /head  body  默認(rèn)的： meter low= 69 high= 80 max= 100 optimum= 100 value= 92 A /meter  meter low= 69 high= 80 max= 100 optimum= 100 value= 72 C /meter  meter low= 69 high= 80 max= 100 optimum= 100 value= 52 E /meter  p >實(shí)際顯示效果：
以上就是html meter標(biāo)簽的使用與作用詳解的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。