HTML+CSS命名規則介紹

HTML+CSS命名規則

   在一個內容較多的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）用於底部

#導航命名

##nav、 navbar、navigation、nav-wrapper：導航條或導航包，代表橫向導航
topnav：頂部導航

2. ##mainbav：主導航

3. subnav：子導航

4. sidebar：邊緣導覽

5. leftsidebar 或sidebar_a ：左導覽

6. rightsidebar 或sidebar_b：右邊導航

7. #title：標題

8. ##summary：摘要/li>

9. menu：選單。區域包含一般的連結和選單

10. submenu：子選單

11. drop：下拉

12. ## dorpmenu：下拉式選單

13. links：連結選單

14. #函數命名

3. #logo：標記網站logo標誌

4. banner：標語、廣告條、頂部廣告條

5. login：登陸，（例如登入表單：form-login）

6. loginbar：登入條

7. regsiter：註冊

8. tool、 toolbar：工具條

9. search：搜尋

10. #searchbar：搜尋條

11. ##searchlnput：搜尋輸入框

12. shop：功能區，表示現在的

13. #icon：小圖示

14. label：商標

15. homepage：首頁

16. subpage：二級頁頁子頁

17. ##hot ：熱門熱點

18. list：文章列表，（例如新聞列表：list-news）

19. scroll:滾動

20. tab：標籤

21. sitemap：網站地圖

22. #msg 或message：提示訊息

23. current：目前的

24. joinus：加入

25. #status：狀態

# #btn：按鈕，（例如搜尋按鈕可寫成：btn-search）
tips：小技巧
note：註解
guild：指南
arr、arrow：標記箭頭

30. ##service：服務

31. breadcrumb：(即頁面所處位置導航提示）

32. download：下載

33. vote：投票

34. siteinfo：網站資訊

35. partner：合作夥伴

36. link、friendlink：友情連結

37. copyright：版權資訊

38. siteinfoCredits：信譽############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命名規則介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！