Introduction aux règles de dénomination HTML+CSS

Règles de nommage HTML+CSS

Dans une page HTML avec beaucoup de contenu, il est nécessaire de concevoir de nombreux cadres différents, puis de classer ces différents cadres et contenus, et de donner nom correspondant, rendant ainsi la structure de la page Web plus claire et facilitant le travail. Lorsque de nombreux amis novices conçoivent un fichier HTML, ils ne donnent que quelques noms simples basés sur leurs propres idées. Cependant, s'ils donnent aveuglément des noms aléatoires, cela rendra non seulement la compréhension difficile pour les membres de l'équipe, mais entraînera également une confusion dans les étiquettes. noms. Cela rendra la maintenance du code très difficile et très défavorable à la gestion. Par conséquent, lors de la conception de l’intégralité du site Web ou d’une page HTML distincte, nous devons avoir de bonnes règles de dénomination. Dans cet article, nous expliquons principalement les règles de dénomination CSS, qui incluent également la dénomination des balises HTML.

Le nom du fichier doit commencer par une lettre anglaise. La règle de dénomination habituelle est de le traduire en mots anglais et de les nommer en fonction de la classification du contenu et du type du cadre. "nav" (ce qui signifie que ce div est une barre de navigation), tous les mots doivent être en lettres minuscules, et des chiffres ou des soulignements peuvent être utilisés dans le nom, par exemple : div="main_piclist" (représentant la liste d'images sous le contenu principal ), div="nav_bg.jpg" (représentant l'image de fond de la barre de navigation) , vous pouvez également utiliser le tiret pour relier les noms, par exemple : div="main-left" (indiquant la disposition du contenu sur le gauche) Tous les noms doivent éviter d'utiliser des caractères chinois et utiliser le moins de lettres possible pour être le plus facile à comprendre. À moins que la signification ne soit facilement comprise d'un coup d'œil, essayez de ne pas l'abréger.

Nom des balises HTML/Liste de dénomination standardisée CSS

Nom de la structure des pages

1. page : représente la page entière et est utilisé pour la couche la plus externe.

2. wrap : coat, un emballage périphérique qui enveloppe tous les éléments ensemble, utilisé pour la couche la plus externe

3. wrapper : contrôle périphérique de la page largeur globale de mise en page , utilisé pour la couche la plus externe

4. conteneur : un conteneur global, utilisé pour la couche la plus externe

5. tête, en-tête : zone d'en-tête, utilisée pour header

6. nav : barre de navigation

7. content : contenu, la zone de contenu la plus importante du site Web, utilisée pour le corps intermédiaire du Web page

8. main : la zone principale du site Web (indiquant la position la plus importante), utilisée pour le contenu principal central

9. colonne : colonne

10. barre latérale : barre latérale

11. pied, pied de page : pied de page, pied de page. Certaines zones de placement d'informations supplémentaires sur le site Web (ou nommées copyright) sont utilisées en bas de

navigation nommées

1. nav, navbar, navigation, nav-wrapper : barre de navigation ou package de navigation, représentant la navigation horizontale

2. topnav : navigation supérieure

3. mainbav : navigation principale

4. subnav : subnav

5. sidebar : navigation latérale

6. leftsidebar ou sidebar_a : gauche navigation

7. rightsidebar ou sidebar_b : navigation à droite

8. titre : titre

9. résumé : résumé/ li>

10. menu : menu. La zone contient des liens et des menus généraux

11. sous-menu : sous-menu

12. drop : liste déroulante

13. dorpmenu : menu déroulant

14. liens : menu de liens

nommage des fonctions

1. logo : marquez la marque du logo du site Web

2. bannière : slogan, bannière publicitaire, bannière publicitaire supérieure

3. connexion : connexion, ( tel que formulaire de connexion : form-login)

4. loginbar : barre de connexion

5. regsiter : inscription

6. outil, barre d'outils : barre d'outils

7. recherche : recherche

8. barre de recherche : barre de recherche

9. searchlnput : zone de saisie de recherche

10. boutique : ruban, représentant le

11. icône : petite icône

12. étiquette : Marque

13. page d'accueil : Page d'accueil

14. sous-page : Sous-page de la page secondaire

15. hot : Points chauds populaires

16. liste : liste d'articles, (par exemple, liste d'actualités : liste-actualités)

17. faites défiler : faites défiler

18. onglet : balise

19. plan du site : plan du site

20. msg ou message : message rapide

21. actuel : actuel

22. rejoindre : rejoindre

23. statut : statut

24. btn : bouton, (par exemple, le bouton de recherche peut s'écrire : btn-search)

25. tips : astuces

26. note : note

27. guilde : guide

28. arr, flèche : marque flèche

29. service : service

30. fil d'Ariane : (c'est-à-dire l'invite de navigation de l'emplacement de la page)

31. téléchargement : télécharger

32. voter : voter

33. siteinfo : informations sur le site

34. partenaire : partenaire

35. lien, lien ami : lien convivial

36. copyright : informations sur le droit d'auteur

37. infositeCrédits : réputation

38. infositejuridique : légal informations

Nom de style CSS

1. Nom de style d'alignement : gauche (contenu de gauche), centre (contenu du milieu), droite (contenu de droite ) ), etc.;

2. Nom anglais des couleurs : rouge (rouge), vert (vert), jaune (jaune) ou border_red (bordure rouge), etc. ; >

3. Nom du code couleur : f00 (rouge), ff0 (jaune), f90 (orange), etc.

4. Nom de la taille du texte : font12px ( police 12 pixels), font16px ( Police 16 pixels), etc.;

5. Nom de la ligne de page : line_x (ligne horizontale), line_y (ligne verticale) ou line_red (ligne rouge), line_black (ligne noire)

6. Nom de l'icône de l'image : pic_1.jpg, pic_2.jpg ou ico_1.gif, ico_2.gif

7. Nom de la publicité de la page : ad_01, ad_02

8. Nom du cadre d'arrière-plan : nav_bg (représente la position de l'image d'arrière-plan de la barre de navigation), tool_bg (représente la position de l'image d'arrière-plan de la barre d'outils)

Nom de la feuille de style CSS

1. index.css : créer un style distinct pour la page d'accueil

2. head.css : style d'en-tête, conception d'en-têtes de plusieurs pages Utilisé lorsque les styles sont les mêmes.

3. base.css : style partagé.

4. style.css : fichier de style utilisé par les pages indépendantes.

5. global.css : base de style de page, style public global, doit être inclus dans la page.

6. layout.css : mise en page, style de mise en page, utilisé lorsqu'il existe de nombreux types courants, généralement utilisé dans les pages d'accueil et les pages de produits

7. module .css : module, utilisé pour les pages produits, et peut également être utilisé en conjonction avec d'autres styles.

8. master.css : feuille de style principale

9. columns.css : styles de colonnes

10. thèmes .css : Style du corps

11. forms.css : Style du formulaire

12. mend.css : Patch, patch privatisé basé sur le style ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!