<meter> 标签的主要作用是显示已知范围内的度量值，用于展示静态的、有上下限的数值状态，如硬盘使用率或考试成绩占比，而非任务进度（那是 <progress> 的用途）；它通过 value、min 和 max 属性定义当前值和范围，并可结合 low、high 和 optimum 属性提供语义上下文，帮助浏览器和辅助技术判断数值所处区间（低、高或理想状态），从而在视觉上以不同颜色呈现；例如
表单中的
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>
<meter>
标签与
<progress>
标签有何不同？何时该使用它们？
这是个老生常谈的问题，但确实很重要，因为我发现很多人刚开始会把它们搞混。简单来说，
<meter>
是用来展示已知范围内的度量值，它是一个静态的、表示当前状态的“仪表盘”。想象一下你车里的油表，它告诉你油箱里还剩多少油，这是一个度量值。
而
<progress>
标签呢，它是用来显示任务的完成进度。它是一个动态的、表示一个过程的“进度条”。比如你下载文件的时候，那个不断增长的条形图，告诉你下载了多少百分比，这就是
<progress>
的典型应用场景。
什么时候用哪个？
-
使用
<meter>
：
- 显示磁盘空间使用率（“我用了200GB，总共500GB”）。
- 显示一个投票结果的百分比（“A方案获得了60%的票数”）。
- 显示一个商品的库存量（“还剩10件库存”）。
- 显示一个用户的信用评分，或者某个指标在正常范围内的位置。
- 关键在于，它是一个量度，而且这个量度通常是相对于一个已知的最大值和最小值而言的。
-
使用
<progress>
：
- 文件上传或下载进度。
- 游戏加载进度。
- 表单提交的等待状态。
- 任何需要显示一个正在进行中且有明确完成目标的任务。
我个人觉得，理解它们的语义差异比记住功能更重要。如果你用
<meter>
去显示一个文件上传进度，虽然视觉上可能也能实现，但从语义上讲就错了，对屏幕阅读器用户来说，这会造成混淆。反之亦然。正确地使用它们，不仅代码更规范，对可访问性也更有帮助。
如何通过 css 自定义
<meter>
<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):
-
-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>
<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"
(对硬盘空间来说，剩余越多越好，所以最佳值是最大值)
850GB 这里，850GB 已经超过了
high
，浏览器可能会将其渲染成警告色。
-
-
学生考试分数：
-
min="0"
，
max="100"
-
low="60"
(低于60分算不及格)
-
high="90"
(高于90分算优秀)
-
optimum="100"
(满分当然是最佳)
75分 75分在这里属于中等偏上，可能显示为普通颜色。
-
-
室内温度：
-
min="0"
，
max="40"
(摄氏度)
-
low="18"
(低于18度可能太冷)
-
high="26"
(高于26度可能太热)
-
optimum="22"
(22度是理想温度)
15°C 15°C低于
low
值，表示太冷，可能会显示为警告色。
-
这些属性的强大之处在于，它们将数值的语义嵌入到了html结构中。即使没有复杂的CSS样式，辅助技术也能通过这些属性，向用户传达当前值是“好”、“差”还是“最佳”。这不仅仅是视觉上的美观，更是对可访问性的深思熟虑。所以，在使用
<meter>
时，花点时间思考一下
low
、
high
和
optimum
的合理值，真的能让你的代码更有意义。
