ホームページ > 記事 > ウェブフロントエンド > htmlメータータグの使い方と機能を詳しく解説
htmlメータータグの使い方と機能を詳しく解説
- 黄舟オリジナル
- 2017-06-29 14:06:496288ブラウズ
定義と使用法:
ヒントと注:
注: メジャーの範囲は、テキストまたは最小/最大属性で定義する必要があります。
例:
<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メータータグの使い方と機能を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。