Une brève discussion sur les balises nouvelles et abandonnées en HTML5

Les éléments HTML 4.01 suivants ont été supprimés dans HTML5. Bien que les navigateurs prennent toujours en charge ces balises pour des raisons de compatibilité, il est recommandé d'utiliser de nouvelles balises alternatives. Paradoxalement, les anciens navigateurs ne prennent pas suffisamment en charge les nouvelles balises.

Ces éléments incluent basefont, big, center, font, s, strike, tt, u. Ces éléments sont uniquement destinés à l'affichage de la page et le contenu affiché doit être complété par CSS.

Ces éléments incluent frameset, frame et noframes. HTML5 ne prend pas en charge les cadres frame, mais prend uniquement en charge les cadres iframe, ou utilise un format côté serveur composé de plusieurs pages conformes à la page et supprime les trois balises ci-dessus.

Ces éléments incluent l'applet, le bgsound, le clignotement, le chapiteau et d'autres balises.

Abolir rb, utiliser ruby ​​​​pour remplacer l'acronyme Utiliser abbr pour remplacer abolition dir Utiliser ul pour remplacer isindex Utiliser une combinaison de formulaire et d'entrée pour remplacer listing Utiliser pre pour remplacer xmp Utiliser le code pour remplacer abolition nextid Utiliser les guids pour abolir le texte en clair Utiliser text/ plian (corps non formaté) substitution de type MIME

Dans HTML4.01, les divs sont largement utilisés dans divers environnements de mise en page sans définition claire. HTML5 sémantique les divs pour le référencement, et les balises structurelles nouvellement ajoutées sont les suivantes :

a), l'élément section représente un bloc de contenu dans la page, tel qu'un chapitre, un en-tête, un pied de page ou une autre partie de la page. Il peut être utilisé en combinaison avec h1, h2... et d'autres éléments pour représenter la structure du document. Exemple : <section>……</section> en HTML5 ; <div>……</div> en HTML4.

b). L'élément article représente un élément de contenu indépendant sur la page qui n'est pas lié au contexte. Par exemple, un article.

c) L'élément side représente des informations auxiliaires liées au contenu de l'élément article autre que le contenu de l'élément article.

d). L'élément d'en-tête représente un bloc de contenu dans la page ou le titre de la page entière.

e). L'élément hgroup représente une combinaison des titres de la page entière ou d'un bloc de contenu dans la page.

f), l'élément footer représente la note de bas de page de la page entière ou un bloc de contenu dans la page. En règle générale, il comprend le nom du créateur, la date de création et les coordonnées du créateur.

g). L'élément nav représente la partie lien de navigation de la page.

h). L'élément figure représente un élément de contenu de flux indépendant, représentant généralement une unité indépendante dans le contenu de flux principal du document. Utilisez l'élément figcaption pour ajouter une légende à un groupe d'éléments de figure. Par exemple:

 <figure> ​<figcaption>RPC</figcaption> ​<p>La République populaire de Chine est née en 1949</p></figure>

Écriture courante en HTML4

 <dl> ​<h1>prc</h1> ​<p>La République populaire de Chine est née en 1949</p> ​</dl>

Résultats en cours d'exécution :

2.1. mètre

Représente une valeur dans une plage spécifique, qui peut être utilisée pour les salaires, les quantités, les pourcentages, etc. max représente la valeur maximale, min représente la valeur minimale et value représente la valeur actuelle.

 <meter max=100 min=0 value=60 style=width: 300px;></meter>

Vous pouvez utiliser js pour le contrôler de 0 à 100.

temps. Représente une valeur d'heure. L'attribut datetime met l'accent sur l'heure de la conférence : <time>2015-10-6</time>.

 <heure>2015-10-6</heure>

Nous commençons les cours à <time>8h30</time> chaque matin. J'ai un rendez-vous le <time datetime=2017-02-14>Saint-Valentin</time>.

Étant donné que cette balise est une balise sémantique, elle n'a aucun effet particulier lorsqu'elle est affichée sur un navigateur. C'est fondamentalement le même effet que si la balise n'était pas définie.

Utilisé pour représenter une barre de progression

 <h3>progrès</h3><progress value=75 max=100></progress>

max : valeur maximale, valeur à la fin

valeur : valeur actuelle

Cette balise définit une liste de données facultatives. Utilisé conjointement avec l'élément d'entrée, vous pouvez créer une liste déroulante de valeurs d'entrée.

Lorsqu'elles sont combinées avec la saisie, la sélection et la saisie peuvent être complétées.

 <input type=text list=countries /><datalist id=countries> <option value=Chine></option> <option value=États-Unis></option> <option value=Japon></option></datalist >

