HTML5 Innovation: la beauté de la structure

Auteur：Eve Cole Date de mise à jour：2025-03-27 16:00:04

HTML 5 est comme une révolution et bat son plein à l'ère post-Web2.0.

Qu'est-ce que HTML 5, je n'ai pas besoin d'aller dans les détails ici. Selon ma compréhension, l'innovation de HTML 5 peut être résumé comme un système d'étiquette sémantique, un support médiatique simplifié et riche, une technologie de stockage de données locale magique, une animation riche (toile) qui ne nécessite pas de plug-ins et un puissant support API. En bref, HTML 5 rend l'interaction informatique et l'interaction sur le réseau humain plus confortable et convient aux utilisateurs. Le manque de support précédent pour les applications médiatiques riches et ce stockage n'est plus pénible pour les navigateurs. L'intention d'origine de la révolution HTML 5 est de promouvoir le Web d'une plate-forme de contenu à une plate-forme d'application standardisée et d'unifier les normes de chaque camp de plate-forme.

Cet article explique l'une des innovations de HTML 5: une structure plus claire et concise.

Commencez depuis le début

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

<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

<adal>

</ head>

Vous souvenez-vous? Allez-vous le mémoriser par Rote? Bien sûr que non! Nous n'avons besoin que d'une copie mécanique et d'une pâte.

Jetons un coup d'œil à la façon dont un en-tête HTML 5 standard est:

<! doctype html>

Je n'ai pas besoin de dire lequel est le plus compliqué et lequel est simple. Oui, l'en-tête HTML 5 peut être si simple qu'il peut être rappelé facilement! En outre, le cas, les citations et les barres révocables avant le dernier support d'angle peuvent être ignorés.

Pourquoi peut-il être si lâche? En fait, si XHTML est envoyé en texte / HTML, le navigateur peut également bien l'analyser et le navigateur ne se soucie pas de la syntaxe du code. Ainsi, HTML 5 est métaphysique, il peut briser certaines des normes d'origine, mais elle peut toujours bien fonctionner dans le navigateur.

Bien sûr, pour la commodité de l'assistance en équipe et de la maintenance ultérieure, nous devons toujours unifier le style d'écriture que vous aimez, comme:

<! doctype html>

<html>

<adal>

...

</ head>

<body>

...

</docy>

</html>

De plus, bien que HTML 5 ne soit pas actuellement pris en charge par tous les navigateurs, cet en-tête qui peut économiser plus de 100 octets (pour les sites avec des niveaux de PV quotidiens ou plus d'un million, il peut économiser beaucoup de trafic). Si vous avez fait des recherches sur le mode de résolution du navigateur, vous devez savoir que les pages déclencheront le mode bizarre sans définir Doctype, et tant que le navigateur <! Doctype HTML> est défini, vous pouvez analyser les pages en mode standard sans spécifier un certain type de DTD.

Nouveau système d'étiquetage sémantique

Le codage sémantique est une compétence nécessaire pour les développeurs frontaux qualifiés, mais à mesure que les pages Web deviennent de plus en plus riches, il est évident qu'ils ne sont pas en mesure de le faire en utilisant simplement la balise XHTML d'origine à déménager. Dieu a dit: il doit y avoir de la lumière! Ensuite, il y a de la lumière. Par conséquent, HTML 5 fournit une série de nouvelles balises et des attributs correspondants pour refléter la sémantique typique des sites Web modernes. Pratique pour produire la vérité. Écrivons un exemple:

<h1> Titre du site Web </h1>

<h1> Sous-titre du site </h1>

</div>

<ul>

<li> javascript </li>

</ul>

</div>

<! - // ENDEUR DE L'ENSEAU ->

<p> Ceci est un article sur les nouvelles balises de structure HTML 5. </p>

</div>

<p> Il s'agit également d'un article sur les nouvelles balises de structure HTML 5. </p>

</div>

<! - // fin gauche ->

<h1> Profil d'auteur </h1>

<p> Mr.think, une personne ordinaire qui se concentre sur la technologie de frontal Web. </p>

</div>

<! - // extrémité latérale ->

Le bas de la page

</div>

<! - // fin de pied de page ->

Ci-dessus, une simple page de blog partie HTML, composée de l'en-tête, de la zone d'affichage de l'article, de la colonne du côté droit et du bas. L'encodage est soigné et est conforme à la sémantique de XHTML, qui peut être bien effectué même dans HTML 5. Mais pour le navigateur, il s'agit d'un morceau de code qui ne distingue pas entre les poids, plutôt qu'une balise qui permet à la machine de comprendre la sémantique de définir le bloc correspondant. Par exemple, les navigateurs standard (tels que Firefox, Chrome et même la nouvelle version d'IE) ont une clé de raccourci qui peut amener les clients à passer directement à la navigation de la page, mais le problème est que tous les blocs sont définis par Div, et la valeur d'ID du DIV est déterminée par le développeur, de sorte que le navigateur ne sait pas quel bloc devrait être le bloc où se trouve le lien de navigation. L'émergence de nouvelles balises HTML 5 compense cette lacune. Ensuite, si le code ci-dessus est remplacé par HTML 5, vous pouvez l'écrire comme ceci:

