用于表示静态度量值在固定范围内的相对位置，如磁盘使用率、评分等；才表示任务完成进度。二者语义不同，不可混用，且必须指定value、min、max，optimum决定理想状态并影响颜色。
<meter></meter> 不是用来展示“投票进度”的——那是 <progress></progress> 的职责。<meter></meter> 只适合表达「静态度量值在固定范围内的相对位置」，比如磁盘使用率、评分、热量摄入比例。它不表示任务推进过程，也不支持不确定状态。
什么时候该用 <meter></meter> 而不是 <progress></progress>
关键看语义：<meter></meter> 描述「当前状态值在哪一段区间里」，<progress></progress> 描述「任务完成了多少」。
- 磁盘空间使用率：用
<meter value="75" min="0" max="100">75%</meter>——这是当前占用比例，不是“正在清理中” - 用户对某产品的评分（满分 5 星）：用
<meter value="4.2" min="0" max="5">4.2/5</meter> - 投票结果中“赞成票占比”：可用
<meter></meter>，因为它是已知总数下的静态比例；但“正在计票中”不能用它 - 文件上传中已完成 65%：必须用
<progress value="65" max="100"></progress>，<meter></meter>在这里会误导可访问性工具和用户
<meter></meter> 必须传的三个属性：value、min、max
缺一不可，否则浏览器可能降级为纯文本或不渲染图形。而且必须满足 min ≤ value ≤ max，否则行为未定义（Chrome 会静默忽略，Firefox 可能报错）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
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></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></meter>，最低支持是 Edge 12 / Chrome 8 / Firefox 16 —— 如果要兼容 IE，得 fallback 到<div> + JS 模拟 <li>别忘了可访问性：<code><meter></meter>本身有良好 ARIA 支持，但若覆盖了全部样式又没补aria-valuenow等属性，屏幕阅读器就只能读文本内容
真正容易被忽略的是：optimum 不一定要落在 [low, high] 内。它可以等于 min 或 max，意味着“越小越好”或“越大越好”——比如电池剩余电量，optimum=100，low=20，high=80，那么 95% 就是绿色，15% 就是红色。这个设计意图，很多人写完才发现颜色不对，才回头查文档。
