meter标签用于展示已知范围内的静态测量值，如电量、磁盘使用率；2. progress标签用于表示任务的动态完成进度，如文件上传；3. 区分关键在于：meter反映当前状态，progress反映任务进展；4. meter通过min、max、value定义范围，low、high、optimum定义语义区间以实现视觉反馈；5. 常见场景包括电池电量、存储空间、评分显示等需语义化量度的场合。
meter 标签在 HTML 中主要用于表示一个已知范围内的标量测量值，比如磁盘使用量、某个投票结果的百分比、电池电量等等。它不是用来显示任务进度的，那是 progress 标签的职责。简单来说，当你需要展示一个“当前值”在一个“总范围”里的位置时，meter 就派上用场了。
解决方案
meter 标签，顾名思义，就是用来“测量”的。它提供了一种语义化的方式来展示数据，让浏览器、辅助技术（如屏幕阅读器）以及开发者都能更好地理解这块内容代表的含义。
它的核心属性是 value（当前值）、min（最小值）和 max（最大值），这三者定义了测量的基本范围和当前状态。例如，min="0" max="100" value="75" 就表示当前值是 75，范围在 0 到 100 之间。
立即学习“前端免费学习笔记（深入）”；
除了这些，meter 还有几个很重要的属性：
-
low：定义一个“低”的阈值。当value小于等于low时，可能表示状态不佳。 -
high：定义一个“高”的阈值。当value大于等于high时，可能表示状态过高或达到某个临界点。 -
optimum：定义一个“最佳”值。这个值是理想的，浏览器可能会根据value相对于optimum的位置来调整显示颜色。
这些属性共同决定了 meter 标签的语义和潜在的视觉表现。浏览器通常会根据这些属性给 meter 元素一个默认的样式，比如不同的颜色来指示“低”、“高”或“正常”状态。当然，我们也可以通过 CSS 完全自定义它的外观。
值得注意的是，meter 标签内部可以放置文本内容，这些内容在不支持 meter 标签的浏览器中会显示出来，作为一种优雅降级。
meter 标签与 progress 标签有何不同？何时该选择哪个？
这是一个非常常见的混淆点，很多人会把 meter 和 progress 搞混。其实它们俩的用途大相径庭，理解了核心区别，选择起来就简单了。
meter 标签，就像我们前面说的，是用来展示一个静态的、已知范围内的测量值。它表示的是一个“状态”，比如你的硬盘用了多少空间、手机还剩多少电、考试得了多少分。这个值本身是相对固定的，或者说，它反映的是一个当前时刻的量度。它的重点在于“这个值在整体范围内处于什么水平”。
而 progress 标签，顾名思义，是用来表示一个任务的完成进度。它是一个动态的、不断变化的量，通常用来指示一个操作正在进行中，并且会有一个最终完成的状态。比如文件上传进度、视频缓冲进度、页面加载进度。它的重点在于“这个任务还差多少能完成”。
所以，当你需要展示一个固定的比例或量度时，比如“账户余额已用 80%”，选择 meter。当你需要展示一个正在进行中的任务的完成度时，比如“文件上传中，已完成 50%”，那么 progress 才是你的正确选择。
举个例子，显示“电池剩余电量：75%”应该用 meter，因为这是一个当前状态的测量；而显示“软件更新中：已完成 75%”则应该用 progress，因为它是一个持续任务的进度。
如何使用 meter 标签展示不同状态的测量值？
meter 标签的强大之处在于它的 low、high 和 optimum 属性，它们允许我们为测量值定义不同的语义区间，浏览器可以根据这些区间来渲染不同的视觉效果，或者辅助技术可以提供更丰富的信息。
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
我们来看一个例子：假设我们要显示一个服务器的 CPU 使用率。
75%
在这个例子中：
-
min="0"和max="100"定义了 CPU 使用率的范围是 0% 到 100%。 -
value="75"表示当前 CPU 使用率是 75%。 -
low="30"意味着 30% 及以下的使用率被认为是“低”的。 -
high="80"意味着 80% 及以上的使用率被认为是“高”的。 -
optimum="50"表示理想的 CPU 使用率是 50%。
当 value 落在不同的区间时，浏览器可能会给 meter 元素应用不同的默认样式。例如，如果 value 在 low 之下，可能会显示绿色；在 high 之上，可能会显示红色；在 low 和 high 之间则显示黄色。具体效果取决于浏览器实现。
当然，如果你想完全控制视觉表现，可以通过 CSS 来定制 meter 的样式。例如，你可以针对不同的属性值或状态，使用伪类或属性选择器来改变颜色：
meter {
width: 200px;
height: 20px;
/* 基础样式 */
}
/* 当值低于low时 */
meter[value][low]:not([high]):not([optimum]):not([value^="0"]):not([value^="-"]) {
/* 这是一个复杂的选择器，但它能针对特定状态 */
/* 实际项目中，更常见的是通过JS动态添加class或使用CSS变量 */
background-color: lightgreen;
}
/* 当值高于high时 */
meter[value][high] {
background-color: red;
}
/* 当值在optimum附近时 */
meter[value][optimum] {
background-color: orange; /* 举例，实际效果可能更微妙 */
}通过这样的方式，我们不仅赋予了数据语义，也为用户提供了直观的视觉反馈，让他们一眼就能判断当前测量值所处的“健康”状态。
meter 标签在实际项目中常见的应用场景有哪些？
meter 标签的应用场景其实非常广泛，只要是涉及到“在已知范围内显示一个量”的需求，它都能派上用场。
一个很典型的例子就是存储空间显示。比如，你的云盘或者邮箱告诉你“已使用 8.5 GB，共 10 GB”，这里就可以用 meter 来直观地展示这个比例。当空间接近用尽时，还可以通过 high 属性让它变色，提醒用户。
已使用 8.5 GB / 10 GB
电池电量指示器也是一个绝佳的应用场景。在移动设备或者笔记本电脑的网页应用中，显示当前电池剩余电量，并根据电量高低给出不同的视觉反馈，比如低于 20% 就显示红色，高于 80% 显示绿色。
25%
此外，meter 还可以用于产品或服务评分的展示。比如，一个用户对某个商品的满意度评分是 4.2 分（满分 5 分）。
4.2 / 5
在一些数据分析或仪表盘类的应用中，显示某个指标的健康程度或阈值也非常有用。例如，一个服务器的内存使用率、数据库连接数、某个服务响应时间的平均值等等。只要这些值有一个明确的上下限，并且需要直观地展示当前值在这个范围内的位置，meter 都是一个非常合适的语义化标签。
甚至在一些游戏界面中，显示角色的生命值、魔法值（当这些值有固定上限时），也可以考虑使用 meter，虽然通常游戏会用更复杂的自定义 UI，但从语义上讲，meter 是符合的。
总的来说，meter 标签提供了一个简洁、语义化的方式来表示一个量度，它让数据不仅能被看到，还能被理解其在整体上下文中的意义。正确地使用它，能让你的网页内容更具可读性和可访问性。
