在 HTML 中定义已知范围内的标量测量

htmlfront end technologyweb development更新于 2025/8/14 3:56:17

要在已知范围内或分数值定义标量测量，我们在 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 − optimal 属性的值是数字，用于指定仪表的最佳值。
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>

包含这些属性的不等式如下

最小值 <= 值 <= 最大值
如果指定了低值:最小值 <= 低值 <= 最大值
如果指定了高值:最小值 <= 高值 <= 最大值
如果指定了最优值:最小值 <= 最优值 <= 最大值
如果同时指定了低值和高值:低值 <= 高值

示例

以下是另一个示例 −

<!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>