HTML <meter> 标签用于呈现给定范围内的数据。它可以表示已知范围内的标量值或分数值。这是 HTML5 中包含的新标签。
语法
<meter>.....</meter>
属性
<meter> 标签支持 HTML 的 全局属性 和 事件属性。下面列出了一些特定属性:
属性 | 值 | 描述 |
---|---|---|
value | number | 定义当前值的数字。 |
form | form_id | 定义指定元素属于哪种形式的form_id。 |
high | number | 保留一个定义高值的数字。 |
low | number | 保留一个定义低值的数字。 |
max | number | 定义用于测量的最大值。 |
min | number | 定义用于设置的最小值。 |
Optimum | number | 定义用于设置的最佳值。 |
<meter> 标签示例
在以下示例中,我们将看到用例,在哪里以及如何使用 <meter> 标签 来表示数据。
使用<meter> 创建燃油油位
在以下示例中,我们借助 <meter> 标签创建燃油油位。
<!DOCTYPE html>
<html>
<body>
<label>Fuel level:</label>
<meter min="0" max="100"
low="35" high="70"
optimum="80" value="50">
</meter>
</body>
</html>
使用<meter> 创建光盘使用情况
考虑以下示例,我们显示光盘使用量给定范围内的标量值。
<!DOCTYPE html>
<html>
<body>
<h1>HTML meter Element</h1>
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="5" min="0" max="10">2 out of 10</meter>
<br>
<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.8">100%</meter>
</body>
</html>
支持的浏览器
浏览器 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<meter> | 8.0 | 13.0 | 16.0 | 6.0 | 11.5 |