表单中的meter标签有什么用？如何显示度量值？-html教程-PHP中文网

<meter> 标签的主要作用是显示已知范围内的度量值，用于展示静态的、有上下限的数值状态，如硬盘使用率或考试成绩占比，而非任务进度（那是 <progress> 的用途）；它通过 value、min 和 max 属性定义当前值和范围，并可结合 low、high 和 optimum 属性提供语义上下文，帮助浏览器和辅助技术判断数值所处区间（低、高或理想状态），从而在视觉上以不同颜色呈现；例如 <meter value="75" min="0" max="100" low="40" high="80" optimum="90">75%</meter> 表示当前值为75，在0-100范围内，低于40为不佳，高于80为良好，90为最佳，浏览器会据此渲染颜色；与 <progress> 的区别在于语义：<meter> 表示静态度量（如油表剩余油量），而 <progress> 表示动态任务进度（如文件下载完成百分比），正确使用有助于可访问性；css 自定义样式较复杂，因浏览器渲染差异大且涉及 shadow dom，可通过伪元素如 ::-webkit-meter-bar 和 -moz-meter-bar 等设置背景与填充色，但跨浏览器一致性难保证，有时开发者会选择用 div 模拟以获得更精确控制；low、high 和 optimum 属性赋予数值语义意义，如硬盘空间示例中 value="850" 超过 high="900" 可能触发警告色，考试分数中 value="75" 处于中等区间，温度场景中 value="15" 低于 low="18" 表示过冷，这些属性使屏幕阅读器能更好传达状态，提升可访问性，因此合理设置它们能让 <meter> 更具语义价值。

表单中的meter标签有什么用？如何显示度量值？

表单中的

meter

登录后复制

标签，它的主要作用是用来显示已知范围内的度量值。你可以把它想象成一个可视化的小仪表盘，比如显示你的硬盘使用了多少空间，或者一个考试成绩在总分里的占比。它不是用来显示任务进度的（那个是

<progress>

登录后复制

标签的活儿），而是展示一个静态的、有上下限的数值。至于如何显示度量值，其实你一旦设置了

value

登录后复制

、

min

登录后复制

和

max

登录后复制

属性，浏览器自然就会把它渲染出来，通常是一个条形图，或者某种形式的视觉指示器。

解决方案

使用

<meter>

登录后复制

标签其实挺直观的。你只需要定义它的

value

登录后复制

属性来表示当前值，以及

min

登录后复制

和

max

登录后复制

属性来确定这个度量值的范围。当然，为了更精细地表达，你还可以加上

low

登录后复制

、

high

登录后复制

和

optimum

登录后复制

这几个属性，它们能帮助浏览器（或辅助技术）更好地理解当前值所处的“好”或“坏”的区间，以及什么是理想值。

举个例子，如果你想显示一个用户在某个技能上的熟练度（满分100分，他得了75分），你可以这样写：

<label for="skillLevel">您的技能熟练度：</label>
<meter id="skillLevel" value="75" min="0" max="100" low="40" high="80" optimum="90">75%</meter>

登录后复制

这里，

value="75"

登录后复制

是当前值，

min="0"

登录后复制

和

max="100"

登录后复制

定义了范围。

low="40"

登录后复制

表示低于40可能就不太行了，

high="80"

登录后复制

表示高于80就算比较优秀，而

optimum="90"

登录后复制

则定义了我们认为最理想的得分是90。浏览器会根据这些属性来渲染，有时候甚至会根据

value

登录后复制

相对于

low

登录后复制

、

high

登录后复制

和

optimum

登录后复制

的位置来改变显示的颜色，尽管这很大程度上取决于浏览器自己的默认样式。

<meter>

登录后复制

标签与

<progress>

登录后复制

标签有何不同？何时该使用它们？

这是个老生常谈的问题，但确实很重要，因为我发现很多人刚开始会把它们搞混。简单来说，

<meter>

登录后复制

是用来展示已知范围内的度量值，它是一个静态的、表示当前状态的“仪表盘”。想象一下你车里的油表，它告诉你油箱里还剩多少油，这是一个度量值。

而

<progress>

登录后复制

