答案：HTML中用<meter>标签显示已知范围内的标量测量值，如电量、磁盘使用率等，通过min、max、value定义范围和当前值，low、high、optimum划分状态区间以指示低/高/最佳状态，区别于表示任务进度的<progress>标签，具有良好语义化和可访问性，现代浏览器广泛支持，并可通过回退内容保障兼容性。
HTML文档中要显示计量数据，我们主要会用到
<meter>
标签。它就像是我们数字世界里的一把“尺子”，专门用来展示一个已知范围内的标量测量值，比如你电脑的磁盘使用率、一次搜索结果的匹配程度，或者手机的电池电量。它给出的不是一个任务完成的进度，而是一个“当前状态”在整个“可能范围”中的位置。
当我们需要在HTML文档中直观地展示一个计量值时，
<meter>
标签无疑是首选。它提供了一种语义化的方式来表示一个标量测量值，这个值通常在一个已知的最小值和最大值之间浮动。想象一下，你正在构建一个仪表盘，或者一个显示用户数据配额的界面，
<meter>
标签就能派上大用场。它不仅仅是视觉上的展示，更重要的是，它带有明确的语义，能够被屏幕阅读器等辅助技术更好地理解。
理解
<meter>
<meter>
标签的关键属性：
min
,
max
,
value
,
low
,
high
,
optimum
要真正玩转
<meter>
标签，理解它的几个核心属性至关重要。它们共同定义了计量条的行为和视觉表现。
-
min
和
max
：
这两个属性定义了计量的最小值和最大值，形成了一个闭区间。比如，电池电量通常是从0到100，那么min="0"
和
max="100"
就是合理的设置。如果你不指定，它们会默认分别为0和1。
-
value
：
这是当前实际的测量值，它必须落在min
和
max
之间。例如，如果你的电池还剩75%电量，那么
value="75"
。
-
low
和
high
：
这两个属性用来定义“低”和“高”的阈值。它们将整个范围分成了三个部分：低、中、高。例如，你可能希望电池电量低于20%（low="20"
）时显示红色，高于80%（
high="80"
）时显示绿色。它们的值也必须在
min
和
max
之间，并且
low
不能大于
high
。
-
optimum
：
这个属性表示“最佳”值。浏览器会根据value
相对于
optimum
的位置，来改变计量条的颜色或样式。如果
optimum
在
low
和
high
之间，那么在
low
以下和
high
以上的值可能会被视为“不理想”。如果
optimum
在
low
以下，那么低于
low
的值可能被视为“理想”，反之亦然。这听起来有点绕，但实际就是告诉浏览器，哪个范围是“好的”。
举个例子，一个显示用户存储空间使用情况的计量条：
立即学习“前端免费学习笔记（深入）”；
<label for="storage">存储空间使用率：</label> <meter id="storage" value="70" min="0" max="100" low="50" high="90" optimum="30">70%</meter> <p>当前使用了 70% 的存储空间。</p>
在这个例子中：
-
min="0"
，
max="100"
：总容量是100单位。
-
value="70"
：当前使用了70单位。
-
low="50"
：当使用率低于50%时，可能认为是“低使用”状态。
-
high="90"
：当使用率高于90%时，可能认为是“高使用”状态，需要注意。
-
optimum="30"
：我们认为30%的使用率是最佳状态。
浏览器会根据这些属性来渲染计量条的颜色。例如，在Firefox中，如果
value
在
optimum
附近，计量条可能是绿色；如果接近
low
或
high
的非
optimum
区域，则可能是黄色或红色。这提供了一种无需额外CSS就能传达状态的方式，相当便捷。
<meter>
<meter>
与
<progress>
标签：选择哪一个？
这是一个我经常被问到的问题，也是很多开发者容易混淆的地方。虽然它们在视觉上可能有些相似，但语义和用途却大相径庭。
-
<meter>
标签： 如前所述，它表示一个已知范围内的标量测量值。这个值是静态的，或者说，它代表的是某个时刻的“状态”。它不是一个任务的进行过程，而是一个“量”在“总和”中的位置。比如，你的电脑CPU温度、硬盘剩余空间、考试分数等。这些值本身可能随时间变化，但每次显示都是一个独立的测量结果。
<!-- 显示CPU负载，0到100之间，50是低负载，80是高负载，40是最佳 --> <label for="cpu-load">CPU 负载：</label> <meter id="cpu-load" value="65" min="0" max="100" low="50" high="80" optimum="40">65%</meter>
-
<progress>
标签： 这个标签则用于表示一个任务的完成进度。它暗示着一个过程，一个从开始到结束的动态变化。比如，文件上传进度、表单提交进度、游戏加载进度等。它通常会从0逐渐增加到某个目标值。
<!-- 显示文件上传进度 --> <label for="file-upload">文件上传进度：</label> <progress id="file-upload" value="70" max="100">70%</progress>
简单来说，如果你想表达“这是多少（在总共多少里面）”，用
<meter>
。如果你想表达“这件事做了多少（还剩下多少）”，用
<progress>
。虽然它们都可以用CSS来定制样式，但语义上的区分是核心，这对于可访问性和搜索引擎优化都有着不容忽视的影响。选择正确的标签，不仅让你的代码更清晰，也让你的网页对所有用户都更友好。
<meter>
<meter>
标签的无障碍性与兼容性考量
在实践中，我们不仅要关注标签的功能，更要考虑它的可访问性和浏览器兼容性。
从无障碍性的角度来看，
<meter>
标签本身就具有很好的语义化。屏幕阅读器能够识别这是一个计量条，并通常会读取其值、最小值和最大值，甚至可能根据
low
、
high
和
optimum
属性传达出状态信息。为了进一步增强可访问性，始终建议为
<meter>
标签提供一个关联的
<label>
，就像前面的例子那样。
aria-labelledby
或
aria-label
属性也可以作为补充，但对于
<meter>
而言，一个清晰的
<label>
通常已经足够。确保内部的文本内容（fallback content）在不支持该标签的浏览器中也能提供有用的信息，尽管现代浏览器对
<meter>
的支持已经非常普遍了。
关于浏览器兼容性，
<meter>
标签是HTML5规范的一部分，现代主流浏览器（Chrome, Firefox, Safari, edge, Opera）对其支持都非常好，所以通常你不需要担心兼容性问题。IE浏览器在IE9及以上版本开始支持。如果你的项目需要支持非常老旧的浏览器，可能需要考虑使用JavaScript或者CSS hack来模拟其功能，或者提供一个纯文本的备用方案。不过，在大多数现代Web开发场景中，直接使用
<meter>
是完全没问题的。
<!-- 带有回退内容的meter标签 --> <label for="disk-usage">磁盘使用量：</label> <meter id="disk-usage" value="0.6" min="0" max="1" low="0.4" high="0.8" optimum="0.2"> <p>您的磁盘已使用 <span style="font-weight: bold;">60%</span>。</p> </meter>
在这个回退示例中，如果浏览器不支持
<meter>
标签，用户至少可以看到一个带有百分比的段落，仍然能理解信息。这是一种良好的实践，确保了在各种环境下信息都能被传达。总而言之，
<meter>
标签是一个强大而语义化的工具，合理运用它，能让你的Web界面在功能和用户体验上都更上一层楼。
css javascript java html html5 浏览器 edge 电脑 硬盘 工具 JavaScript html5 firefox css chrome safari html edge 搜索引擎