在 HTML 中定義已知範圍內的標量測量
為了在已知範圍內定義標量測量或分數值,我們在 HTML 中使用<meter>標籤。<meter>標籤也稱為量規。對於磁碟使用情況、查詢結果的相關性等,我們在 HTML 中使用<meter>標籤。
<meter>標籤不用於指示進度條,如果要指示進度條,則使用<progress>標籤。為了獲得最佳可訪問性,在使用<meter>標籤時最好使用<label>標籤。
語法
以下是 HTML 中<meter>標籤的使用方法:
<meter value="" min="" max=""></meter>
示例
以下示例中,我們嘗試使用<meter>標籤定義已知範圍內的標量測量:
<!DOCTYPE html> <html> <head> <title>HTML meter Tag</title> </head> <body> <meter value = "6" min = "0" max = "10">6 out of 10</meter> <br /> <p>gauge value can be seen here</p> </body> </html>
在 <meter> 標籤中使用的屬性
在 meter 標籤中使用的屬性如下所示:
form - form 屬性的值為form_id,用於指定<meter>屬於哪個表單。
high - high 屬性的值為數字,用於指定被視為高值的範圍。
low - low 屬性的值為數字,用於指定被視為低值的範圍。
max - max 屬性的值為數字,用於指定範圍的最大值。
min - min 屬性的值為數字,用於指定範圍的最小值,預設情況下最小值為 0。
optimum - optimum 屬性的值為數字,用於指定量規的最佳值。
value - value 屬性的值為數字,並且是必填的,用於指定量規的當前值。
示例
在這些示例中,我們透過向屬性 min、max、low 和 high 傳遞不同的值來建立各種量規:
<!DOCTYPE html> <html> <body> <h1 style="color: blue;"> TutorialsPoint </h1> <p>Meter Element</p> <meter value="5" min="0" max="15" low="1" high="10"></meter> <p>Meter Element With Decimal Value</p> <meter value="0.8" min="0" max="1"></meter> <p> Meter element , value is below low attribute </p> <meter value="1" min="0" max="15" low="3" high="9"></meter> <p> Meter element , value is above high attribute </p> <meter value="10" min="0" max="10" low="3" high="9"></meter> </body> </html>
屬性所滿足的不等式為
min <= value <= max
如果指定了 low:min <= low <= max
如果指定了 high:min <= high <= max
如果指定了 optimum:min <= optimum <= max
如果同時指定了 low 和 high:low <= high
示例
以下為另一個示例:
<!DOCTYPE html> <html lang> <body> <b>Meter without value</b> <meter></meter> <br/><br/> <b>Meter with value</b> <meter value="0.5"></meter> <br/><br/> <b>Meter with value, min and max attribute</b> <meter min="0" max="100" value="15"></meter> <br/><br/> <b>Meter when "min <= value < low"</b> <meter min="0" max="100" value="15" low="30" high="85"></meter> <br/><br/> <b>Meter when "high < value <= max"</b> <meter min="0" max="100" value="80" low="30" high="85"></meter> <br/><br/> <b>Meter when "low <= value <= high"</b> <meter min="0" max="100" value="50" low="30" high="85"></meter> <br/><br/> <b>Meter with optimum attribute</b> <meter min="0" max="100" value="24" low="30" high="85" optimum="80"></meter> <br/><br/> <b>Meter with optimum attribute</b> <meter min="0" max="100" value="80" low="30" high="85" optimum="20"></meter> </body> </html>
廣告
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP