Un bon code HTML est le fondement d'un beau site Web. Quand j'enseigne aux autres CSS, je leur dis toujours en premier: le bon CSS n'existe que sur de bonnes balises HTML. C'est comme si une maison avait besoin d'une base solide, non? Les balises HTML soignées et sémantiques présentent de nombreux avantages, mais il existe encore de nombreux sites Web qui utilisent une rédaction de balises hostile.
Regardons les balises HTML non écrites et discutons d'eux pour apprendre à écrire des balises HTML soignées et standard.
Wulin.com Remarque : Chris Cyier utilise deux documents ici pour expliquer le code de cet article: Bad Code et bon code. Veuillez vous référer à ces deux documents lorsque vous étudiez.Pour ce faire, nous avons juste besoin de suivre les étapes correctes. Il n'est pas nécessaire de discuter d'utiliser HTML 4.01 ou XHTML 1.0, qui mettent tous deux des exigences strictes sur notre rédaction du code correct.
Mais quoi qu'il en soit, notre code ne doit utiliser aucune table de tableaux pour la mise en page, il n'est donc pas nécessaire d'utiliser le doctype transitionnel.
Ressources connexes:Dans notre section <Aad>, la première chose est de déclarer le jeu de caractères. Nous avons utilisé UTF-8, mais nous l'avons mis derrière le <itle>. Partons la déclaration de jeu de personnages vers le haut car nous voulons que le navigateur sache quel personnage a défini pour le gérer avant de lire quoi que ce soit.
En plus de la position de la déclaration de jeu de personnages, des personnages étranges apparaissant dans <Titre> sont également des problèmes auxquels il faut faire attention. Par exemple, les et les caractères les plus couramment utilisés doivent être remplacés par l'entité de caractères & amp ;.
Ressources connexes:Lors de l'écriture de code, l'indentation n'affecte pas l'apparence de la page Web, mais l'utilisation de l'indentation appropriée peut rendre le code plus lisible. La méthode d'indentation standard consiste à mettre en œuvre un bit d'onglet (ou quelques espaces) lorsque vous démarrez un nouvel élément. N'oubliez pas non plus que l'étiquette de l'élément Close est alignée sur l'étiquette de départ.
Wulin.com Remarque : Certains amis pensent qu'il est plus difficile de se mettre en acte lors de l'écriture de code. Si vous lisez simplement ce code, il ne peut y avoir aucun problème. Pense juste que ça va. Mais s'il s'agit de collaboration ou si votre travail est publié et partagé publiquement, il est nécessaire d'écrire un beau code plus lisible. Ressources connexes:Nous avons un code CSS qui a été étendu à notre section <Aad>. C'est une faute sérieuse car elle ne peut fonctionner que sur une seule page HTML. Garder un fichier CSS autonome signifie que les futures pages Web peuvent les lier et utiliser le même code. Il en va de même pour JavaScript.
Wulin.com Remarque : Bien sûr, ce problème n'est peut-être pas si grave. Par exemple, en tant que thème WordPress, le code écrit dans <Aadred> est utilisé sur toutes les pages WordPress. Mais l'écriture de CSS dans <Aad> est toujours une très mauvaise habitude.Dans le titre de notre site Web, nous utilisons <h1> comme balise de titre du site Web, ce qui est parfait. Et un lien vers la page d'accueil a été ajouté, mais l'erreur était que le lien était placé à l'extérieur <h1> et le lien entouré <h1>. Cette simple erreur de nidification est bien gérée par la plupart des navigateurs, mais techniquement, cela ne fonctionne pas.
Un lien d'ancrage est un élément en ligne, et le titre <h1> est un élément de bloc, et l'élément de bloc ne doit pas être placé dans l'élément en ligne.
Je ne sais pas qui l'a inventé en premier, mais j'aime le mot Divitis, qui fait référence à l'utilisation excessive des divs dans les balises HTML. À une certaine étape de l'apprentissage de la conception Web, nous apprenons à utiliser un div pour envelopper de nombreux autres éléments pour obtenir une disposition et un style pratique. Cela conduit à l'abus de div. Nous utilisons les zones requises et les zones complètement inutiles.
Dans l'exemple ci-dessus, nous utilisons un div (topnav) pour contenir la liste UL (bigbarnavigation). Cependant, DIV et UL sont des éléments de bloc, il n'est donc pas nécessaire d'utiliser Div pour envelopper l'élément UL.
Ressources connexes:Parlons maintenant de la gestion de nommage. Dans l'exemple mentionné dans l'article précédent, notre UL utilise le nom d'identification Bigbarnavigation. La navigation explique très bien le contenu du bloc, mais Big et Bar décrivent la conception plutôt que le contenu. Il peut dire que ce menu est une grande barre d'outils, mais si la conception de ce menu devient vertical, le nom semblera déroutant et non pertinent.
Class et noms d'identification conviviaux tels que Mainnav, subnav, barre latérale, pied de page, métadonnées, qui décrivent ce qui est inclus. Les mauvais noms de classe et d'identification décrivent le design, tels que Bigboldheader, la barre de gauche et la boîte arrondi.
Wulin.com Remarque : Chris souligne s'il doit le nommer par contenu ou conception. Personnellement, je voudrais ajouter aux noms d'identification et de classe pour capitaliser ou en minuscules , ou capitaliser la lettre initiale du mot . Tout d'abord, les mots entièrement capitalisés ne sont pas propices à la lecture et exclues. Quant à utiliser des lettres minuscules ou majuscules de la première lettre du mot, cela dépend de vos habitudes personnelles. Il est important que quelle que soit la règle utilisée, elle doit être cohérente . Ne soyez pas purement minuscule et capitalisé dans la première lettre à la fois, ce sera très déroutant.De plus, ce que je suis personnellement confondu, c'est de savoir s'il faut souligner_ ou trait d'union, ou ne pas utiliser de noms plus longs. Ou peut-être que je pense que c'est trop compliqué. Il est bon d'utiliser n'importe quel type, et il est normal de le garder cohérent.
Page précédente 1 2 Page suivante Lire le texte intégral