A summary of naming rules for html and CSS tags

The

folder mainly creates the following folders:
1. Images stores some commonly used pictures on websites;
2. Css stores some CSS files;
3. Flash stores some Flash files;
4 , PSD stores some PSD source files;
5. Temp stores all temporary pictures and other files;
6. Copyright copyright information (optional)
8. Readme description file
CSS unified naming
Note: This CSS naming rule is only suitable for object table production mode
1. The css files are placed in the css folder; named css.css
2. Main style definition: body, table, td, tr, a
3. Link style definition: link_white (white); link_black (black); link_blue (blue), etc.;
Description: If there are repetitions, add Arabic numerals after them; such as link_red01 and underline such as: linkred
　4. Text style definition: font_red (red); font_red_14 (red 14-point font); font_red_14b (red 14-point bold)
5. Border style definition: border_red_tblr (red four sides); border_red_blr (red bottom border_red_lr (red left and right sides); border_red_b (red bottom one side), etc.;
6. Form style definition: text_100 (text field width is 100); textarea_200_red (text area width is 200) red border); select_100 (list width is 100); button_150 (button width 150);
Description: The form is defined by width, and the longest word in the naming is: "text_100_red"
7. Line style definition: line_X (horizontal line); line_Y (vertical line); line_X_red (red horizontal line); line_X_red2 (red horizontal line of two pixels); Note: Only dashed lines are defined in line, and solid lines are defined in border
　8. Other style definitions: Here we mainly define some personalized styles;
File naming
head.asp header file
foot.asp bottom file
index.asp home page file
sort.html classification Nested File
Article_channel.asp Article_Channel Page
Article_list.asp Article_List Page
Article_detail.asp Article_Display Page
Note: If there are multiple article channels, use article01. article02, article03, etc.
　exhibit_channel.asp Exhibition information_channel page
　exhibit_list.asp Exhibition information_list page
　exhibit_detail.asp Exhibition information_display page
Product_channel.asp Product center_channel page
　product_list.asp Product Center_List Page
　product_detail.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 Business Opportunity Information_Channel Page
　information_list.asp Business Opportunity Information_List Page
　information_detail.asp Business Opportunity Information_Display Page
Job_channel.asp Recruitment_Channel Page
Job_list.asp Recruitment_list page
Job_detail.asp Recruitment_display page
hr_channel.asp Job search_Channel page
hr_list.asp Job search_list page
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 Display Page
Copyright.asp Copyright Page
Picture Naming
1. Navigation naming: menu.gif Such as: menug .gif (background image of navigation)
2. Member login: login.gif Such as: loginbg.gif (background image of member login)
3. Search naming: search.gif Such as: search_bg.gif (Search background image)
4. Small icon: ico_number.gif such as: ico_001.gif
5. Line naming: line_X_color.gif such as: line_X_red.gif (red horizontal dotted line) Description: line is only named dotted line
Line_Y_red.gif (red vertical dotted line)
6. Advertisement naming: ad_number.gif Such as: ad001.gif
7. Pictures in other columns: the first one in the column name Letters.gif
For example: xwzx_bg.gif (News center background) cpzx_l.gif (Left picture of product center)
8. Product and column hot pictures: pic_Number.gif For example: pic_001.gif
Note: Top, bottom, left and right can be abbreviated as T, B, L, R
CSS standardized design naming
1. Class naming specification example
Header: header
Content: content/ container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left and right center: left right center
Log in Bar: loginbar
Logo: logo
Advertisement: banner
Page body: main
Hotspot: hot
News: news
Download: download
Sub-navigation: subnav
Menu: menu
Submenu: submenu
Search: search
Friendly link: friendlink
Footer: footer
Copyright: copyright
Scroll: scroll
Content: content
Tag page: tab
Article list: list
Prompt message: msg
Tips: tips
Column title: title
Join: joinus
Guide: guild
Service: service
Registration: regsiter
Status: status
Vote: vote
Partner: partner
2. How to write comments
/ Footer /
Content area
/ End Footer /
3. Examples of naming conventions for id
(1) Page structure
Container: container
Header: header
Content: content/container
Page body: main
Footer: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page periphery Control the overall layout width: wrapper
Left right center
(2) Navigation
Navigation: nav
Main navigation: mainbav
Sub navigation: subnav
Top navigation: topnav
Side navigation: sidebar
Left navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu
Submenu: submenu
Title: title
Summary: summary
(3 ) Function
Logo: logo
Advertisement: banner
Login: login
Login bar: loginbar
Registration: regsiter
Search: search
Ribbon: shop
Title ：title
Join: joinus
Status: status
Button: btn
Scroll: scroll
Tab page: tab
Article list: list
Prompt message: msg
Current: current
Tips: tips
Icon: icon
Note: note
Guide: guild
Service: service
Hotspot: hot
News: news
Download: download
Voting: vote
Partner: partner
Friendly link: link
Copyright: copyright
4. Class writing specification example
(1) Color: Use color Name or hexadecimal code, such as

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

　(2) Font size, directly use 'font font size' as the name, such as
　

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

　(3) Alignment Style, use the English name of the alignment target, such as
　　

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

　(4) Title bar style, use the 'category function' method to name, such as
　　

.barnews { }
　　.barproduct { }

　5. CSS File naming example
Main master.css
Module module.css
Basic common base.css
Layout, layout layout.css
Theme themes.css
Column columns.css
Text font.css
Form forms.css
Patch mend.css
Print print.css
6. Notes
(1) Always lowercase;
(2) Try to Use English;
(3) Do not add dashes or underlines;
(4) Try not to abbreviate words unless they are easy to understand at a glance

The above is the detailed content of A summary of naming rules for html and CSS tags. For more information, please follow other related articles on the PHP Chinese website!