Maison > Article > interface Web > Comment utiliser la balise de progression html5 ? Introduction aux attributs de la balise de progression
Comment utiliser la balise de progression html5 ? Introduction aux attributs de la balise de progression
- 寻∝梦original
- 2018-09-04 11:08:418279parcourir
Cet article présente principalement l'utilisation de la balise de progression html5, ainsi que l'utilisation des attributs de la balise de progression html5. Ensuite, regardons cet article ensemble
Tout d'abord, introduisons l'utilisation de la balise de progression html5 :
Vous pouvez utiliser la balise
Conseil : Veuillez utiliser la balise
Regardons un exemple d'utilisation de la balise de progression html5 :
Marquer "progression du téléchargement" :
对象的下载进度： <progress value='70' max='100'></progress>
L'effet est le suivant montré :
La photo est évidente, donc je n'en dirai pas plus.
Parlons maintenant des attributs de la balise de progression html5 :
1 Vous pouvez définir le pourcentage (une décimale de 0 à 1) via le. attribut value
Habituellement, nous pouvons également placer la valeur de progression à l'intérieur de l'élément, de sorte que lorsque le navigateur (www.php.cn) ne la prend pas en charge, le texte puisse être affiché comme solution de sauvegarde.
<progress value="0.25">25%</progress>
2, vous pouvez utiliser l'attribut max pour définir la valeur maximale, puis la plage de valeurs est 0 ~ valeur maximale
<progress value="25" max="100">25%</progress>
3, le L'attribut value indique que la barre de progression est terminée. La plage de valeurs est comprise entre 0 et max. Si l'attribut max n'est pas défini, l'attribut value doit être compris entre 0 et 1.
S'il n'y a aucune valeur, alors la progression de l'achèvement est incertaine. À l’heure actuelle, cela signifie que la tâche est en cours, mais on ne sait pas combien de temps il faudra pour la terminer. À l'heure actuelle, la progression peut être utilisée comme chargement dans les navigateurs Webkit, indiquant que la page est en cours de chargement ou qu'Ajax demande des données d'arrière-plan.
Si la valeur n'est pas définie, elle représentera une barre de progression incertaine (la progression continuera à glisser en boucle)
<progress></progress>
Cette image dynamique ne peut pas être affichée. regardez-le vous-même. Ce style est assez intéressant.
Résumé quotidien de la balise de progression html5 :
balise de progression : à en juger par le nom, vous pouvez probablement deviner ce qu'est cette balise, oui, c'est une barre de progression. En HTML5, nous pouvons enfin supprimer les moqueries.
<progress id="PHP中文网" max="100"></progress>
attribut progress : valeur : indique la progression actuelle max : indique la progression totale Remarque : la valeur des attributs value et max doit être supérieure à 0 et la valeur de value est inférieure ou égale à la valeur de l'attribut max. Cas :
<!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>
Cela définit également un effet dynamique, l'effet est comme indiqué ci-dessous :
Cette image est dynamique car la capture d'écran est pris Cela ne peut pas être dynamique, donc je ne peux le voir que de cette façon. Vous pouvez l'essayer vous-même
Cet article sur l'application de l'étiquette de la barre de progression html5 se termine ici. demandez ci-dessous.
[Recommandation de la rédaction]
Comment utiliser la balise d'en-tête html5 ? Introduction à la fonction de la balise d'en-tête html5
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!