Das Tag <meter> bestimmt den Skalar im selben Ausmaß oder die grafische Darstellung der Bruchzahl. Das Tag kann verwendet werden, wenn es notwendig ist, zum Beispiel die Batterieladung in Prozent, den Flüssigkeitsumfang, Anteil der Bevölkerung, Stimmrecht usw. anzuzeigen. Für den Gebrauch des Tages <meter> muss der maximale Wert bekannt sein.
Das Tag <meter> wird für die Bestimmung von Progressindicator nicht verwendet. Für diesen Zweck wird das Tag <progress> verwendet.
Syntax
Das Tag <meter> wird gepaart verwendet, der Endtag ist obligatorisch.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<meter value="4" min="0" max="10">4 из 10</meter> 4 von 10<br>
<meter value="0.75">75%</meter> 75%
</body>
</html>Ergebnis
Verwenden Sie die CSS-Eigenschaften background-color, box-shadow, width und height, um das Element <progress> zu stylen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 220px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
box-shadow: 0 0 3px #666 inset;
}
progress[value]::-webkit-progress-value {
background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
-webkit-linear-gradient(top, #96f204, #8ebf42),
-webkit-linear-gradient(right, #96f204, #8ebf42);
background-size: 40px 20px, 10%;
}
</style>
</head>
<body>
<p>Herunterladen:
<progress value="35" max="100"></progress>
<span>35%</span>
</p>
<p>Fortschrittsanzeige:
<progress value="80" max="100"></progress>
<span>80%</span>
</p>
</body>
</html>Ergebnis
Attribut
| Attribut | Wert | Beschreibung |
|---|---|---|
| form | form_id | Es bestimmt die Form (Formen), zu der das Tag <meter> gehört. |
| high | number | Es definiert die großen Werte (aber nicht maximale). Wenn der Wert von high kleiner ist als der Wert von low, bedeutet das, dass high = low. Wenn high größer ist als max, bedeutet das, dass high = max. |
| low | number | Es definiert die kleinen Werte (aber nicht minimale). Dieser Wert muss kleiner sein als high. Wenn der Wert von low kleiner ist als der Wert von min, bedeutet das, dass low = min. |
| max | number | Es bestimmt den maximal möglichen Wert. Voreingestellt ist der Wert 1. |
| min | number | Es bestimmt den minimal möglichen Wert. Voreingestellt ist der Wert 0. |
| optimum | number | Es definiert die optimale Zahl, die innerhalb des Ausmaßes sein muss, und mit den Attributen min und max bestimmt wird. Es kann groß sein als der Wert von high. Die Farbe hängt von der Lage von optimum ab: Rot: min ≤ optimum < low Gelb: low ≤ optimum ≤ high Grün: high < optimum ≤ max |
| value | number | Es definiert den aktuellen Wert, der innerhalb des Ausmaßes, der mit den Attributen min und max bestimmt wird. Es ist einobligatorisches Attribut. |
Das Tag <meter> unterschtützt Globale Attribute und Globale Eventhandler.
Browser-Support
|
|
|
|
|---|---|---|---|
| 8+ | 6+ | 6+ | 11+ |
Übe dein Wissen
Was gibt der 'meter' HTML-Tag an?
Richtig!
Falsch!