<dique>

<h1> Titre du site Web </h1>

<h1> Sous-titre du site </h1>

</hgroup>

<Nav>

<ul>

<li> javascript </li>

</ul>

</ nav>

</-header>

<p> Ceci est un article sur les nouvelles balises de structure HTML 5. </p>

</article>

<p> Il s'agit également d'un article sur les nouvelles balises de structure HTML 5. </p>

</article>

</div>

<à part

<h1> Profil d'auteur </h1>

<p> Mr.think, une personne ordinaire qui se concentre sur la technologie de frontal Web. </p>

</roprows>

Le bas de la page

</fooder>

Il s'avère que la structure de la page HTML peut être si belle qu'elle peut être vue en un coup d'œil sans commentaires. Pour les navigateurs, vous ne serez plus perdu lorsque vous trouverez le bloc correspondant.

Comment structurer les éléments avec HTML 5 nouvelles balises:

Grâce à l'exemple ci-dessus, nous comprenons les innovations des nouvelles balises HTML 5 pour la structure, mais lors de la passage à 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 veulent poser. Tout comme la sémantique XHTML, l'utilisation de balises sémantiques HTML 5 doit également être suivie: chaque balise a sa signification spécifique, et la sémantique signifie que nous utilisons des balises appropriées au bon endroit pour mieux faire des personnes et des machines (les machines peuvent être comprises comme des navigateurs peuvent être compris comme moteurs de recherche). 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 l'élément d'en-tête de type, tel que le titre du bloc d'article), qui contient les informations de sujet de la page; La balise NAV est généralement utilisée pour envelopper les informations de navigation; Le pied de page est généralement utilisé pour envelopper les informations inférieures de la page; et ainsi de suite.

Vous trouverez ci-dessous l'explication sémantique et les directives d'utilisation pour les nouvelles étiquettes communes pour les classes structurelles répertoriées dans le manuel HTML 5:

<A-tête> balise

Définition manuelle: définit l'en-tête de la section ou du document.

Directives d'utilisation: il est généralement utilisé pour inclure des en-têtes de page et peut également être utilisé pour d'autres en-têtes de zone, tels que les en-têtes d'article:

<dique>

<h1> Titre du site Web </h1>

<h1> Sous-titre du site </h1>

</hgroup>

</-header>

balise <hgroup>

Définition manuelle: utilisée pour combiner les titres d'une page Web ou d'une section.

Lignes directrices pour une utilisation: Utilisé pour des combinaisons de classes de titre, telles que le titre et le sous-titre d'un article:

<h1> Ceci est un article introduisant des balises de structure HTML 5 </h1>

<H2> HTML 5 Innovation </h2>

</hgroup>

Tag <Nav>

Définition manuelle: Définissez la pièce qui définit le lien de navigation.

Lignes directrices pour une utilisation: Section de navigation pour définir les pages:

<Nav>

<ul>

<li> javascript </li>

</ul>

</ nav>

<étiquer> TAG

Définissez le contenu autre que l'article. Le contenu de côté devrait être lié au contenu de l'article.

