meter标签需结合CSS渐变与JS动态class实现跨浏览器颜色分级，通过low/high/optimum属性定义语义区间，并用aria-label和文本确保无障碍可读性。

怎么通过html5中meter标签实现带颜色等级的磁盘空间占用百分比展示

meter 标签本身不支持直接设置颜色等级，但可以通过 CSS 的 appearance 重置 + background 渐变或伪元素模拟，结合 value、min、max、low、high、optimum 属性实现语义化且带颜色分级的磁盘占用展示。

基础结构：用 meter 标签表达占用语义

meter 元素天然适合表示「已用 / 总量」这类有范围和阈值的标量值。例如磁盘空间：

<meter value="78" min="0" max="100" low="30" high="80" optimum="20">78%</meter>

其中：
- value=78 表示当前占用 78%；
- low=30 表示 ≤30% 为“低占用”（绿色区间）；
- high=80 表示 ≥80% 为“高占用”（红色区间）；
- optimum=20 表示最理想状态是 20%，浏览器会据此判断“高/中/低”的语义倾向（如 optimum 在 low 和 high 之间，则 20% 是最优，越靠近越健康）。

CSS 着色：覆盖默认样式，按区间动态上色

原生 meter 在不同浏览器中渲染差异大，需统一重置并用 background 模拟进度条。关键技巧是：用 linear-gradient 分段配色，并通过 background-size 和 background-position 控制显示比例。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

meter {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 200px;
  height: 24px;
  background: #e0e0e0;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
<p>meter::-webkit-meter-bar {
background: transparent;
}</p><p>meter::-webkit-meter-optimum-value {
background: linear-gradient(90deg,</p><h1>4caf50 0%, #4caf50 30%,</h1><pre class="brush:php;toolbar:false;">#ff9800 30%, #ff9800 80%,
#f44336 80%, #f44336 100%

); background-size: 100% 100%; }

meter::-webkit-meter-suboptimum-value { background: linear-gradient(90deg,

4caf50 0%, #4caf50 30%,

#ff9800 30%, #ff9800 80%,
#f44336 80%, #f44336 100%

); }

meter::-webkit-meter-even-less-good-value { background: linear-gradient(90deg,

4caf50 0%, #4caf50 30%,

#ff9800 30%, #ff9800 80%,
#f44336 80%, #f44336 100%

); }

说明：
- Chrome/Safari 使用 ::-webkit-meter-* 伪类区分状态（optimum/suboptimum/even-less-good）；
- Firefox 不支持这些伪类，需用 JS 动态加 class 或 fallback 到统一渐变；
- 上例中 0–30% 绿、30–80% 橙、80–100% 红，与 low/high 值对齐，视觉反馈一致。

增强兼容性：JS 辅助 + class 控制（推荐生产环境）

为确保所有浏览器颜色准确，建议用 JS 读取 value 并添加对应 class：

disk-meter ${cls}

CSS 配合：

.disk-meter {
  width: 200px; height: 24px;
  border-radius: 12px; background: #e0e0e0;
}
.disk-meter.status-low  { background: linear-gradient(90deg, #4caf50, #4caf50); }
.disk-meter.status-high { background: linear-gradient(90deg, #f44336, #f44336); }
.disk-meter:not(.status-low):not(.status-high) {
  background: linear-gradient(90deg, #ff9800, #ff9800);
}

补充提示：可读性与无障碍

- 始终保留标签内文本（如 78%），屏幕阅读器会读出；
- 可额外加 aria-label：；
- 颜色不能是唯一信息载体，建议旁加文字标识：高占用；
- 若需动画效果（如数值变化时填充滑动），可用 CSS transition 配合 JS 更新 value 属性（注意 meter 的 value 是可动画的 CSS 属性）。