Avec la vulgarisation continue des normes WEB en Chine, des concepts tels que la séparation du comportement de performance structurelle, la modularisation, la sémantique et la dégradation élégante sont également devenus des éléments importants pour évaluer la compréhension des normes WEB par le personnel front-end. de la valeur commerciale du référencement, la « sémanticisation » a reçu une attention exceptionnelle. En tant que nouveau travailleur frontal, j'ai simplement cru un jour que la « sémanticisation » est une méthode d'organisation (x) de la structure HTML à l'aide de balises les plus bénéfiques pour les moteurs de recherche. poids.
Après avoir lu de nombreux livres front-end et de nombreux articles de mes prédécesseurs, j'ai commencé à réaliser la superficialité de ma conscience et j'ai lentement réalisé la valeur de la « sémantisation ». Le contenu suivant n'est qu'un résumé de la pratique personnelle dans la vie quotidienne. Il rassemble les avis de plusieurs seniors et se tient sur les épaules de géants pour voir plus loin.
Qu'est-ce que la « sémantique »
La « sémantique » fait référence à la capacité des machines à rechercher et à collecter des informations avec moins d'intervention humaine, rendant les pages Web compréhensibles par les machines et bénéficiant finalement aux humains. Plus précisément, pour emprunter une explication populaire d'un internaute sur le forum BI, "La sémantique signifie ne pas traiter votre petite amie comme une amie ordinaire". Voici un exemple simple de formulaire XML :
Cependant, grâce au contrôle CSS, nous pouvons facilement afficher « petite amie » comme « amis ». Si nous nous concentrons uniquement sur la couche de présentation, l'étiquette n'est qu'un « crochet », qui est fourni pour que CSS et JS le traitent. mettent encore l'accent sur la « sémanticisation », qui sera discutée en détail ci-dessous.
sens sémantique
1.Moteur de recherche
Concernant l'optimisation des moteurs de recherche, de nombreux seniors ont déjà donné de riches explications sur le poids du Hx, le texte caché, etc., je n'entrerai donc pas dans les détails ici. Il y a quelque temps, un logiciel appelé Wolfram (http://www.wolframalpha). Le moteur de recherche .com/) a attiré l'attention. Nous savons que Google triera les résultats de recherche en fonction de la valeur PR de chaque site Web. D'autres moteurs de recherche disposent également de leurs propres algorithmes indépendants, et Wolfram prétend « comprendre » le contenu des entrées des utilisateurs. . Faites un jugement basé sur la prémisse. Lorsque j'ai entré "qui est Adrian", Wolfram m'a donné un tel retour, même si le résultat n'était pas très précis.
En ce qui concerne le travail front-end, la « sémantique » que nous admirons ne consiste-t-elle pas simplement à permettre aux ordinateurs de comprendre notre contenu ? Avec un exemple simple comme celui-ci WWF, l'ordinateur peut comprendre que le WWF mérite d'être le Fonds mondial pour la nature, et non le Forum mondial de l'eau. Il est irréaliste que l'ordinateur le fasse complètement. comprendre notre contenu. Oui, même si les moteurs de recherche comme Wolfram peuvent être de courte durée, la vision qu'ils poursuivent, rendre les connaissances du monde calculables, est en effet digne de notre poursuite.
2.Expérience utilisateur
Prenons d'abord un exemple. Ce qui suit est le formulaire d'inscription de l'utilisateur sur Dangdang.com (https://login.dangdang.com/Register.aspx), et une partie de la structure XHTML est interceptée.
Expérimentons ce qui se passera si nous modifions Set Nickname : en .
Lorsque la souris clique sur "Définir le pseudo", la zone de saisie de texte avec le nom d'identification "txtNickName" prendra automatiquement le focus. La définition de l'étiquette elle-même consiste à définir une étiquette (marqueur) pour le contrôle (http://www. w3school.com.cn/tags/tag_label.asp), tous les navigateurs traditionnels ont fondamentalement la même prise en charge de l'étiquette. Le contrôle de formulaire du navigateur lui-même est un contrôle interactif très mature, après avoir été testé par un héros du groupe forestier CCS. est très efficace pour les opérations de commande vocale. C'est également une très bonne expérience.
Il en va de même pour Dangdang.com, la liste de produits sur la page d'accueil est toujours un petit morceau de code XHTML
Le code intercepté est la partie prix. Quel que soit le nom de la classe, expérimentons si nous changeons "span class="del gray s10""￥94.00 "/span" en "del class="del gray s10" date=". ” cite="”》￥94.00《/del》《ins》￥46.00《/ins》, il n'y a pas de changement visuel, mais quand on court nu sur la page.
Les résultats sont évidents. En tant que travailleurs front-end, nous devons également considérer que la vitesse Internet de l'utilisateur peut être trop lente (il utilise peut-être Thunder BT), ce qui entraîne l'incapacité de charger CSS, ainsi que la situation du téléphone mobile. utilisateurs, et choisissez celle qui convient. Le coût des balises est très faible. Il vous suffit d'ajouter quelques connaissances de base en HTML. De plus, l'attribut date et l'attribut cite sont très utiles.
Il y a aussi l'importance de l'attribut alt de la balise abbr et de la balise img pour les lecteurs d'écran. Parce que les conditions ne le permettent pas, je ne peux pas en faire l'expérience personnellement. De l'autre côté de la côte, il existe déjà quelque chose comme la section 508. protéger les personnes handicapées du mépris des sites Web gouvernementaux.
3. Efficacité du développement
La structure de la page Web riche en sémantique a un effet significatif sur le développement précoce et la correction ultérieure des bogues. Plus précisément, elle ressemble au code de liste de produits simple suivant.
Grâce aux balises « sémantiques », les « crochets » dans la liste de produits sont enrichis. En ajoutant des noms d'identifiant et de classe à la couche parent, les performances globales dans la liste de produits peuvent être contrôlées pour les modifications de style, dans des conditions idéales. la structure des pages Web via les développeurs back-end et économiser les coûts de main-d'œuvre. Cependant, en revenant à la réalité et face aux différents besoins des produits et des patrons, il est toujours irréaliste de changer complètement le style en modifiant simplement le CSS. besoins et bugs, le meilleur moyen est de réserver raisonnablement des « hooks » pour la page au début du développement afin de faciliter les modifications et les utilisations ultérieures. À l'heure actuelle, les balises sémantiques riches sont assez pratiques.
Pour la collaboration en équipe, l'ID sémantique et la dénomination de classe peuvent rendre la structure claire à tous les membres de l'équipe. Imaginez simplement qu'une étiquette avec une classe rouge soit changée en bleue en raison de changements dans les exigences, et vous comprendrez pourquoi une dénomination sémantique est nécessaire.
Dans les discussions précédentes sur la rastérisation et les frameworks, nous avons conduit à réfléchir aux conventions de dénomination. Ce qui suit n'est qu'une discussion sur les méthodes de dénomination et n'inclut pas l'influence d'autres facteurs. Récemment, je suis entré en contact avec un ensemble complet de mises en page. spécifications. Je pense que la plupart d'entre eux Lorsque les gens sont entrés en contact avec cela, ils étaient tous comme moi. Ils se sentaient étourdis par ce genre de dénomination, comme "area_01", "layout_01", etc. Parce qu'ils n'avaient jamais connu l'énorme. l'échelle des projets que l'équipe prend en charge actuellement, ils ne sont donc pas sûrs que cette méthode soit appropriée, mais une chose est sûre, cela augmente le coût d'apprentissage des nouvelles personnes, et pour le développement futur, je pense que cette méthode est adaptée. également souhaitable. Après tout, à long terme, son objectif est également d'améliorer le développement de l'équipe et la réduction des conflits, je pense que c'est ainsi que YUI, Blueprint et 960 Grid System sont nés. conjecture, et j’espère qu’elle pourra être corroborée à l’avenir.
4. Normes de l'industrie
Il existe mille Hamlets pour mille personnes. De même, mille front-ends peuvent également écrire mille pages avec les mêmes performances mais des structures différentes. C'est exactement la situation actuelle dans la reconstruction de pages, grâce à CSS, nous pouvons jouer avec tous les aspects. de la page à volonté, mais peu de gens prêtent attention à la structure HTML la plus élémentaire. D'une part, la raison est le manque de sémantique des balises HTML5. Dans une certaine mesure, l'autre raison, je pense, est le travail frontal. L'auteur est indifférent aux bases du HTML, comme l'a dit Gui Ge : « Un profane regarde la porte et un expert regarde l'excitation. Si vous voulez faire une différence dans cette industrie, la spécialisation est indispensable. C'est-à-dire que si vous ne vous considérez pas comme un développement, il n'est pas nécessaire de discuter de la question de la « sémantisation ».
L'objectif de la "sémantisation" est d'atteindre des normes unifiées. Le futur Internet "doit être un Internet ouvert. Ce ne sera pas comme aujourd'hui, où les données ne peuvent pas circuler sans entrave et où il existe un grand nombre d'îlots d'information et d'angles morts de l'information". une bonne pratique, des interfaces ouvertes et du contenu partagé seront discutés en détail ci-dessous.
pratique sémantique
Dans le contenu ci-dessus, la plupart du contenu pratique a été intercalé, et voici une introduction sommaire.
1.Structure du document
La manière la plus simple de « sémantiser » est de commencer par la structure, de choisir les balises qui correspondent le mieux à la signification du contenu, de revoir à nouveau le « Guide faisant autorité sur HTML et XHTML » et de réfléchir davantage à la signification du contenu au lieu de simplement porter des jugements basés sur les rendus des pages. Plusieurs fois, nous serons confrontés à une telle situation. Pour voir un effet simple, afin de poursuivre une sémantique raisonnable, nous devons choisir une solution qui n'est pas si facile à mettre en œuvre. Je pense que c'est aussi la conscience d'un travailleur frontal des normes WEB et sa compréhension du travail est également une connaissance très profonde (http://realazy.org/blog/2009/06). /29/ingénieur-vs-scientifique/).
Dans la phase de pré-production, vous pouvez également considérer la situation future et réserver des hooks pour la page en fonction de la sémantique du contenu. Bien entendu, les problèmes spécifiques doivent être analysés en détail. Selon les différentes exigences du projet, le développement adopté doit être flexible et adaptable, par exemple pour les pages spéciales promotionnelles, car le besoin d'ajustements ultérieurs n'est pas important, dans le cadre de la réunion. convivialité et accessibilité, le développement doit être adopté.Le mode de développement rapide se concentre sur la restauration de l'effet du projet de conception, mais pour l'effet des grands sites Web, les exigences sont évidemment différentes.
2. Règles de dénomination
Des schémas de dénomination standard pour ID et Class apparaissent de temps en temps sur Internet. Le principe général est de nommer en fonction de la signification du contenu. Les avantages de la dénomination sémantique sont évidents.
Si vous souhaitez modifier la position de la barre latérale, il vous suffit de modifier le CSS sans modifier la structure de la page Web. Pour les modules de page fréquents, je recommande personnellement de former progressivement votre propre convention de dénomination au cours du processus de développement, comme l'en-tête/le pied de page. /main/hd/bd /nav/box/mode, etc., utilisez des tirets "-" ou une casse camel pour former des noms plus complexes, tels que site-nav/quick-menu/secondaryContent/.
Mais revenons à la situation spécifique, différents projets doivent également choisir la méthode de dénomination en fonction de la situation spécifique. Différentes règles de dénomination doivent être utilisées en combinaison. Les grands sites Web, tels que Taobao, sont plus adaptés pour utiliser une combinaison de rastérisation et de dénomination sémantique. Pour les pages, la modification du style peut effectuer les ajustements correspondants rapidement et avec agilité. Pour la production, elle peut être rapidement reconstituée. Pour la plupart des pages uniques de type déclaration, je recommande personnellement l'utilisation d'une dénomination structurée. Le créateur de la page peut compléter la page rapidement et facilement. Au lieu de passer trop de temps à réfléchir à la dénomination,
3. Microformats
Le microformat est une nouvelle méthode d'intégration de données structurées dans du code XHTML standard. En termes simples, il utilise un ensemble de normes de dénomination de classe établies pour déclarer le contenu du document. La compréhension des microformats par la plupart des gens commence par hCard. Voici un exemple simple de hCard (http://www.oppenheim.com.au/) Il s'agit de la hCard appliquée au pied de page par James Oppenheim.
Parmi eux, les noms de classe de région de localité vcard url fn donné-nom donné-nom adr sont tous générés pour le formatage des microformats. Vous devez également remarquer que plusieurs balises span sont ajoutées afin d'ajouter des noms de classe. Alors, quelle est l’importance des microformats ? Grâce au plug-in Operator pour Firefox, j'ai exporté ma carte de visite depuis mon CV (http://adriancheng.name/resume.html)
Je peux importer le vcf exporté dans divers clients de messagerie en tant qu'informations de contact, ou l'importer dans le carnet d'adresses du téléphone mobile (http://tommyfan.com/blog/skill/add_phone_from_hcard/). Cela peut être vu via le microformat). standard, vous pouvez Il est pratique pour divers clients de traiter les données dans les pages Web. Le rôle des microformats à l'heure actuelle est également similaire à celui de l'API dans les pages Web. Bien sûr, les microformats ont une vision plus large. Pour d'autres normes de format, vous pouvez. visitez http://microformats.org/ Pour en savoir plus.
Conclusion
La pratique de la « sémantisation » est très simple. On peut dire qu'elle constitue la partie la plus fondamentale du front-end. Cependant, pour diverses raisons, elle a été mal comprise ou ignorée et n'a pas reçu l'attention qu'elle mérite. cet article pour faire le tri dans mon étape passée. L'accumulation d'apprentissage, j'espère qu'il pourra donner à tous les lecteurs une réflexion sur les normes WEB.