Un résumé des règles de dénomination pour les balises HTML et CSS

Le dossier

crée principalement les dossiers suivants :
1. Images stocke certaines images couramment utilisées sur les sites Web ;
2. Css stocke certains fichiers CSS
3. Flash stocke certains fichiers Flash ; 4, PSD stocke certains fichiers source PSD ;
5. Temp stocke toutes les images temporaires et autres fichiers
6. Informations sur les droits d'auteur (facultatif)
8. Fichier de description Lisez-moi
Dénomination unifiée CSS
Remarque : Cette règle de dénomination CSS ne convient qu'au mode de production de table d'objets
1. Les fichiers css sont placés dans le dossier css nommé css.css
2. Définition du style principal : body, table, td, tr , a
　3. Définition du style de lien : link_white (blanc); link_black (noir); link_blue (bleu), etc. ;
　Remarque : s'il y a des répétitions, ajoutez des chiffres arabes après eux tels que link_red01 et soulignez-les. tels que : linkred
　4. Définition du style de texte : font_red (rouge) ; font_red_14 (police rouge à 14 points) ; font_red_14b (rouge en gras à 14 points)
5. Définition du style de bordure : border_red_tblr (quatre côtés rouges) ; border_red_blr (red border_red_lr (côtés rouges gauche et droit) ; border_red_b (rouge en bas d'un côté), etc. ;
6. Définition du style de formulaire : text_100 (la largeur du champ de texte est de 100) ; textarea_200_red (la largeur de la zone de texte est de 200) (avec bordure rouge) ; select_100 (la largeur de la liste est de 100) ; bouton_150 (la largeur du bouton est de 150) ;
Remarque : le formulaire est défini par la largeur et le mot le plus long du nom est : "text_100_red"
7. Définition du style de ligne : line_X (ligne horizontale); line_Y (ligne verticale); line_X_red (ligne horizontale rouge) (ligne horizontale rouge de deux pixels). Remarque : Seules les lignes pointillées sont définies en ligne et les lignes pleines sont définies en bordure ;
　8 , Autres définitions de style : ici, nous définissons principalement certains styles personnalisés ;
Nom du fichier
Fichier d'en-tête head.asp
Fichier inférieur foot.asp
Fichier de la page d'accueil index.asp
sort.html Catégorie de fichiers imbriqués
article_channel.asp article_channel page
article_list.asp article_list page
article_detail.asp article_display page
Remarque : s'il existe plusieurs canaux d'articles, utilisez article01, article02, article03, etc. .
　exhibit_channel.asp Page d'information_Channel de l'exposition
　exhibit_list.asp Page de liste d'informations_d'exposition
　exhibit_detail.asp Page d'information_d'affichage de l'exposition
　product_channel.asp Page Product Center_Channel
　product_list.asp Page Product Center_List
　détail_produit .asp Product Center_Display Page
　corporation_channel.asp Member_Channel Page
　corporation_list.asp Member_List Page
　corporation_detail.asp Member_ Display page
Information_channel.asp Opportunité d'affaires information_Channel page
Information_list.asp Opportunité d'affaires information_List page
information_detail.asp Page d'affichage d'informations sur les opportunités commerciales
job_channel.asp Page Recruitment_Channel
Job_list. page search_list
hr_detail.asp job search_display page
job_hr_channel. asp Talent Center_Channel Page
job_hr_lisr.asp Talent Center_List Page
job_hr_detail.asp Talent Center Page d'affichage
copyright.asp Page de droits d'auteur
Nommage de l'image
1. Nommage de la navigation : menu gif tel que : menug .gif (image de fond de la navigation)
2. Connexion du membre : login.gif tel que : loginbg.gif (image de fond de la connexion du membre)
3. Nom de recherche : search.gif tel que : search_bg.gif (image d'arrière-plan de recherche)
4. Petite icône : ico_number.gif tel que : ico_001.gif
5. Nommage de ligne : line_X_color.gif tel que comme : line_X_red.gif (ligne pointillée horizontale rouge) description : la ligne nomme uniquement les lignes pointillées
line_Y_red.gif (ligne pointillée verticale rouge)
6. Nom de l'annonce : ad_number.gif Tel que : ad001.gif
7. Images dans d'autres colonnes : la première dans le nom de la colonne letter.gif
Par exemple : xwzx_bg.gif (arrière-plan du centre d'actualités) cpzx_l.gif (image de gauche du centre du produit)
8. Images chaudes du produit et de la colonne : pic_number.gif Par exemple : pic_001.gif
Remarque : Haut, bas, gauche et droite peuvent être abrégés en T, B, L, R
Dénomination de conception standardisée CSS
1. Exemple de convention de dénomination pour la classe
En-tête : en-tête
Contenu : contenu /conteneur
Queue : pied de page
Navigation : navigation
Barre latérale : barre latérale
Colonne : colonne
Largeur globale de mise en page du contrôle périphérique de la page : wrapper
Centre gauche et droit : centre gauche droit
Barre de connexion : barre de connexion
Logo : logo
Publicité : bannière
Corps de la page : principal
Hotspot : chaud
Actualités : actualités
Téléchargement : télécharger
Sous-navigation : subnav
Menu : menu
Sous-menu : sous-menu
Recherche : recherche
Lien convivial : lien ami
Pied de page : pied de page
Copyright : copyright
Défilement : défilement
Contenu : contenu
Page de balise : onglet
Liste d'articles : liste
Message d'invite : msg
Conseils : conseils
Titre de la colonne : titre
Rejoindre : joinus
Guide : guilde
Service : service
Inscription : regsiter
Statut : statut
Vote : vote
Partenaire : partenaire
2 . Méthode d'écriture des commentaires
/ Pied de page /
Zone de contenu
/ Fin du pied de page /
3. Exemple de convention de dénomination des identifiants
(1) Structure de la page
Conteneur : conteneur
En-tête. : header
Contenu : content/container
Corps de la page : main
Pied de page : pied de page
Navigation : nav
Barre latérale : barre latérale
Colonne : colonne
Périphérie de la page Contrôler la mise en page globale width: wrapper
Centre gauche droit: centre gauche droit
(2) Navigation
Navigation: nav
Navigation principale: mainbav
Sous-navigation: subnav
Navigation supérieure: topnav
Navigation latérale : barre latérale
Navigation gauche : barre latérale gauche
Navigation droite : barre latérale droite
Menu : menu
Sous-menu : sous-menu
Titre : titre
Résumé : résumé
(3 ) Fonction
Logo : logo
Publicité : bannière
Login : login
Barre de connexion : loginbar
Inscription : regsiter
Recherche : recherche
Ruban : boutique
Titre : titre
Rejoindre : joinus
Statut : statut
Bouton : btn
Défilement : défilement
Onglet : onglet
Liste d'articles : liste
Message d'invite : msg
Actuel : actuel
Astuces : astuces
Icône : icône
Remarque : note
Guide : guilde
Service : service
Hotspot : chaud
Actualités : actualités
Téléchargement : téléchargement
Vote : vote
Partenaire : partenaire
Lien convivial : lien
Copyright : copyright
4. Exemples de spécifications d'écriture de classe
(1) Couleur : utilisez le nom de la couleur ou un code hexadécimal, tel que

.red { color： red； }
　　.f60 { color： #f60； }
　　.ff8600 { color： #ff8600； }

(2) Taille de la police, utilisez directement « taille de la police » comme nom, par exemple

.font12px { font-size： 12px； }
　　.font9pt {font-size： 9pt； }

(3) Style d'alignement, utilisez le nom anglais de la cible d'alignement, telle que

　

.left { float：left； }
　　.bottom { float：bottom； }

(4) Style de barre de titre, utilisez la méthode 'fonction de catégorie' pour nommer, telle que

.barnews { }
　　.barproduct { }

　5 . Exemples de noms de fichiers CSS

Master principal.css
Module module.css
Base commune de base.css
Mise en page, mise en page layout.css
Thème thèmes.css
Colonnes columns.css
Texte font.css
Forms form.css
Patch mend.css
Print print.css
6. Notes
(1) Toutes les lettres minuscules
(2) Utilisez l'anglais autant que possible ;
(3) N'ajoutez pas de tirets ou de soulignements
(4) Essayez de ne pas abréger les mots à moins qu'il ne s'agisse de mots faciles à comprendre en un coup d'œil

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!