meter標簽:
此標簽與progress百分比標簽差不多,它主要表現規定范圍內的數量值,例如磁盤的食用量,對某個候選者人數占總投票人數的比例值等,如下圖:
meter有六個屬性:
屬性名稱
描述
value
在元素中表現出來的實際數量值。該屬性缺省值為0,可以給該屬性指定浮點數小數值。
min
指定規定范圍時允許使用的最小值,該屬性缺省值為0,設置最小值時,值不可小雨0。
max
指定規定范圍時允許使用的最大值,如果設定該屬性值小於min屬性的值,那麼浏覽器會把min設置為最大值。max屬性缺省值為1。
low
規定范圍的下限值,必須小於或等於high屬性的值。同樣的,如果low屬性值小於min屬性值,那麼浏覽器把min屬性的值視為low屬性的值。
high
規定范圍的上限值,如果該屬性值小於low屬性值,那麼把low屬性值視為high屬性值,同樣的,如果該屬性值大於max屬性值,那麼把max屬性值視為high屬性的值。
optimum
設置最佳值,屬性值必須在min屬性值與max屬性值之間,可以大於high屬性值。
案例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5每日一練meter標簽的應用</title>
</head>
<body>
<h1>W3Cfuns-HTML5每日一練meter標簽的應用</h1>
<p>空間剩余大小:<meter min="0" max="1024" value="600">600/1024</meter>600/1024 GB</p>
<p>您的得分是:<meter min="0" max="100" low="60" high="90" optimum="100" value="91">91分</meter>91分</p>
</body>
</html>