Lignes directrices d'utilisation: utilisées pour le contenu sectionné, une nouvelle section sera lancée dans le flux de documents, qui est généralement utilisé dans les barres latérales liées au contenu de l'article:

<à part

<h1> Profil d'auteur </h1>

<p> Mr.think, une personne ordinaire qui se concentre sur la technologie de frontal Web. </p>

</roprows>

<paging> balise

Définition manuelle: définir les sections dans le document. Par exemple, les chapitres, les en-têtes, les pieds de page ou d'autres parties du document.

Directives d'utilisation: le contenu utilisé pour les sections démarrera une nouvelle section dans le flux de documents:

Quelle est la section <h1>? </h1>

<h2> un nouveau chapitre </h2>

<h2> sur la section </h1>

<p> Section Introduction </p>

...

</article>

</ section>

<gage de page

Définition manuelle: définit le pied de page de la section ou du document. En règle générale, il contiendra le nom du créateur, la date de création du document et / ou les coordonnées.

Lignes directrices d'utilisation: il est généralement utilisé pour envelopper la page entière avec un fond général, et peut également être utilisé au bas des autres zones, comme le bas de l'article:

[email protected]

</fooder>

<Article> Tag

Définition manuelle: définir le contenu externe. Par exemple, un nouvel article d'un fournisseur de nouvelles externes, soit à partir d'un blog, soit d'un forum. Ou il provient d'autres sources externes.

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

<dique>

<h1> Ceci est un article introduisant des balises de structure HTML 5 </h1>

<H2> HTML 5 Innovation </h2>

</hgroup>

</-header>

<p> Détails du contenu de l'article </p>

</article>

<gigne> TAG

Définition manuelle: utilisé pour combiner des éléments.

Lignes directrices d'utilisation: principalement utilisées pour combiner des images et des descriptions d'images:

<FigCaption> Ceci est la description des informations de l'image </gigcaption>

</ figure>

TAG TAG

Définition manuelle: Définissez la liste des menues. Utilisez cette balise lorsque vous souhaitez répertorier les contrôles de formulaire.

Guide d'utilisation: utilisé dans les blocs de classe de menu, utilisé pour définir les listes de menu ou les options de menu:

<menu>

<li> javascript </li>

</ menu>

D'autres nouvelles étiquettes dans HTML 5 ne seront pas expliquées par une. Veuillez vérifier le manuel vous-même.

En fait, ces choses sont comme les div, h1, inpu et autres balises dans xhtml. Tant que vous vous entraînez davantage dans la vie quotidienne, il est facile de les utiliser librement.

Sur la compatibilité

Si vous êtes une personne qui aime étudier et faire attention au frontal, vous devez savoir que les nouvelles balises HTML 5 ont été utilisées dans la structure de la page de Taobao. 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 de compatibilité en ligne (cet article concerne la structure, ha ~).

Histoires ultérieures

Toute nouvelle technologie nécessite un processus d'adaptation. Si vous êtes prêt à être un excellent développeur Web frontal, vous devez continuer à essayer et à accepter la dernière technologie frontale.

Sun Wen a dit un jour que si vous voulez faire le bonheur de la civilisation, vous devez faire la douleur de la civilisation. Cela est vrai pour la révolution de l'humanité, tout comme la révolution de HTML 5. Le déclin progressif de l'IE a permis aux principaux fabricants de navigateurs d'entrer dans la période des États en guerre et de rivaliser les uns avec les autres. Quant aux développeurs, nous espérons seulement que les principaux fabricants de navigateurs devraient suivre le même standard que possible, plutôt que de diviser les joueurs après la compétition. Parce que, une présentation efficace et parfaite de la même application à toutes sortes d'utilisateurs est notre objectif ultime.

De cette façon, cet article commence à partir du doctype de la page, à l'utilisation des nouvelles balises HTML 5 pour créer une structure de page plus sémantisée, puis explique les nouvelles balises liées à la structure de la page. Je crois que tout le monde a une nouvelle compréhension des nouvelles étiquettes structurelles de HTML 5. Si vous êtes intéressé, alors ouvrez votre IDE, écrivez un morceau de code construit par les nouvelles étiquettes de HTML 5, puis utilisez CSS pour décrire votre Grand Blueprint!