HTML - meter 标签

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

打印本页