View in EnglishAlways switch to English

<meter>：HTML 标量元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.

<meter>HTML 元素表示在已知范围内的标量值或分数值。

尝试一下

<label for="fuel">Fuel level:</label><meter min="0" max="100" low="33" high="66" optimum="80" value="50">  at 50/100</meter>

label {  padding-right: 10px;  font-size: 1rem;}

属性

此元素包含全局属性。

value: 当前数值。如果指定了最小值和最大值（min 属性和max 属性），则必须介于这两个值之间。如果未指定或格式错误，则值为0。如果指定的值不在min 属性和max 属性给定的范围内，则该值等于范围的最近端。
备注：除非value 属性介于0 和1 之间（包括 0 和 1），否则min 和max 属性应定义范围，以便value 属性的值在该范围内。
min: 测量范围的下限。如果指定，该值必须小于最大值（max 属性）。如果未指定，则最小值为0。
max: 测量范围的上限。如果指定，该值必须大于最小值（min 属性）。如果未指定，则最大值为1。
low: 测量范围低档部分的数值上限。该值必须大于最小值（min 属性），如果指定了高档值和最大值（分别为high 属性和max 属性），也必须小于高档值和最大值。如果未指定或小于最小值，low 值等于最小值。
high: 测量范围高档部分的数值下限。该值必须小于最大值（max 属性），且必须大于低档值（low 属性）和最小值（min 属性），如果未指定或大于最大值，则high 值等于最大值。
optimum: 该属性表示最佳数值。必须在min 属性和max 属性定义的范围内。当与low 属性和high 属性一起使用时，它表示范围内哪个位置更合适。例如，如果值介于min 属性和low 属性之间，则认为首选低档范围的。浏览器可能会根据值是否小于或等于最佳值来为仪表条附着不同的颜色。
form: 此可选属性用于显式设置<meter> 元素的<form> 所有者。如果省略，则<meter> 元素将与其<form> 父元素关联，或者与另一个父元素（例如<fieldset>）上的form 属性所设置的表单相关联（如果有的话）。如果包含，则该值必须是同一文档树中的<form> 元素的id。

示例

简单示例

HTML

html

<p>电池电量：<meter min="0" max="100" value="75">75%</meter></p>

结果

高档和低档范围示例

请注意，在此示例中省略了min 属性。这是允许的，因为它的默认值为0。

HTML

html

<p>  学生的考试成绩：<meter min="0" low="50" high="80" max="100" value="84">    84%  </meter></p>

结果

技术概要

内容分类	流式内容、短语内容、可标记内容、可感知内容。
允许的内容	短语内容，但它的后代元素中不能有`<meter>` 元素。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受短语内容的元素。
隐含的 ARIA 角色	`meter`
允许的 ARIA 角色	没有允许的`role`
DOM 接口	`HTMLMeterElement`