Avant-propos
HTML 5 est comme une révolution, qui se poursuit vigoureusement dans l'ère post-Web2.0.
Qu’est-ce que HTML 5, je n’ai pas besoin d’entrer dans les détails ici. Quant à l'innovation du HTML 5, selon ma compréhension, elle peut se résumer à un système de balises avec une sémantique claire, un support multimédia riche qui simplifie la complexité, une technologie de stockage de données locale magique, une animation riche (canvas) qui ne nécessite pas de plug-ins. et un support API puissant. En bref, HTML 5 rend l’interaction homme-machine plus confortable et conviviale. L’ancien manque de prise en charge des applications Rich Media et du stockage natif n’est plus un problème pour les navigateurs. Faire passer le Web d'une plate-forme de contenu à une plate-forme d'applications standardisée et unifier les normes des différents camps de plates-formes est l'intention initiale de la révolution HTML 5. Dans cet article, je vais présenter quelques idées et expliquer l'une des innovations de HTML 5 : une structure plus claire et plus concise avec une sémantique.

Commencez par la "tête" Un code d'en-tête XHTML standard devrait ressembler à ceci :

Copier le codeLe code est le suivant :

Vous vous souvenez ? Allez-vous le mémoriser par cœur ? Bien sûr que non! Il suffit de copier et coller mécaniquement.
Regardez à quoi ressemble un en-tête HTML 5 standard :

Copiez le codeLe code est le suivant :

C'est plus compliqué que simple, je n'ai pas besoin de le dire. Oui, l’en-tête HTML 5 peut être si simple et facile à retenir ! De plus, la casse, les guillemets et la barre oblique inverse avant le dernier crochet angulaire peuvent être ignorés.
Pourquoi peut-il être si lâche ? En fait, si vous envoyez du XHTML au format texte/html, le navigateur peut bien l'analyser et le navigateur ne se soucie pas de la syntaxe du code. Par conséquent, HTML 5 est métaphysique. Il peut enfreindre certaines normes originales, mais il peut toujours fonctionner correctement dans les navigateurs.
Bien sûr, pour faciliter l'assistance de l'équipe et la maintenance ultérieure, nous devons toujours unifier un style d'écriture que vous aimez, tel que :

Copier le code Le code est le suivant :

charset=" gb2312" />
...

De plus, bien que HTML 5 ne soit actuellement pas supporté par tous les navigateurs, cela permet d'économiser plus de 100 octets (pour les sites avec plus d'un million de PV quotidiens, cela peut économiser beaucoup de trafic) ) la tête est désormais parfaitement compatible. Si vous avez étudié les modes d'analyse du navigateur, sachez que la page déclenchera un mode étrange si le doctype n'est pas défini, mais tant que est défini, le navigateur peut analyser la page en mode standard, et il y a pas besoin de spécifier un certain type de DTD.

Nouveau système de balises sémantiques

Le codage sémantique est une compétence essentielle pour un développeur front-end qualifié. Cependant, à mesure que les pages Web deviennent de plus en plus riches, seules les balises xhtml d'origine sont utilisées pour la désémantisation. eux. C’était évidemment au-delà de ses capacités. Dieu a dit : « Que la lumière soit ! » Et la lumière fut. Par conséquent, HTML 5 fournit une série de nouvelles balises et les attributs correspondants pour refléter la sémantique typique des sites Web modernes. Pratiquez la vérité. Écrivons un exemple :

Copiez le code

Le code est le suivant :

