HTML標籤的命名/CSS標準化命名大全

標籤：theme   布局   menu   維護   夥伴   label   ast   表單   copy   

   在一個內容較多的HTML頁面中，需要設計許多不同的架構，再為這些不同的架構及內容進行分類，給予相應的名稱，從而使得網頁結構更加清晰，也為工作提供了方便。許多新手朋友在設計一個HTML檔案時，可能只會依據自己的想法隨便給一些簡單的名稱，但若是一味的亂起名稱，不僅會讓團隊的夥伴看不明白，還會導致標籤名稱混亂，這樣會使得代碼維護十分困難，是非常不利於管理的。所以我們在設計整個網站，還是一個單獨的HTML頁面，都應該要有良好的命名規則。在本文中，主要講解CSS命名規則，這也包括了對HTML標籤命名。

   檔案名稱必須由英文字母開頭，通常命名的規則是根據內容的分類和架構的類型翻譯成英文單詞來命名，例如：div id="nav"（表示為這個div是個導航條），所有單詞應當用小寫字母，名稱中可以使用數字，或底線，例如：div="main_piclist"（表示主要內容下的圖片列表）、div="nav_bg.jpg"（表示導航條的背景圖），還可以使用中劃線進行名稱之間的串連，例如：div="main-left"（表示左側內容的布局）所有命名要盡量避免使用中文字元，要以最少的字母達到最容易理解的含義，除非一看即懂，否則盡量不縮寫。

HTML標籤的命名/CSS標準化命名大全頁面結構命名

1. page：代表整個頁面，用於最外層。
2. wrap：外套，將所有元素包在一起的一個外圍包，用於最外層
3. wrapper：頁面外圍控制整體布局寬度，用於最外層
4. container：一個整體容器，用於最外層
5. head、header：頁頭地區，用於頭部
6. nav：導航條
7. content：內容，網站中最重要的內容地區，用於網頁中部主體
8. main：網站中的主要區域（表示最重要的一塊位置），用於中部主體內容
9. column：欄目
10. sidebar：側欄
11. foot、footer：頁尾、頁尾。網站一些附加資訊放置地區，（或命名為copyright）用於底部

導航命名

1. nav、navbar、navigation、nav-wrapper：導航條或導航包，代表橫嚮導航
2. topnav：頂部導航
3. mainbav：主導航
4. subnav：子導航
5. sidebar：邊導航
6. leftsidebar 或 sidebar_a ：左導航
7. rightsidebar 或 sidebar_b：右導航
8. title：標題
9. summary：摘要/li>
10. menu：菜單。地區包含一般的連結和菜單
11. submenu：子功能表
12. drop：下拉
13. dorpmenu：下拉式功能表
14. links：連結菜單

功能命名

1. logo：標記網站logo標誌
2. banner：標語、廣告條、頂部廣告條
3. login：登陸，（例如登入表單：form-login）
4. loginbar：登入條
5. regsiter：註冊
6. tool、toolbar：工具條
7. search：搜尋
8. searchbar：搜尋條
9. searchlnput：搜尋輸入框
10. shop：功能區，表示現在的
11. icon：小表徵圖
12. label：商標
13. homepage：首頁
14. subpage：二級頁面子頁面
15. hot：熱門熱點
16. list：文章列表，（例如新聞列表：list-news）
17. scroll:滾動
18. tab：標籤
19. sitemap：網站地圖
20. msg 或 message：提示資訊
21. current：當前的
22. joinus：加入
23. status：狀態
24. btn：按鈕，（例如搜尋按鈕可寫成：btn-search）
25. tips：小技巧
26. note：注釋
27. guild：指南
28. arr、arrow：標記箭頭
29. service：服務
30. breadcrumb：(即頁面所處位置導航提示）
31. download：下載
32. vote：投票
33. siteinfo：網站資訊
34. partner：夥伴
35. link、friendlink：友情連結
36. copyright：著作權資訊
37. siteinfoCredits：信譽
38. siteinfoLegal：法律資訊

CSS樣式命名

1. 對齊樣式命名：left（左邊內容）、center（中間內容）、right（右邊內容）等；
2. 顏色英文命名：red（紅色）、green（綠色）、yellow（黃色），又或者border_red（紅色邊框）等；
3. 顏色代碼命名：f00（紅色）、ff0（黃色）、f90（橙色）等；
4. 文字大小命名：font12px（字型12像素）、font16px（字型16像素）等；
5. 頁麵線條命名：line_x （橫線）、line_y （縱線）或 line_red（紅線）、line_black（黑線）
6. 圖片表徵圖命名：pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
7. 頁面廣告命名：ad_01、ad_02
8. 背景架構命名：nav_bg（代表導航條的背景圖片位置）、tool_bg（代表工具列的背景圖片位置）

CSS樣式表命名

1. index.css：單獨為首頁建立樣式
2. head.css：頭部樣式，多個頁面頭部設計風格相同時使用。
3. base.css：共用樣式。
4. style.css：獨立頁面所使用的樣式檔案。
5. global.css：頁面樣式基礎，全域公用樣式，頁面中必須包含。
6. layout.css：布局、版面樣式，公用類型較多時使用，一般用在首頁級頁面和產品類頁面中
7. module.css：模組，用於產品類頁，也可與其它樣式配合使用。
8. master.css：主要的樣式表
9. columns.css：專欄樣式
10. themes.css：主體樣式
11. forms.css：表單樣式
12. mend.css：補丁，基於以上樣式進行的私人化修補。

HTML標籤的命名/CSS標準化命名大全