html meter標籤的使用與作用詳解
- 黄舟原創
- 2017-06-29 14:06:496338瀏覽
定義與用法：
提示和註解：
註解：必須定義度量的範圍，既可以在 text 中，也可以在 min/max 屬性中定義。
範例：
<meter min="0" max="20">5</meter> <meter>2 out of 10</meter> <meter>30%</meter>
<meter min="0" max="20">5</meter> <meter>2 out of 10</meter> <meter>30%</meter>
high number 定义度量的值位于哪个点，被界定为高的值。 low number 定义度量的值位于哪个点，被界定为低的值。 max number 定义最大值。默认值是 1。 min number 定义最小值。默认值是 0。 optimum number 定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。 value number 定义度量的值。
可以用CSS的偽元素對預設的顯示方式處理下（因為很可能各個瀏覽器的顯示方式不一）：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Coolwp.net Demo</title>
<style>
.deal meter { -webkit-appearance: none; }
.deal ::-webkit-meter-bar {
height: 1em;
background: white;
border: 1px solid black;
}
.deal ::-webkit-meter-optimum-value { background: green; } /* 好 */
.deal ::-webkit-meter-suboptimum-value { background: orange; } /* 凑合 */
.deal ::-webkit-meter-even-less-good-value { background: blue; } /* 糟糕 */
.deal ::-moz-meter-bar {
background: rgba(0,96,0,.6);
}</style>
</head>
<body>
<p>
默认的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
<meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
<p class="deal">
处理后的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
<meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
</body>
</html>實際顯示效果：
以上是html meter標籤的使用與作用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn