Ausführliche Erläuterung der Verwendung und Funktion des HTML-Meter-Tags-HTML-Tutorial-php.cn

Ausführliche Erläuterung der Verwendung und Funktion des HTML-Meter-Tags

黄舟

Freigeben： 2017-06-29 14:06:49

Original

6441 Leute haben es durchsucht

Definition und Verwendung: Das Tag
definiert die Messung (Einheit). Nur für Messungen mit bekannten Maximal- und Minimalwerten verwenden.

Tipps und Hinweise:
Hinweis: Der Bereich der Kennzahl muss entweder im Text oder in den Min/Max-Attributen definiert werden.
Beispiel:

<meter min="0" max="20">5</meter>
<meter>2 out of 10</meter>
<meter>30%</meter>

Nach dem Login kopieren

-Tag ist ein neues -Tag, das zu HTML5 hinzugefügt wurde, um Gewichte und Maße zu definieren. Nur für Messungen mit bekannten Maximal- und Minimalwerten verwenden. Das heißt, der Bereich der Kennzahl muss entweder im Text des Elements oder in den Min/Max-Attributen definiert werden.

<meter min="0" max="20">5</meter>
<meter>2 out of 10</meter>
<meter>30%</meter>

Nach dem Login kopieren

high    number    定义度量的值位于哪个点，被界定为高的值。    
low    number    定义度量的值位于哪个点，被界定为低的值。    
max    number    定义最大值。默认值是 1。    
min    number    定义最小值。默认值是 0。    
optimum    number    定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。    
value    number    定义度量的值。

Nach dem Login kopieren

Sie können CSS-Pseudoelemente verwenden, um die Standardanzeigemethode zu verarbeiten (da die Anzeigemethode jedes Browsers unterschiedlich sein kann):

<!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>

Nach dem Login kopieren

Tatsächlicher Anzeigeeffekt :

Ausführliche Erläuterung der Verwendung und Funktion des HTML-Meter-Tags

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung und Funktion des HTML-Meter-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!