<meter>：HTML 标量元素

尝试一下

<label for="fuel">Fuel level:</label>

<meter id="fuel" 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

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

结果

高档和低档范围示例

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

HTML

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

结果

技术概要

规范

浏览器兼容性

参见

• 创建垂直表单控件
• <progress>
• ::-webkit-meter-bar、::-webkit-meter-inner-element、::-webkit-meter-even-less-good-value、::-webkit-meter-optimum-value、::-webkit-meter-suboptimum-value：非标准的伪元素