前端Wiki/HTML5/基础/新语义标签

meter 与 progress

这两个标签都表示"量"，但含义不同：<meter> 表示静态的量度值——磁盘占用率、考试分数、电池电量，它有"正常/偏高/过低"的区间概念；<progress> 表示进行中任务的进度——上传进度、加载状态，只有"完成了多少"没有好坏之分。

meter 的属性较丰富：min/max 定范围，value 是当前值，low/high/optimum 划分区间——浏览器会根据当前值落在哪个区间决定颜色（绿/黄/红）。progress 只需 value 和 max，不写 value 时显示"进行中"的不确定动画。

标签内可以写降级文字：不支持这两个标签的浏览器会显示文字内容。JS 更新进度就是改 value 属性，配合事件监听做上传进度条是经典用法。

本节要点meter 表静态量度（有 low/high/optimum 区间好坏），progress 表任务进度；标签内容做降级文字；动态更新改 value 属性。

HTML

<!-- meter：静态量度，low/high/optimum 划分好坏区间 -->
<label>磁盘占用</label>
<meter value="0.82" min="0" max="1"
       low="0.6" high="0.9" optimum="0.3">82%</meter>

<label>考试得分</label>
<meter value="92" min="0" max="100" optimum="100">92 分</meter>

<!-- progress：任务进度，value/max 表示完成比例 -->
<label>文件上传</label>
<progress id="up" value="0" max="100">0%</progress>

<script>
  // 模拟上传进度：每隔 300ms 增长 10
  var p = 0;
  var timer = setInterval(function () {
    p += 10;
    document.getElementById('up').value = p;  // 直接更新 value 属性
    if (p >= 100) clearInterval(timer);
  }, 300);
</script>

🔗 相关词条事件监听浏览器 JS 标签事件

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读