<meter> 标签用于表示固定范围内的标量测量值（如磁盘使用率、投票得分、剩余天数），语义明确、可访问性好；支持 min/max/value/low/high/optimum 属性，浏览器自动着色，适合状态快照而非进度动画。
meter 标签用于表示已知范围内的标量测量值（如磁盘使用率、投票占比、完成进度等），它不是进度条（progress），而是“当前值在固定区间中的位置”，语义明确、可访问性好，但实际项目中常被误用或忽略。
展示资源使用率（如磁盘、内存、配额）
这是 meter 最典型的用途：有明确最小值、最大值和当前值的静态度量。
例如显示用户当前存储使用情况：
<meter min="0" max="100" value="68" low="70" high="90" optimum="50">68% used</meter>其中：
- low 和 high 定义“正常区间”的边界（低于 low 为优，高于 high 为差）
- optimum 指出理想值（默认居中，设为 50 表示中间最优）
- 浏览器会据此自动切换背景色（如 Chrome 中绿色/黄色/红色），无需额外 CSS
呈现投票结果或评分占比
当需要表达“某项得分占总分的比例”且该比例具有业务含义时，meter 比纯数字 + 文字更语义化。
比如一个满意度调查结果（满分 5 分，当前均分 4.2）：
<meter min="0" max="5" value="4.2" low="2" high="4" optimum="5">4.2 / 5</meter>注意：
- min/max 应与业务单位一致（不必强制归一化到 0–100）
- 若后端返回的是百分比（如 84），但原始量纲是“10 分制”，建议先换算再传值，保持语义真实
配合 JS 动态更新状态（非动画进度）
meter 支持 JS 修改 value、min、max 等属性，适合实时反映变化但不强调“过程”的场景。
- 监控面板中 CPU 占用率每秒更新：直接改
meter.value = data.cpu - 活动倒计时剩余天数（如“还剩 3 天，目标 7 天”）：
<meter min="0" max="7" value="3">3/7 days</meter> - 避免用它做加载动画——那是
progress的职责；meter 表达的是“此刻的状态快照”
无障碍与样式适配要点
屏幕阅读器会读出 meter 的值、范围及状态（如“68 percent, suboptimal”），前提是内容文本存在（即标签内要有可读文字）。
自定义样式时注意：
- Chrome/Firefox 对 meter 的伪元素支持有限（::-webkit-meter-inner-element 等需谨慎使用）
- 更推荐用包裹容器 + CSS 控制整体外观，保留原生语义和基础交互
- 不要仅靠颜色传达状态（如红/绿），务必搭配文字提示或图标
