Explication détaillée de l'utilisation et de la fonction de la balise de compteur HTML-tutoriel HTML-php.cn

Explication détaillée de l'utilisation et de la fonction de la balise de compteur HTML

黄舟

Libérer： 2017-06-29 14:06:49

original

6356 Les gens l'ont consulté

Définition et utilisation : La balise
À utiliser uniquement pour les mesures avec des valeurs maximales et minimales connues.

Conseils et Notes :
Remarque : La plage de la mesure doit être définie, soit dans le texte, soit dans les attributs min/max.
Exemple :

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

Copier après la connexion

est une nouvelle balise ajoutée au HTML5 pour définir les poids et les mesures. À utiliser uniquement pour les mesures avec des valeurs maximales et minimales connues. Autrement dit, la plage de la mesure doit être définie, soit dans le texte de l'élément, soit dans les attributs min/max.

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

Copier après la connexion

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

Copier après la connexion

Vous pouvez utiliser des pseudo-éléments CSS pour traiter la méthode d'affichage par défaut (car la méthode d'affichage de chaque navigateur peut être différente) :

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

Copier après la connexion

Effet d'affichage réel :

Explication détaillée de lutilisation et de la fonction de la balise de compteur HTML