标签呢，它是用来显示任务的完成进度。它是一个动态的、表示一个过程的“进度条”。比如你下载文件的时候，那个不断增长的条形图，告诉你下载了多少百分比，这就是

<progress>

登录后复制

的典型应用场景。

什么时候用哪个？

使用
```
<meter>
```
登录后复制
：
- 显示磁盘空间使用率（“我用了200GB，总共500GB”）。
- 显示一个投票结果的百分比（“A方案获得了60%的票数”）。
- 显示一个商品的库存量（“还剩10件库存”）。
- 显示一个用户的信用评分，或者某个指标在正常范围内的位置。
- 关键在于，它是一个量度，而且这个量度通常是相对于一个已知的最大值和最小值而言的。
使用
```
<progress>
```
登录后复制
：
- 文件上传或下载进度。
- 游戏加载进度。
- 表单提交的等待状态。
- 任何需要显示一个正在进行中且有明确完成目标的任务。

我个人觉得，理解它们的语义差异比记住功能更重要。如果你用

<meter>

登录后复制

去显示一个文件上传进度，虽然视觉上可能也能实现，但从语义上讲就错了，对屏幕阅读器用户来说，这会造成混淆。反之亦然。正确地使用它们，不仅代码更规范，对可访问性也更有帮助。

如何通过 CSS 自定义

<meter>

登录后复制

标签的样式？

自定义

<meter>

登录后复制

标签的样式，这事儿说起来就有点让人头疼了。因为它和

<progress>

登录后复制

标签一样，在不同的浏览器里渲染方式差异挺大的，而且它们内部通常会用到影子DOM (Shadow DOM)。这意味着你不能像修改普通

div

登录后复制

或

span

登录后复制

那样直接用 CSS 属性去控制它的每一个细节。

不过，也不是完全没办法。主流浏览器提供了一些伪元素（Pseudo-elements）来让你进行一定程度的样式定制。

WebKit/Blink (Chrome, Safari, Edge基于Chromium):
- ```
::-webkit-meter-bar
```
  登录后复制
  : 控制整个度量条的背景。
- ```
::-webkit-meter-optimum-value
```
  登录后复制
  : 当
```
value
```
  登录后复制
  处于
```
optimum
```
  登录后复制
  范围内时的填充色。
- ```
::-webkit-meter-suboptimum-value
```
  登录后复制
  : 当
```
value
```
  登录后复制
  处于
```
suboptimum
```
  登录后复制
  （非最佳，但也不是最差）范围时的填充色。
- ```
::-webkit-meter-unsatisfied-value
```
  登录后复制
  : 当
```
value
```
  登录后复制
  处于
```
unsatisfied
```
  登录后复制
  （不满意，通常是
```
low
```
  登录后复制
  以下）范围时的填充色。
Mozilla (Firefox):

表单大师AI
一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情
- ```
-moz-meter-bar
```
  登录后复制
  : 类似于
```
::-webkit-meter-bar
```
  登录后复制
  。
- ```
-moz-meter-optimum
```
  登录后复制
  ,
```
-moz-meter-sub-optimum
```
  登录后复制
  ,
```
-moz-meter-unsatisfied
```
  登录后复制
  : 控制不同状态下的填充色。

你会发现，这些伪元素的名称都不太一样，而且并不是所有属性都能被覆盖。通常，你可以修改背景色、边框、高度等。

一个简单的例子：

meter {
  /* 整个 meter 容器的样式 */
  width: 200px;
  height: 20px;
  background-color: #f0f0f0; /* 默认背景色 */
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden; /* 确保内部条形不会溢出 */
}

/* WebKit/Blink 浏览器 */
meter::-webkit-meter-bar {
  background-color: transparent; /* 清除默认背景，让外层 meter 的背景生效 */
}

meter::-webkit-meter-optimum-value {
  background-color: #4CAF50; /* 绿色，表示最佳 */
}

meter::-webkit-meter-suboptimum-value {
  background-color: #FFC107; /* 橙色，表示次优 */
}

meter::-webkit-meter-unsatisfied-value {
  background-color: #F44336; /* 红色，表示不满意 */
}

/* Firefox 浏览器 */
meter:-moz-meter-bar {
  background-color: transparent;
}

