Html5新特性之meter

HTML5的<meter>标签用于表示已知范围内的数值。它可以用不同的颜色和形状显示进度，非常适合用于显示任何类型的数值进度，如任务完成百分比、分数等。

以下是一些使用<meter>元素的示例：

示例1：基本的<meter>元素

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

在这个例子中，<meter>元素显示了一个值为60的进度条，该进度条的范围从0到100，低于30为低进度区域，高于80为高进度区域，最优值为50。

示例2：带有不同进度颜色的<meter>元素

<meter value="60" min="0" max="100" low="30" high="80" optimum="50">60%</meter>
<style>
  meter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 200px;
    height: 20px;
    background: #00FFFF;
  }
  meter::-webkit-meter-optimum-value { background: orange; }
  meter::-webkit-meter-suboptimum-value { background: red; }
  meter::-webkit-meter-even-less-good-value { background: yellow; }
</style>

在这个例子中，通过CSS样式，我们为<meter>元素定制了不同的进度颜色。

示例3：带有不同进度样式的<meter>元素

<meter value="60" min="0" max="100" low="30" high="80" optimum="50">60%</meter>
<style>
  meter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 200px;
    height: 20px;
    background: #00FFFF;
  }
  meter::-webkit-meter-bar { background: #eee; }
  meter::-webkit-meter-optimum-value { background: orange; }
  meter::-webkit-meter-suboptimum-value { background: red; }
  meter::-webkit-meter-even-less-good-value { background: yellow; }
</style>

在这个例子中，通过CSS样式，我们为<meter>元素定制了一个带有进度条的背景样式。

注意：在使用<meter>元素时，你可能需要添加一些额外的样式来定制它的外观，因为不同的浏览器可能会有不同的默认样式。上述代码中的-webkit-appearance和appearance属性是用来移除或者隐藏默认的Webkit内核浏览器样式的。