Il est principalement utilisé pour présenter visuellement à l'utilisateur le texte qui doit être mis en évidence ou mis en évidence. Les mots-clés de recherche sont mis en évidence dans les résultats de recherche d'applications typiques. HTML5<mark></mark>;HTML4 <span></span>.

Définissez les commentaires rubis (pinyin ou caractères chinois). Utilisé avec les balises <ruby> et <rt>. L'élément ruby ​​​​est constitué d'un ou plusieurs caractères (nécessitant une explication/prononciation) et d'un élément rt qui fournit ces informations, ainsi que d'un élément rp facultatif qui définit le contenu à afficher lorsque le navigateur ne prend pas en charge le ruby ​​​​​​élément.

Définit l'interprétation ou la prononciation d'un caractère (phonétique ou caractère chinois).

Utilisé dans les commentaires Ruby pour définir ce qui est affiché par les navigateurs qui ne prennent pas en charge les éléments Ruby.

Représente un saut de ligne doux. La différence avec l'élément br : l'élément br indique qu'un saut de ligne doit être fait ici ; wbr indique que lorsque la fenêtre du navigateur ou l'élément parent est large (quand il n'y a pas besoin d'un saut de ligne), la ligne ne sera pas cassé, mais lorsque la largeur n'est pas suffisante, la ligne sera automatiquement renvoyée ici.

Définissez des graphiques, tels que des graphiques et autres images. L'élément <canvas> est simplement un conteneur graphique (canvas) et vous devez utiliser des scripts pour dessiner des graphiques.

 <canvas id=myCanvas></canvas><script type=text/javascript> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ; ctx.fillRect(0, 0, 80, 100);</script>

Représente un bouton de commande, tel qu'un bouton radio, une case à cocher ou un bouton. L'élément de commande n'est visible que s'il se trouve à l'intérieur d'un élément de menu. Sinon cet élément ne sera pas affiché, mais il pourra être utilisé pour spécifier des raccourcis clavier.

 <menu> ​<command onclick=alert('Hello World')> ​Cliquez sur moi !</command> ​</menu>

Utilisé pour décrire les détails d'un document ou d'une partie d'un document. Peut être utilisé conjointement avec la balise de résumé, qui peut définir des titres pour plus de détails. Le titre est visible, et lorsque l'utilisateur clique sur le titre, les détails s'affichent. Le résumé doit être le premier élément enfant des détails.

Définissez une liste d'options. Utilisez cet élément en conjonction avec l'élément d'entrée pour définir les valeurs possibles de l'entrée. La liste de données et ses options ne sont pas affichées, c'est juste une liste de valeurs d'entrée valides. Utilisez l'attribut list de l'élément d'entrée pour lier la liste de données.

Définissez différents types de sortie, tels que la sortie de script.

 <form action=form_action.asp method=get name=sumform> ​<output name=sum></output> ​</form>

Définir la liste des menus. Utilisez cette étiquette lorsque vous souhaitez répertorier les contrôles de formulaire. Notez la différence avec nav. Menu est spécifiquement utilisé pour les contrôles de formulaire.

Si vous avez besoin de lire de l'audio et de la vidéo sur la page, les méthodes que nous utilisons souvent sont :

a)、intégrer

 <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf'allowFullScreen='true' quality='high' width='480' height='400' align=' middle'allowScriptAccess='always' type='application/x-shockwave-flash'></embed>​<embed src=img/iceage4.mp4></embed>

b), utilise Flash Player

Comme certains plug-ins tiers, flowplayer602

Les composants multimédia HTML5 font référence aux composants vidéo (vidéo) et aux composants audio (audio). Les composants multimédia HTML5 peuvent intégrer des composants multimédia directement sur vos pages Web sans l'aide de plug-ins tiers tels que Flash Player. La nouvelle capacité des navigateurs à offrir une prise en charge native de la vidéo permet aux développeurs Web d'ajouter plus facilement des composants vidéo à leurs sites Web sans dépendre de la disponibilité de plug-ins externes. En raison des limitations de la technologie Flash actuellement utilisée par Apple sur l'iPhone et l'iPad, les capacités des composants multimédia HTML5 sont particulièrement importantes.

Utilisé pour lire des vidéos, des films

La formule de base du label est la suivante :

 <video width=800 height=600 CONTROLS=Controls poster=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> Le navigateur actuel ne prend pas en charge la lecture vidéo directe : <a href=a.mp4>Télécharger. vidéo</ a></video>

La source est la source vidéo, qui peut être de plusieurs types. En cas d'échec, la suivante sera sélectionnée. Il existe principalement trois types :

Ogg = fichier Ogg avec encodage vidéo Theora et encodage audio Vorbis MPEG4 = fichier MPEG 4 avec encodage vidéo H.264 et encodage audio AAC WebM = fichier WebM avec encodage vidéo VP8 et encodage audio Vorbis

