【html/css】html/css命名規範

標籤：

　　無論做什麼，規則總是最重要的。無規矩不成方圓，有了規矩，我們才能有規可循，有則可依，人與人之間才能正常的交流交往。

　　人人都有自己的命名習慣，不過，代碼是需要交流的，當有些命名習慣僅只自己能看懂，甚至自己在過後都看不懂時，就成為了交流中的障礙了。所以，有一個規範的命名規則是很重要的。命名規則有很多，大家各取所需，這裡介紹一下在html/css中一些約定俗成的命名規範，權作記錄：

　　1、所有的命名最好都小寫

　　2、屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss5",id="divcss5"

　　3、每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整

　　4、空元素要有結束的tag或於開始的tag後加上"/"

　　5、表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等

　　6、<h1>到<h5>的定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜尋引擎的查詢。

　　7、給每一個表格和表單加上一個唯一的、結構標記id

　　8、給圖片加上alt標籤

　　9、盡量使用英文命名原則

　　10、盡量不縮寫，除非一看就明白的單詞

　　CSS命名規則：

　　　　頭：header　　　　　　　　　　　　　　　　內容：content/containe

　　　　尾：footer　　　　　　 　　　　　　　　　　導航：nav

　　　　側欄：sidebar　　　　  　　　　　　　　　　欄目：column

　　　　頁面外圍控制整體布局寬度：wrapper　　　　左右中：left right center

　　　　登入條：loginbar　　   　　　　　　　　　　標誌：logo

　　　　廣告：banner　　　　 　　　　　　 　　　　頁面主體：main

　　　　熱點：hot　　　　　　 　　　　　　　　　　新聞：news

　　　　下載：download　　　 　　　　　　　　　　子導航：subnav

　　　　菜單：menu　　　　　　　　　　　　　　　子功能表：submenu

　　　　搜尋：search　　　　  　　　　　　　　　　友情連結：friendlink

　　　　頁尾：footer　　　　   　　　　　　　　　　著作權：copyright

　　　　滾動：scroll　　　　　 　　　　　　　　　　內容：content

　　　　標籤頁：tab　　　　　　　　　　　　　　　文章列表：list

　　　　提示資訊：msg　　　 　　　　　　　　　　小技巧：tips

　　　　欄目標題：title　　　  　　　　　　　　　　加入：joinus

　　　　指南：guild　　　　   　　　　　　　　　　服務：service

　　　　註冊：regsiter　　　 　　　　　　　　　　狀態：status

　　　　投票：vote　　　　　　　　　　　　　　　夥伴：partner

　　HTML標籤 id的命名規範：

　　　　(1)頁面結構

　　　　　　容器: container　　　　　　　　　　　　頁頭：header

　　　　　　內容：content/container　　　　　　　 頁面主體：main

　　　　　　頁尾：footer　　　　　　　　　　　　　 導航：nav

　　　　　　側欄：sidebar　　　　　　　　　　　　  欄目：column

　　　　　　頁面外圍控制整體布局寬度：wrapper      左右中：left right center

　　　　(2)導航

　　　　　　導航：nav　　　　　　　　　　　　　　 主導航：mainbav

　　　　　　子導航：subnav　　　　　　　　　　　  頂導航：topnav

　　　　　　邊導航：sidebar　　　　　　　　　　　  左導航：leftsidebar

　　　　　　右導航：rightsidebar　　　　　　　　　 菜單：menu

　　　　　　子功能表：submenu　　　　　　　　　　  標題: title

　　　　　　摘要: summary

　　　　(3)功能

　　　　　　標誌：logo　　　　　　　　　　　　　　廣告：banner

　　　　　　登陸：login　　　　　　　　　　　　　  登入條：loginbar

　　　　　　註冊：regsiter　　　　　　　　　　　　 搜尋：search

　　　　　　功能區：shop　　　　　　　　　　　　　標題：title

　　　　　　加入：joinus　　　　　　　　　　　　　狀態：status

　　　　　　按鈕：btn　　　　　　　　　　　　　　 滾動：scroll

　　　　　　標籤頁：tab　　　　　　　　　　　　　 文章列表：list

　　　　　　提示資訊：msg　　　　　　　　　　　　當前的: current

　　　　　　小技巧：tips　　　　　　　　　　　　　表徵圖: icon

　　　　　　注釋：note　　　　　　　　　　　　　  指南：guild

　　　　　　服務：service　　　　　　　　　　　　 熱點：hot

　　　　　　新聞：news　　　　　　　　　　　　　 下載：download

　　　　　　投票：vote　　　　　　　　　　　　　  夥伴：partner

　　　　　　友情連結：link　　　　　　　　　　　　著作權：copyright

　　樣式檔案命名：

　　　　主要的:master.css

　　　　布局版面:layout.css

　　　　專欄:columns.css

　　　　文字:font.css

　　　　列印樣式:print.css

　　　　主題:themes.css

 

【html/css】html/css命名規範