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

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 :

sous-titre

< ;li>CSS

JavaScript

--//header end-->

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

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

À propos de l'auteur

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

🎜 >

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>

• JavaScript

< 🎜 >

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.

Bas de la page Web

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>

Explication manuelle : Définir la partie du lien de navigation.
Consignes d'utilisation : Utilisé pour définir la partie navigation de la page :

Copiez le code Le code est tel suit :

• HTML 5
• JavaScript< /li>
  

Le contenu de l’aparté doit être lié au contenu de l’article.
Guide d'utilisation : utilisé pour le contenu sectionné, il lancera une nouvelle section dans le flux de documents, généralement utilisé pour les barres latérales liées au contenu de l'article :

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

p>

...

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 :

COPYRIGHT@Mr.Think

Balise Définition manuelle : Définir le contenu externe. Par exemple, un nouvel article d'un fournisseur d'information externe, ou un texte d'un blog, ou un texte d'un forum . Ou du contenu provenant d’autres sources externes.

Guide d'utilisation : Comme son nom l'indique, il est généralement utilisé dans les blocs d'articles :

Copier le code

Le code est la suivante :

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

;

Innovation en HTML 5

2011.03.20 >< /header>

Détails du contenu de l'article

Balise

Explication manuelle : Utilisée pour combiner des éléments.
Guide d'utilisation : principalement utilisé pour combiner des images et des descriptions d'images :

Copiez le code

Le code est le suivant :

Ici est la description de l'image

Explication manuelle : Définir la liste des menus. Utilisez cette étiquette lorsque vous souhaitez répertorier les contrôles de formulaire.
Guide d'utilisation : utilisé dans les blocs de menu pour définir des listes de menus ou des options de menu :

Copier le codeLe code est comme suit :

HTML 5

CSS

/li>



Les autres nouvelles balises de HTML 5 ne seront pas expliquées une par une. Veuillez vérifier vous-même le manuel.

En fait, ces éléments, comme les balises div, h1, inpu et autres de XHTML, sont faciles à utiliser tant que vous pratiquez davantage.
À propos de la compatibilité
Si vous êtes une personne qui aime étudier et faire attention au front-end, sachez que la structure des pages de Taobao a utilisé un grand nombre de nouvelles balises HTML 5. Donc, ce que je veux dire, c'est que tant que vous osez essayer, la compatibilité n'est pas un problème. Il existe de nombreuses méthodes compatibles sur Internet (cet article concerne la structure, ha~).

Postface
Toute nouvelle technologie nécessite un processus d'adaptation. Si vous êtes prêt à devenir un excellent développeur Web front-end, vous devez constamment essayer d'accepter la dernière technologie front-end.
Sun Wen a dit un jour que si vous voulez expérimenter le bonheur de la civilisation, vous devez expérimenter la douleur de la civilisation. Telle est la révolution de l’humanité, tout comme la révolution du HTML 5. Le déclin progressif d'IE a permis aux principaux fabricants de navigateurs d'entrer pour la première fois dans la période des Royaumes combattants, et les héros se disputent le trône. En ce qui concerne les développeurs, nous attendons uniquement des grands fabricants de navigateurs qu'ils suivent les mêmes normes autant que possible, au lieu de s'effondrer après qu'un groupe de héros se disputent un navigateur. Parce que présenter efficacement et parfaitement la même application à tous les types d’utilisateurs est notre objectif ultime.

De cette façon, cet article part du doctype de la page, puis utilise les nouvelles balises HTML 5 pour construire une structure de page plus sémantique, puis explique quelques nouvelles balises liées à la structure de la page. Je pense que tout le monde a une nouvelle compréhension des nouvelles balises structurelles de HTML 5. Si vous êtes intéressé, ouvrez votre IDE, écrivez un morceau de code construit avec les nouvelles balises HTML 5, puis utilisez CSS pour décrire votre grandeur. Planifiez-le ! (Source :

Mr.Think)