中meter元素用法_html5展示磁盘空间或投票进度的方法

<meter>用于表示静态度量值在固定范围内的相对位置，如磁盘使用率、评分等；<progress>才表示任务完成进度。二者语义不同，不可混用，且<meter>必须指定value、min、max，optimum决定理想状态并影响颜色。

<meter> 不是用来展示“投票进度”的——那是 <progress> 的职责。<meter> 只适合表达「静态度量值在固定范围内的相对位置」，比如磁盘使用率、评分、热量摄入比例。它不表示任务推进过程，也不支持不确定状态。

什么时候该用 <meter> 而不是 <progress>

关键看语义：<meter> 描述「当前状态值在哪一段区间里」，<progress> 描述「任务完成了多少」。

• 磁盘空间使用率：用 <meter value="75" min="0" max="100">75%</meter> ——这是当前占用比例，不是“正在清理中”
• 用户对某产品的评分（满分 5 星）：用 <meter value="4.2" min="0" max="5">4.2/5</meter>
• 投票结果中“赞成票占比”：可用 <meter>，因为它是已知总数下的静态比例；但“正在计票中”不能用它
• 文件上传中已完成 65%：必须用 <progress value="65" max="100"></progress>，<meter> 在这里会误导可访问性工具和用户

<meter> 必须传的三个属性：value、min、max

缺一不可，否则浏览器可能降级为纯文本或不渲染图形。而且必须满足 min ≤ value ≤ max，否则行为未定义（Chrome 会静默忽略，Firefox 可能报错）。

• value 是当前测量值，必须是数字，不能是字符串如 "70%"
• min 默认是 0，但显式写出来更安全，尤其当真实下限不是 0（比如温度传感器从 -20℃ 开始）
• max 默认是 1，所以 <meter value="0.7"></meter> 等价于 <meter value="0.7" min="0" max="1"></meter>，但写全更清晰

low / high / optimum 怎么影响颜色和语义

浏览器（Chrome、Edge、Safari）会根据这三者自动给 <meter> 上色：绿色≈理想，黄色≈警告，红色≈异常。这个逻辑不靠 CSS，是原生行为。

立即学习“前端免费学习笔记（深入）”；

• optimum 是核心——它决定哪一段算“最佳”。哪怕 value 在 low 和 high 之间，只要离 optimum 很远，仍可能被标为非最优
• low 和 high 定义的是阈值，不是区间边界：低于 low → “偏低”，高于 high → “偏高”，中间是“正常”，但是否“理想”还得看 optimum
• 示例：<meter value="85" min="0" max="100" low="30" high="70" optimum="20"></meter> ——虽然 85 > high，但它比 optimum=20 远得多，所以大概率显示红色（异常），而非橙色（偏高）

样式定制和兼容性注意点

默认样式浏览器差异大，且无法用普通 CSS 选中内部条形；必须用伪元素，而且各引擎前缀不同。

• WebKit/Blink（Chrome、Edge、Safari）：::-webkit-meter-bar、::-webkit-meter-even-less-good-value 等
• Firefox：::-moz-meter-bar、::-moz-meter-optimum 等
• IE 完全不支持 <meter>，最低支持是 Edge 12 / Chrome 8 / Firefox 16 —— 如果要兼容 IE，得 fallback 到 <div> + JS 模拟
• 别忘了可访问性：<meter> 本身有良好 ARIA 支持，但若覆盖了全部样式又没补 aria-valuenow 等属性，屏幕阅读器就只能读文本内容

真正容易被忽略的是：optimum 不一定要落在 [low, high] 内。它可以等于 min 或 max，意味着“越小越好”或“越大越好”——比如电池剩余电量，optimum=100，low=20，high=80，那么 95% 就是绿色，15% 就是红色。这个设计意图，很多人写完才发现颜色不对，才回头查文档。