html5版本中新增了很多新標(biāo)簽,今天要介紹的就是其中一個,即meter標(biāo)簽。meter標(biāo)簽由于是html5新增標(biāo)簽,目前IE瀏覽器還不支持,所以用的還不是很多。
“meter”作為英文單詞有“計量器”的意思,那它作為html中的標(biāo)簽又是用來做什么的呢?接下來我們一起來看看html中meter標(biāo)簽的定義及用法吧!
一、meter標(biāo)簽定義及用法
在html中,meter標(biāo)簽是html5版本中新增標(biāo)簽,是使用來定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量(比如:磁盤用量、相關(guān)性等等)。
meter標(biāo)簽的效果很像進(jìn)度條,但是它不作為進(jìn)度條來使用。如果要表示進(jìn)度條,通常使用progress標(biāo)簽。
二、meter標(biāo)簽語法格式
<meter value="值"></meter>
說明:
meter標(biāo)簽是雙標(biāo)簽,但是標(biāo)簽中的內(nèi)容不在瀏覽器中顯示;meter標(biāo)簽的value屬性規(guī)定度量的當(dāng)前值,是必需屬性,其余的屬性是可選屬性;
三、meter標(biāo)簽屬性
value:規(guī)定度量的當(dāng)前值,必需參數(shù);form:規(guī)定meter標(biāo)簽元素所屬的一個或多個表單;high:規(guī)定被視作高的值的范圍;low:規(guī)定被視作低的值的范圍;max:規(guī)定范圍的最大值;min:規(guī)定范圍的最小值;optimum:定度量的優(yōu)化值;
四、實例
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title>html中meter標(biāo)簽的詳細(xì)介紹</title>
</head>
<body style="background-color: bisque;">
<h3>meter標(biāo)簽演示</h3>
十分之七:<meter value="7" min="0" max="10">十分之七</meter><br>
80%:<meter value="0.8">80%</meter>
<h4>IE瀏覽器目前不支持 meter標(biāo)簽</h4>
</body></html
運行結(jié)束:
以上就是關(guān)于meter標(biāo)簽的詳細(xì)介紹,除了各種標(biāo)簽的運用,web前端還有很多知識點需要學(xué)習(xí)。關(guān)注“武漢千鋒”微信公眾號,可獲取更多前端行業(yè)動態(tài)及學(xué)習(xí)資料。
們經(jīng)常見到如圖中的進(jìn)度條,那么這些進(jìn)度條都是怎么是實現(xiàn)的呢?
來看看下面這兩個元素。
1、<meter>:用于表示一個已知最大值和最小值的計數(shù)儀表。比如電池的剩余電量、速度表等。除了可以指定id、style、class、hidden等通用屬性之外,還可以指定下面屬性。
value:指定計數(shù)儀表的當(dāng)前值,默認(rèn)為0,可以為該屬性指定一個浮點小數(shù)值。
min:指定計數(shù)儀表的最小值,默認(rèn)為0,可以為該屬性指定一個浮點小數(shù)值。
max:指定計數(shù)儀表的最大值,默認(rèn)為1,可以為該屬性指定一個浮點小數(shù)值。
low:指定計數(shù)儀表指定范圍的最小值,該屬性值必須大于等于min屬性指定的值。
high:指定計數(shù)儀表指定范圍的最大值,該屬性值必須小于等于max屬性指定的值。
optimum:指定計數(shù)儀表有效范圍的最佳值,如果該值大于high屬性指定的值,則意味著值越大越好;如果該值小于low屬性指定的值,則意味著值越小越好。
2、<progress>:用于表示一個進(jìn)度條,除了id、style、class、hidden這些通用屬性外,還可以指定以下屬性。
max:指定進(jìn)度條完成時的值。
value:指定進(jìn)度條當(dāng)前完成的進(jìn)度值。
例
使用 meter 元素展示給定的數(shù)據(jù)范圍:
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
瀏覽器支持
Firefox、Opera、Chrome 和 Safari 6 支持 <meter> 標(biāo)簽。
標(biāo)簽定義及使用說明
<meter> 標(biāo)簽定義度量衡。僅用于已知最大和最小值的度量。
比如:磁盤使用情況,查詢結(jié)果的相關(guān)性等。
注意: <meter> 不能作為一個進(jìn)度條來使用, 進(jìn)度條 <progress> 標(biāo)簽。
HTML 4.01 與 HTML5 之間的差異
<meter> 是 HTML5 的新標(biāo)簽。
屬性
New:HTML5 新屬性。
屬性 | 值 | 描述 |
---|---|---|
formNew | form_id | 規(guī)定 <meter> 元素所屬的一個或多個表單。 |
highNew | number | 規(guī)定被界定為高的值的范圍。 |
lowNew | number | 規(guī)定被界定為低的值的范圍。 |
maxNew | number | 規(guī)定范圍的最大值。 |
minNew | number | 規(guī)定范圍的最小值。 |
optimumNew | number | 規(guī)定度量的最優(yōu)值。 |
valueNew | number | 必需。規(guī)定度量的當(dāng)前值。 |
全局屬性
<meter> 標(biāo)簽支持全局屬性,查看完整屬性表 HTML全局屬性。
事件屬性
<meter> 標(biāo)簽支持所有 HTML事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。