meter:-moz-meter-optimum {
  background-color: #4CAF50;
}

meter:-moz-meter-sub-optimum {
  background-color: #FFC107;
}

meter:-moz-meter-unsatisfied {
  background-color: #F44336;
}

登录后复制

说实话，即便有了这些伪元素，要实现一个完全自定义且跨浏览器一致的

<meter>

登录后复制

样式，还是挺有挑战性的。很多时候，为了达到像素级的完美控制，开发者会选择用

div

登录后复制

元素模拟

<meter>

登录后复制

的功能，然后用 JavaScript 更新

div

登录后复制

的宽度来表示度量值。这样虽然失去了

<meter>

登录后复制

标签本身的语义化优势，但在视觉表现上能获得最大的自由度。这真的是一个权衡，看你更看重语义化还是视觉一致性。

<meter>

登录后复制

标签的

low

登录后复制

、

high

登录后复制

和

optimum

登录后复制

属性在实际应用中如何理解和使用？

这几个属性是

<meter>

登录后复制

标签的灵魂所在，它们让一个简单的数值显示变得富有意义。它们定义了度量值在整个范围内的“质量”分区。

low
登录后复制
属性：定义了一个下限值。当
```
value
```
登录后复制
低于
```
low
```
登录后复制
值时，通常表示这个度量值处于一个不太理想或者需要关注的“低”状态。
high
登录后复制
属性：定义了一个上限值。当
```
value
```
登录后复制
高于
```
high
```
登录后复制
值时，通常表示这个度量值处于一个不太理想或者过高的“高”状态。
optimum
登录后复制
属性：定义了理想的、最佳的度量值。这个值可以在
```
min
```
登录后复制
和
```
max
```
登录后复制
之间的任何位置。浏览器可能会根据
```
value
```
登录后复制
相对于
```
optimum
```
登录后复制
的远近来调整显示，比如颜色。

如何理解和使用？

这三个属性是用来给度量值提供上下文和语义的。它们并不强制浏览器以某种特定方式渲染（比如，低于

low

登录后复制

就一定是红色），但它们提供了信息，让辅助技术（如屏幕阅读器）能更好地解释这个度量值。同时，现代浏览器确实会根据这些属性来尝试提供一些默认的视觉反馈。

我们来举几个实际的例子：

硬盘空间使用率：
- ```
min="0"
```
  登录后复制
  ，
```
max="1000"
```
  登录后复制
  (GB)
- ```
low="100"
```
  登录后复制
  (低于100GB可能就得提醒用户了)
- ```
high="900"
```
  登录后复制
  (高于900GB就非常满了，危险)
- ```
optimum="1000"
```
  登录后复制
  (对硬盘空间来说，剩余越多越好，所以最佳值是最大值)
```
<meter value="850" min="0" max="1000" low="100" high="900" optimum="1000">850GB</meter>
```
  登录后复制
  这里，850GB 已经超过了
```
high
```
  登录后复制
  ，浏览器可能会将其渲染成警告色。
学生考试分数：
- ```
min="0"
```
  登录后复制
  ，
```
max="100"
```
  登录后复制
- ```
low="60"
```
  登录后复制
  (低于60分算不及格)
- ```
high="90"
```
  登录后复制
  (高于90分算优秀)
- ```
optimum="100"
```
  登录后复制
  (满分当然是最佳)
```
<meter value="75" min="0" max="100" low="60" high="90" optimum="100">75分</meter>
```
  登录后复制
  75分在这里属于中等偏上，可能显示为普通颜色。
室内温度：
- ```
min="0"
```
  登录后复制
  ，
```
max="40"
```
  登录后复制
  (摄氏度)
- ```
low="18"
```
  登录后复制
  (低于18度可能太冷)
- ```
high="26"
```
  登录后复制
  (高于26度可能太热)
- ```
optimum="22"
```
  登录后复制
  (22度是理想温度)
```
<meter value="15" min="0" max="40" low="18" high="26" optimum="22">15°C</meter>
```
  登录后复制
  15°C低于
```
low
```
  登录后复制
  值，表示太冷，可能会显示为警告色。