HTML5中meter标签的用法及实例详解

13 min read

HTML5标签<meter>用于表示一定范围内的数值测量,如进度条或者某个比率的表示。

以下是标签<meter>的语法和属性:

<meter value="数值" min="最小值" max="最大值" low="低阈值" high="高阈值" optimum="最佳阈值"></meter>

其中:

  • value: 必选,测量的数值。
  • min: 可选,范围的最小值,默认为0。
  • max: 可选,范围的最大值,默认为1。
  • low: 可选,低阈值,低于此值,表盘会使用兼容性较好的CSS属性进行渲染,默认值为min + (max - min) * 0.25
  • high: 可选,高阈值,高于此值,表盘会使用兼容性较好的CSS属性进行渲染,默认值为min + (max - min) * 0.75
  • optimum: 可选,最佳阈值,与表盘的颜色有关,默认值为min + (max - min) * 0.5

以下是一个使用<meter>标签的示例:

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

表示一个数值为70,范围为0-100,低阈值为30,高阈值为80,最佳阈值为60的表盘。具体渲染效果会因浏览器而异。