Ce qui précède est une simple page de blog HTML partielle, composée de l'en-tête et de la zone d'affichage de l'article. , à droite Composé d'une barre latérale et d'une barre inférieure. Le codage est soigné et conforme à la sémantique du XHTML. Il peut bien fonctionner même en HTML 5. Mais pour le navigateur, il s'agit d'un morceau de code sans poids distinctif, plutôt que d'une balise qui permet aux machines de comprendre la sémantique pour définir le bloc correspondant. Par exemple, les navigateurs standards (tels que Firefox, Chrome et même la nouvelle version d'IE) disposent d'une touche de raccourci qui peut amener les clients à accéder directement à la page de navigation, mais le problème est que tous les blocs sont définis avec DIV, et l'ID valeur du DIV Elle est déterminée par le développeur, donc le navigateur ne sait pas quel bloc doit être le lien de navigation. L’émergence de nouvelles balises HTML 5 vient compenser cette lacune. Ensuite, le code ci-dessus peut s'écrire ainsi en HTML 5 :

Copiez le code

Le code est le suivant :

Titre du site Web

; /hgroup>

< 🎜 >

Ceci est un article sur les nouvelles balises structurelles de HTML 5.

Ceci est un article sur les nouvelles balises de structure de HTML 5.

.Think, un homme ordinaire qui se concentre sur la technologie Web frontale.

la structure des pages HTML peut être comme ceci La beauté peut être vue d'un coup d'œil sans commentaire. Pour le navigateur, trouver le bloc correspondant ne sera plus une perte.
Comment utiliser les nouvelles balises HTML 5 pour structurer des éléments
À travers l'exemple ci-dessus, nous comprenons l'innovation structurelle des nouvelles balises HTML 5, mais lorsqu'il s'agit d'une utilisation réelle, comment les utiliser de manière appropriée ? Je pense que c'est aussi une question que de nombreux apprenants HTML 5 souhaitent poser. Tout comme la sémantique XHTML, l'utilisation des balises sémantiques HTML 5 devrait également suivre : chaque balise a sa signification spécifique, et la sémantique nous permet d'utiliser les balises appropriées à l'endroit approprié pour mieux comprendre les personnes et la machine (la machine peut être comprise comme un navigateur ou un moteur de recherche) peut le comprendre d'un seul coup d'œil. Par exemple, la balise d'en-tête est généralement le premier élément de bloc de la page (la balise d'en-tête peut également être utilisée dans des éléments d'en-tête de type, comme le titre d'un bloc d'article), qui contient les informations sur le sujet de la page ; est généralement utilisé pour envelopper les informations de navigation ;footer est généralement utilisé pour envelopper les informations au bas de la page, etc.
Ce qui suit est l'explication sémantique et les directives d'utilisation des nouvelles balises de classes structurelles couramment utilisées que j'ai répertoriées en référence au manuel HTML 5 :
balise

Explication manuelle : définir l'en-tête de une section ou un document.
Consignes d'utilisation : généralement utilisé pour inclure des en-têtes de page, mais peut également être utilisé pour d'autres en-têtes de zone, tels que les en-têtes d'articles :

Copier le code

Le code est le suivant :

Titre du site

Sous-titre du site

Explication manuelle : utilisée pour modifier le titre d'une page Web ou d'une combinaison de sections. .
Consignes d'utilisation : utilisé pour la combinaison de types de titres, tels que le titre et le sous-titre d'un article :

Copier le code code Comme suit :

Ceci est un article présentant les balises structurelles HTML 5

5< ;/h2>

Copier code

Le code est le suivant : <à part>

À propos de l'auteur

Mr.Think, une personne ordinaire qui se concentre sur la technologie Web frontale.

Balise
Explication manuelle : Définir une section dans le document. Tels que les chapitres, les en-têtes, les pieds de page ou d’autres parties du document.
Consignes d'utilisation : utilisé pour le contenu sectionné, il démarrera une nouvelle section dans le flux de documents :

Copier le code

Le code est le suivant :

Qu'est-ce que la section ?

Une nouvelle section

À propos de la section

...

Généralement, il contiendra le nom de l'auteur, la date de création du document et/ou ses coordonnées.
Consignes d'utilisation : généralement utilisé pour envelopper le bas commun de la page entière, et peut également être utilisé au bas d'autres zones, comme le bas d'un article :

Copier le code

Le code est le suivant :

L'innovation du HTML5 et la beauté des compétences du didacticiel structure_html5

sous-titre

À propos de l'auteur

Titre du site Web

Titre du site

Sous-titre du site

Ceci est un article présentant les balises structurelles HTML 5

5< ;/h2>

À propos de l'auteur

Qu'est-ce que la section ?

Une nouvelle section

À propos de la section

Innovation en HTML 5