Maison > interface Web > tutoriel HTML > Liste de dénomination standardisée HTML\CSS

Liste de dénomination standardisée HTML\CSS

巴扎黑
Libérer: 2017-07-23 16:44:45
original
1503 Les gens l'ont consulté

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 leur donner des noms correspondants, afin de rendre la structure de la page Web plus claire et plus pratique. pour 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 de 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

dénomination de navigation

  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 : marquer la marque du logo du site Web

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

  3. login : login, ( 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 de copyright

  37. infositeCrédits : crédibilité

  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ête 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal