在 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 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.