应使用 表示已知范围内的静态测量值（如CPU使用率65%），而 用于动态任务进度（如上传完成73%）； 必须显式设置 value、min 和 max 以确保语义正确与无障碍支持。
什么时候该用
关键区别在于语义和动态性：
-
-
描述**正在进行的任务进度**（如：文件上传完成 73%，最终值未知或不可预估） -
浏览器对两者的默认样式、辅助技术（AT）暴露方式不同：
读作“x percent complete” - 若 value 超出
min/max范围，
它至少需要 value 和 min+max（或依赖默认值），否则语义失效且可能被屏幕阅读器忽略：
-
value：必需，当前测量值（数字） -
min：默认为0，但显式声明更安全（尤其当值可能为负时） -
max：默认为1，若实际范围是 0–100，必须写max="100"，否则value="85"会被当作 85/1 = 8500% -
low/high/optimum：可选，用于定义区间语义（如“低于 30% 为 low”，“70–90% 为 optimum”），影响部分浏览器的背景色，但不改变数值逻辑
85% used
样式控制与兼容性注意点
原生 ），需借助伪元素：
立即学习“前端免费学习笔记（深入）”；
- Chrome/Edge：可用
meter::-webkit-meter-inner-element、meter::-webkit-meter-bar、meter::-webkit-meter-optimum-value等 - Firefox：支持
meter::-moz-meter-bar，但粒度较粗 - 务必测试无障碍：自定义样式后，确保颜色对比度达标，且 value/min/max 仍能被 AT 正确读出
- 若需高度定制或 IE 兼容，建议用 + ARIA 属性（
aria-valuenow、aria-valuemin、aria-valuemax）替代最常被忽略的是
max的默认值——很多人写min="0"，导致小数精度或负值场景下语义错乱。它不是装饰性组件，每个属性都在参与语义表达。
