应仅在表示静态标量测量值（如磁盘使用率）时用，而任务进度用；其样式难控、可访问性差，推荐用+aria替代。
<meter></meter> 标签在实际项目中极少被推荐使用——它语义弱、样式难控、可访问性差，且多数场景用 <progress></progress> 或自定义 <div> + ARIA 更可靠。
<h3>什么时候该用 <code><meter></meter> 而不是 <progress></progress>
<meter></meter> 表示「静态的、已知范围内的标量测量值」（比如磁盘使用率 65%，电池电量 72%），而 <progress></progress> 表示「正在进行的任务进度」（比如文件上传完成 65%）。关键区别在于：前者无时间维度，后者有明确起止过程。
-
min和max必须显式设置（默认 0/1），否则浏览器可能按 0–1 解析，导致视觉比例错乱 -
value必须在min–max范围内，超出会触发RangeError（部分浏览器静默截断，但行为不一致） -
low/high/optimum是可选语义标记，仅影响内置样式（如 Chrome 中低区变红、高区变黄），不改变 DOM 结构或 JS 可读性
<meter></meter> 的样式控制有多不可靠
各浏览器对 <meter></meter> 的默认样式差异极大：Chrome 支持伪元素 ::-webkit-meter-bar 和 ::-webkit-meter-optimum-value，Firefox 完全不支持伪类定制，Safari 仅部分支持。你无法用纯 CSS 实现跨浏览器一致的刻度线、标签或颜色渐变。
- 想加单位文字（如 “65%”）？必须额外套
<span></span>，<meter></meter>自身不渲染文本内容 - 想响应式缩放？
width有效，但内部 bar 高度和圆角无法通过标准属性统一调整 - 想监听数值变化？它不触发
input或change事件，只能靠 JS 主动轮询value属性
替代方案：为什么 <div role="meter"> 更实用
<p>当需要精确控制外观、支持旧浏览器或集成图表库时，用带 ARIA 的 <code><div> 是更稳妥的选择。
<pre class="brush:php;toolbar:false;"><div role="meter" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" aria-label="磁盘使用率">
<div style="width: 65%"></div>
</div></pre>
<ul>
<li>
<code>role="meter" 让屏幕阅读器识别为测量值，语义不输原生标签
<div> 宽度可由 JS 动态更新，无需重写整个 DOM
<li>所有样式（背景色、动画、边框、阴影）完全可控，且兼容 IE11+</li>
<li>配合 <code>aria-valuetext（如 "65%，高于建议阈值"）能提供更丰富的语音反馈真正难的不是写出一个能跑的 <meter></meter>，而是让它在不同屏幕尺寸、不同辅助技术、不同用户交互路径下都保持可理解、可操作、可维护——这时候，放弃原生标签反而是更工程化的选择。
