Heim > Artikel > Web-Frontend > Wie verwende ich das HTML5-Fortschritts-Tag? Einführung in die Attribute des Fortschritts-Tags
Wie verwende ich das HTML5-Fortschritts-Tag? Einführung in die Attribute des Fortschritts-Tags
- 寻∝梦Original
- 2018-09-04 11:08:418217Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung des HTML5-Fortschritts-Tags sowie die Verwendung von Attributen des HTML5-Fortschritts-Tags vorgestellt. Schauen wir uns als nächstes gemeinsam diesen Artikel an
Lassen Sie uns zunächst die Verwendung des HTML5-Fortschritts-Tags vorstellen:
Mit dem Tag
Tipp: Bitte verwenden Sie das Tag
Sehen wir uns ein Beispiel für die Verwendung des HTML5-Fortschritts-Tags an:
Markieren Sie „Download-Fortschritt“:
对象的下载进度： <progress value='70' max='100'></progress>
Der Effekt ist wie folgt:
Das Bild ist offensichtlich, daher werde ich nicht mehr sagen.
Lassen Sie uns nun über die Attribute des HTML5-Fortschritts-Tags sprechen:
1 Sie können den Prozentsatz (eine Dezimalzahl von 0 bis 1) über festlegen Wertattribut
Normalerweise können wir den Fortschrittswert auch innerhalb des Elements platzieren, sodass der Text als Backup-Lösung angezeigt werden kann, wenn der Browser (www.php.cn) ihn nicht unterstützt.
<progress value="0.25">25%</progress>
2, Sie können das Max-Attribut verwenden, um den Maximalwert festzulegen, dann ist der Wertebereich 0~Maximalwert
<progress value="25" max="100">25%</progress>
3, das Wertattribut gibt an Abschluss des Fortschrittsbalkens Für den Fortschritt liegt der Wertebereich zwischen 0 und max. Wenn das Max-Attribut nicht festgelegt ist, sollte das Value-Attribut zwischen 0 und 1 liegen.
Wenn kein Wert vorhanden ist, ist der Fortschritt der Fertigstellung ungewiss. Zu diesem Zeitpunkt bedeutet dies, dass die Aufgabe ausgeführt wird, aber es ist nicht bekannt, wie lange es dauern wird, bis sie abgeschlossen ist. Zu diesem Zeitpunkt kann der Fortschritt als Ladevorgang in Webkit-Browsern verwendet werden, was darauf hinweist, dass die Seite geladen wird oder dass Ajax Hintergrunddaten anfordert.
Wenn der Wert nicht festgelegt ist, stellt er einen unsicheren Fortschrittsbalken dar (der Fortschritt läuft in einer Schleife weiter)
<progress></progress>
Dieses dynamische Bild kann nicht angezeigt werden, Sie können einen Blick darauf werfen Machen Sie es selbst, so. Der Stil ist ziemlich interessant.
Tägliche Zusammenfassung des HTML5-Fortschritts-Tags:
Fortschritts-Tag: Dem Namen nach zu urteilen, können Sie wahrscheinlich erraten, was dieses Tag ist, ja, es ist ein Fortschrittsbalken. In HTML5 können wir endlich auf Spott verzichten.
<progress id="PHP中文网" max="100"></progress>
Fortschrittsattribut: Wert: Zeigt den aktuellen Fortschritt an. max: Zeigt den Gesamtfortschritt an. Hinweis: Der Wert der Attribute „Wert“ und „Max“ muss größer als 0 sein und der Wert von „Wert“ muss kleiner oder gleich sein Wert des Max-Attributs. Fall:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PHP中文网之progress标签的应用</title> </head> <body> <h1>PHP中文网之progress标签的应用</h1> <p>完成百分比：<progress max="100"></progress></p> </body> </html>
Dadurch wird auch ein dynamischer Effekt eingerichtet. Der Effekt ist wie folgt:
Dieses Bild ist dynamisch, da Screenshots dies nicht können Erfassen Sie den dynamischen Effekt, daher kann ich ihn nur so betrachten.
Dieser Artikel zur Anwendung des HTML5-Fortschrittsbalkens endet hier Fragen Sie unten.
[Empfehlung des Herausgebers]
Wie verwende ich den HTML5-Header-Tag? Einführung in die Funktion des HTML5-Header-Tags
Das obige ist der detaillierte Inhalt vonWie verwende ich das HTML5-Fortschritts-Tag? Einführung in die Attribute des Fortschritts-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!