recherche

Maison >interface Web >tutoriel HTML >Explication détaillée de l'utilisation et de la fonction de la balise de compteur HTML

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

黄舟
黄舟original
2017-06-29 14:06:496358parcourir

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>

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

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>

Effet d'affichage réel :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Description détaillée des balises HTML mobiles head et des balises métaArticle suivant：Description détaillée des balises HTML mobiles head et des balises méta

Articles Liés

Voir plus