HTML meter 与 progress 度量元素
meter（标量测量值/高低阈值/low/high/optimum）和progress（进度条/max/value）的区别与使用、ARIA无障碍标签、CSS自定义样式 · 难度：入门 · +10XP
HTML meter 和 progress —— 进度条和度量值
网页上经常需要展示下载进度或硬盘使用率。HTML5 提供了两个专门的元素，比用 div+CSS 更加语义化。
progress —— 进度条
<progress> 表示任务完成进度：
<label for="file">文件下载进度：</label>
<progress id="file" value="60" max="100">60%</progress>两个关键属性：value 当前值，max 最大值（默认1）。如果不设 value，进度条变成不确定状态（来回滚动动画），表示正在进行但不知道还要多久。
meter —— 度量值
<meter> 表示在已知范围内的标量测量值：
<label for="disk">磁盘使用率：</label>
<meter id="disk" value="0.8" low="0.5" high="0.8" optimum="0.3">80%</meter>属性说明：low 低于此值算偏低，high 高于此值算偏高，optimum 最佳值（影响颜色：越接近越绿，越远越红）。
progress vs meter 对比
| 用 progress | 用 meter |
|---|---|
| 文件上传进度 | 硬盘剩余空间 |
| 视频缓冲 | 学生考试成绩 |
| 任务完成百分比 | CPU使用率 |
| 动态变化的过程 | 某个时刻的静态快照 |
动手练习
- 基础练习：做一个文件下载模拟——progress 条从 0% 开始，用JS的 setInterval 每隔100ms加1%，到100%停止并显示下载完成。
- 进阶应用：用 meter 做一个系统性能仪表盘——三个 meter 分别显示CPU（70%）、内存（45%）、磁盘（90%），颜色自动反映健康状态。再加上最优值标记。
- 项目实战：做一个学生成绩单页面——每科成绩用 meter 显示，根据分数自动变色（低于60红色、60到80黄色、高于80绿色）。计算总分和平均分。
接下来学什么？
下一课学习 details 折叠面板——做一个点击展开收起的面板，不用一行JavaScript。