Avis:

 <video src=img/a.mp4 Controls=controls poster=img/1.jpg>Votre navigateur est trop ancien, veuillez le mettre à jour, télécharger la vidéo <a href=#>Adresse</a></video>

Le contenu innerHTML de la plupart des balises HTML5 est le contenu affiché lorsque le navigateur ne prend pas en charge la balise.

La différence entre la liaison d'événements et l'écoute :

 <!DOCTYPE html><html>​ <head> <meta charset=UTF-8> <title>La différence entre la liaison d'événements et la surveillance</title> </head>​ <body> <button id=btnA>Bouton A </button> <button id=btnB>Bouton B</button> <script type=text/javascript> var btnA = document.getElementById(btnA var); btnB = document.getElementById(btnB); btnA.onclick = function() { alert(vous avez cliqué); } btnA.onclick = function() { alert(vous avez cliqué à nouveau); { alert(vous avez cliqué },false); btnB.addEventListener(click,function(event){ alert(vous avez encore cliqué); },false); </script> </body>​</html>

Après avoir lié un événement à l'aide du nom de l'événement on, la liaison écrasera l'événement lié précédemment, c'est-à-dire que le dernier événement lié prendra effet ;

L'utilisation de addEventListener pour lier des événements ne sera pas écrasée et plusieurs événements identiques peuvent être liés à un élément en même temps.

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>Balise vidéo</title> </head> <body> <video id=videoIce width=800 height=600 CONTROLS=Controls Poster =content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value= autostart=true&amp;file=myvideo.swf /> </object> Le navigateur actuel ne prend pas en charge la lecture vidéo directe Cliquez ici pour télécharger la vidéo : <a href=content/a.mp4>Télécharger la vidéo</a>. </video> <h2> <button onclick=play()>Jouer</button> <button onclick=pause()>Pause</button> <span id=msg></span> </h2> <type de script =text/javascript> var videoIce=document.getElementById(videoIce); function play() { videoIce.play(); ​ function pause() { videoIce.pause(); } videoIce.ontimeupdate = function() { document.getElementById(msg).innerHTML=videoIce.currentTime; } </script> </body>​</html>

L'audio peut réaliser la fonction de lecture du son et de la musique.

 <audio src=http://baidu/demo/test.mp3 CONTROLS >Votre navigateur ne prend pas en charge l'élément audio</autio><audio src=content/a.mp3 CONTROLS=Controls autoplay=autoplay></audio>

De nombreux attributs de la balise audio sont les mêmes que ceux de la vidéo :

autoplay : true|false, si vrai, l'audio sera joué dès qu'il sera prêt. contrôles : vrai|faux Si vrai, affiche les contrôles, tels qu'un bouton de lecture, à l'utilisateur. end : la valeur numérique définit l'endroit où le lecteur arrête la lecture dans le flux audio. Par défaut, le son sera joué jusqu'à la fin. loopend : la valeur numérique définit la position où la lecture en boucle s'arrête dans le flux audio. La valeur par défaut est la valeur de l'attribut end. loopstart : la valeur numérique définit la position de départ de la lecture en boucle dans le flux audio. La valeur par défaut est la valeur de l'attribut start. playcount : la valeur numérique définit combien de fois le clip audio est lu. La valeur par défaut est 1. src : url L'URL de l'audio en cours de lecture. start : la valeur numérique définit la position dans le flux audio où le lecteur commence la lecture. Par défaut, le son est joué au début.

Exemple d'utilisation de l'élément source comme sous-balise d'un élément multimédia :

 <audio>​<source src='test.mp3 ' type='audio/mpeg'/>​<source src='test.ogg ' type='audio/ogg'/>​<source src='test.spx ' type='audio/ogg'/>​</audio>

À l'aide de l'élément source, le navigateur recherche séquentiellement dans la liste jusqu'à ce qu'il trouve un format de fichier qu'il peut lire. Une fois trouvé, il lit le fichier et ignore les autres éléments qui suivent.

L'API de l'audio est fondamentalement la même que celle de la vidéo. Voici un exemple de personnalisation du volume :

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>balise audio</title> </head> <body> <h2>balise audio</h2> <audio src=content/ fcml.mp3 CONTROLS=Controls autoplay=autoplay id=mp3> <marquee><h2>Changez de navigateur, il est trop vieux</h2></marquee> </audio> <input type=range min=0 max=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value*0.01 } < /script> </body></html>

Le volume n'est qu'entre 0-1.

Utilisé pour intégrer du contenu (y compris divers médias). Le format peut être Midi, Wav, AIFF, AU, MP3, flash, etc.

Exemple : <embed src=flash.swf /> Exemple de code en HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.