一、meter标签的作用是什么？
在HTML5中，<meter> 标签用于定义已知范围或分数值内的标量测量值。通俗地讲，它就像是仪表盘上的指针，用来展示某个数值在规定最小值与最大值之间的位置。
它最常见的应用场景包括：
磁盘使用量空间
电池剩余电量
投票结果的比例
考试分数占比
特别注意：<meter> 标签不应用于表示进度条（例如文件下载或安装进度），表示进度应该使用 <progress> 标签。<meter> 代表的是静态的度量值，而非动态的过程。
二、meter标签的核心属性
要正确地展示度量值，必须了解 <meter> 标签的几个关键属性。除了必须的 value 属性外，其他属性用于界定数值的范围和区间：
value：当前的度量值。这是必须的属性，如果不设置，默认值为0。
min：允许的最小值，默认为0。
max：允许的最大值，默认为1。如果设置的
value小于min，则按min处理；大于max，则按max处理。low：定义“低”区间的上限。如果
value低于此值，则属于低区间。high：定义“高”区间的下限。如果
value高于此值，则属于高区间。optimum：定义最佳数值。该属性决定了浏览器如何渲染仪表盘的颜色（如绿色代表最佳，黄色代表警告，红色代表危险）。
三、度量值怎么展示？
<meter> 标签的展示分为“视觉展示”和“语义展示”两部分。
1. 视觉展示
现代浏览器（如Chrome, Firefox, Edge）对 <meter> 标签都有默认的UI渲染效果，通常表现为一个类似进度条的色带。浏览器会根据 low、high 和 optimum 的组合，自动为色带改变颜色：
当 optimum 处于中间区间（介于 low 和 high 之间）时：
value在 [min, low] 之间，显示为警告色（通常为黄色或橙色）。value在 [low, high] 之间，显示为最佳色（通常为绿色）。value在 [high, max] 之间，显示为警告色（通常为黄色或橙色）。当 optimum 处于低区间（小于等于 low）时：越小越好。
value在 [min, low] 之间，显示为最佳色（绿色）。value在 (low, high] 之间，显示为警告色（黄色）。value在 (high, max] 之间，显示为危险色（红色）。当 optimum 处于高区间（大于等于 high）时：越大越好。
value在 [min, low] 之间，显示为危险色（红色）。value在 (low, high] 之间，显示为警告色（黄色）。value在 (high, max] 之间，显示为最佳色（绿色）。
2. 语义与兼容性展示
<meter> 标签内部的内容是回退内容（Fallback Content）。当浏览器不支持 <meter> 标签时，会直接显示标签内部的文本。因此，在编写代码时，务必在标签内写上具体的数值或描述，以保证兼容性。
四、代码示例
下面通过几个具体的场景，演示 <meter> 标签的使用方法及语法：
<!-- 1. 基础用法：不设置min和max时，默认区间为0到1 --> <p>电池电量：<meter value="0.75">75%</meter></p> <!-- 2. 自定义区间：展示分数（0-100之间） --> <p>考试得分：<meter min="0" max="100" value="85">85分</meter></p> <!-- 3. 磁盘使用量场景：最佳值(optimum)为低区间，说明占用率越低越好 --> <!-- 此时 optimum=10，小于 low=30 --> <p> 磁盘占用率（低较好）： <meter min="0" max="100" low="30" high="80" optimum="10" value="15">15%</meter> （绿色：正常） <meter min="0" max="100" low="30" high="80" optimum="10" value="50">50%</meter> （黄色：警告） <meter min="0" max="100" low="30" high="80" optimum="10" value="90">90%</meter> （红色：危险） </p> <!-- 4. 资金达标率场景：最佳值(optimum)为高区间，说明达标率越高越好 --> <!-- 此时 optimum=90，大于 high=80 --> <p> 项目资金达标率（高较好）： <meter min="0" max="100" low="30" high="80" optimum="90" value="20">20%</meter> （红色：危险） <meter min="0" max="100" low="30" high="80" optimum="90" value="60">60%</meter> （黄色：警告） <meter min="0" max="100" low="30" high="80" optimum="90" value="95">95%</meter> （绿色：最佳） </p>
五、样式自定义建议
虽然浏览器为 <meter> 提供了基于 optimum 等属性的默认颜色渲染，但在实际开发中，默认样式往往无法满足UI设计稿的需求。
由于 <meter> 是一个空元素（类似于 <input>），直接使用CSS修改其内部颜色比较复杂，需要用到针对WebKit内核（如Chrome/Safari）和Gecko内核（如Firefox）的伪元素：
WebKit引擎：<code>::-webkit-meter-bar</code>（背景）, <code>::-webkit-meter-optimum-value</code>（绿色值）等。
Gecko引擎：<code>::-moz-meter-bar</code>（值）。
由于不同浏览器的伪元素支持差异较大，如果需要高度定制化的仪表盘或进度展示，在实际工程中往往更倾向于使用 <div> 配合CSS动画或SVG来实现。但如果仅需要语义化且对样式要求不高，HTML5原生 <meter> 标签无疑是最简洁、最符合规范的解决方案。