資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 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>
更新於： 2023年10月10日
196 次檢視
廣告