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

<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

<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"

high="80"

optimum="90"

value

low

high

optimum

<meter>

标签与

<progress>

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

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

<meter>

而

<progress>

<progress>

什么时候用哪个？

• 使用

  <meter>

  ：
  • 显示磁盘空间使用率（“我用了200GB，总共500GB”）。
  • 显示一个投票结果的百分比（“A方案获得了60%的票数”）。
  • 显示一个商品的库存量（“还剩10件库存”）。
  • 显示一个用户的信用评分，或者某个指标在正常范围内的位置。
  • 关键在于，它是一个量度，而且这个量度通常是相对于一个已知的最大值和最小值而言的。

• 使用

  <progress>

  ：
  • 文件上传或下载进度。
  • 游戏加载进度。
  • 表单提交的等待状态。
  • 任何需要显示一个正在进行中且有明确完成目标的任务。

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

<meter>

如何通过 CSS 自定义

<meter>

标签的样式？

自定义

<meter>

<progress>

div

span

不过，也不是完全没办法。主流浏览器提供了一些伪元素（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):

  

  Fotor

  Fotor 在线照片编辑器

  下载

  • -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>

div

<meter>

<meter>

标签的

low

、

high

和

optimum

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

这几个属性是

<meter>

• low

  属性： 定义了一个下限值。当

  value

  低于

  low

  值时，通常表示这个度量值处于一个不太理想或者需要关注的“低”状态。

• high

  属性： 定义了一个上限值。当

  value

  高于

  high

  值时，通常表示这个度量值处于一个不太理想或者过高的“高”状态。

• optimum

  属性： 定义了理想的、最佳的度量值。这个值可以在

  min

  和

  max

  之间的任何位置。浏览器可能会根据

  value

  相对于

  optimum

  的远近来调整显示，比如颜色。

如何理解和使用？

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

low

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

1. 硬盘空间使用率：

   • 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

     ，浏览器可能会将其渲染成警告色。

2. 学生考试分数：

   • 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分在这里属于中等偏上，可能显示为普通颜色。

3. 室内温度：

   • 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

     值，表示太冷，可能会显示为警告色。

这些属性的强大之处在于，它们将数值的语义嵌入到了HTML结构中。即使没有复杂的CSS样式，辅助技术也能通过这些属性，向用户传达当前值是“好”、“差”还是“最佳”。这不仅仅是视觉上的美观，更是对可访问性的深思熟虑。所以，在使用

<meter>

low

high

optimum