Introduction de l'article de wulin.com (www.vevb.com): Je me souviens d'une expérience horrible. La page était imbriquée d'une douzaine ou de dizaines de div. Cela m'a fait me sentir étourdi quand je l'ai lu ... certains peuvent utiliser des balises de span, des balises P et des div. Ceux qui peuvent utiliser H1 et HX utilisent également des balises Div. C'est vraiment sans voix ... pour le moment, j'espère que le développeur a des concepts et des actions de "tags sémantiques".
Je vois que certaines exigences de recrutement sont familières avec le mot sémantique Web et la compréhension / familiarisé avec les normes Web. Tag Semantics fait partie des normes Web, j'ai donc modifié un article que j'ai utilisé dans le parc du blog et je l'ai ensuite publié ... J'espère que les débutants frontaux pourront savoir qu'il y a une telle chose.
Je me souviens d'une expérience terrifiante. La page était imbriquée d'une douzaine ou de dizaines de div. Cela m'a fait me sentir étourdi quand je l'ai regardé ... certains peuvent utiliser des étiquettes de span, des balises P et des div. Ceux qui peuvent utiliser H1 et HX utilisent également des balises Div. C'est vraiment sans voix ... pour le moment, j'espère que le développeur a des concepts et des actions d'étiquettes sémantiques ...
1: (Théorie) Qu'est-ce qu'un label sémantique?
Les balises sémantiques doivent essayer d'utiliser autant que possible les balises HTML avec des structures correspondantes. Prenez la table comme exemple:
<ballage>
<tr>
<TD> Articles de consommation </td>
<TD> Montant de consommation </td>
</tr>
<tr>
<td> manger </td>
<Td> 20 yuan </td>
</tr>
</ table>
Avez-vous vu ce qui ne va pas avec le tableau ci-dessus? Hehe, puis regarde ce label sémantique
<ballage>
<Dens> Dépenser la comptabilité </pention>
<adal>
<tr>
<th> éléments de consommation </th>
<th> Montant de consommation </th>
</tr>
</ head>
<tbody>
<td> manger </td>
<Td> 20 yuan </td>
</tbody>
</ table>
Les balises de ces deux pièces de code sont différentes. Les codes de balise du deuxième tableau sont sans aucun doute plus conformes aux normes Web.
<légende>: titre de la table;
<Aad>: L'en-tête d'une table;
<h>: en-tête de colonne d'une certaine colonne de la table.
Parlons de ce que nous sommes habitués
<Title> Introduction au parc Blog </TITME> <body> Blog Park est un parc de technologie de développement logiciel. Il a été fondé en 2004, ici ... </body>
Regardez, pourquoi savons-nous où se trouve le titre lorsque nous lisons un article? En haut du navigateur. Alors pourquoi les moteurs de recherche peuvent-ils ramper? C'est qu'il sait que le titre de la balise sémantique <Title> est l'article. Si nous ne demeurs pas par cela, à la place:
<Span> Introduction à Blog Park </span> <pan> Blog Park est un parc de technologie de développement logiciel. Il a été fondé en 2004, ici ... <span>
Alors, comment les moteurs de recherche savent-ils qui est le titre et qui est le contenu? Comment cela s'appuie-t-il pour attraper le titre? En fait, la sémantique peut non seulement être la sémantique de label, mais également les étendre à la sémantique structurelle. Par exemple:
#left {float: gauche; margging-left: 50px;}
#Right {float: à droite; marge: 100px;}
<div id = Left> Content .. </div>
<div id = droite> contenu .. </div>
Dans cet exemple, la dénomination de l'ID est un peu exagérée, mais des situations similaires en font. Lorsque nous voulons mettre le #left div sur le côté droit de la page et changer la position avec #Right, pouvez-vous changer le style pour cela?
#left {float: à droite; marge-gauche: 50px;}
#Right {float: gauche; marge-top: 100px;}
Ce serait si gênant de ressembler à ça, et ce serait tromper la disposition de ces deux div.
Il doit être écrit comme ça.
<div id = main> contenu .. </div>
<div id =bar Sidebar> .. </div>
De cette façon, il est clair en un coup d'œil quels sont les contenus dans ces Divs et il est pratique de modifier les styles.
2: (Théorie) Et les étiquettes sémantiques?
1. Une meilleure structure, plus propice aux moteurs de recherche rampant (optimisation SEO) et maintenance des développeurs (maintenance plus élevée en raison d'une structure claire et facile à lire).
2. Il est plus propice à la lecture de terminaux spéciaux (téléphones mobiles, assistants personnels, etc.).
3: (Action) Que faire des étiquettes sémantiques?
Essayez d'utiliser des significations structurelles et moins de sémantique, telles que <span>, <v> sans signification, et vous ne pouvez pas dire ce que c'est, mais vous ne pouvez pas voir ce que c'est en un coup d'œil. Vous pouvez dire que l'étiquette EM est le contenu qui est souligné et distingué de différents contenus.
Alors, comment déterminer si votre page est conforme à l'une des normes Web: les balises sémantiques? Vous pouvez supprimer temporairement le style de votre page et voir à quel point la lisibilité est. Si vous pensez que votre page est très désordonnée pour le moment, cela signifie que l'étiquette sémantique de la page n'est pas très bonne. Si votre page n'est toujours pas désordonnée après avoir retiré le style, cela signifie que la structure de votre page est claire et que l'étiquette sémantique est meilleure.
C'est juste mon opinion. J'espère que les personnes qui l'ont lu exprimeront également leurs idées afin que tout le monde puisse connaître vos idées et améliorer cet article.