我們知道，HTML有它嚴格的命名規則，那麼今天我們就整合一下這些規則，避免進入命名誤解，並且如果你的網頁製作中規範使用DIV+CSS命名規則，可以明顯改善優化功效，特別是團隊合作時候，明顯的提高了合作製作的效率。
我們開發CSS+DIV網頁（Xhtml）時候,比較困惑和糾結的事就是CSS命名，特別是新手不知道什麼地方該如何命名，怎樣命名才是好的方法。
一、命名規則說明： - TOP
1）、所有的命名最好都小寫
2）、屬性的值一定要用雙引號("" )括起來，且一定要有值如class="divcss5",id="divcss5"
#3）、每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整
4）、空元素要有結束的tag或於開始的tag後加上"/"
5）、表現與結構完全分離，程式碼中不涉及任何的表現元素，如style、font、bgColor、border等
6）、
到的定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜索引擎的查詢。
7）、為每一個表格和表單加上一個唯一的、結構標記id
8）、為圖片加上alt標籤
9）、盡量使用英文命名原則
10）、盡量不縮寫，除非一看就明白的單字
DIVCSS5為大家介紹常見CSS命名和DIV CSS命名方法。
二、相對網頁外層重要部分CSS樣式命名：
#外套wrap --------------- ---用於最外層
頭部header ----------------用於頭部
#主要內容main ---- --------用於主體內容（中部）
左側main-left -------------左側佈局
右側main-right -----------右側佈局
導航條nav -----------------網頁選單導航列
內容content ---------------用於網頁中部主體
底部footer -----------------用於底部
三、DIV+CSS命名參考表： - TOP
以下為CSS樣式命名與CSS檔案命名參考表，DIV CSS命名集合：
CSS樣式命名 說明
網頁公共命名
#wrapper 頁面外圍控制整體佈局寬度
#container或#content 容器,用於最外層
#layout 佈局
#head, #header 頁頭部分
foot, #footer 頁尾部分
#nav 主導航
#subnav 二級導覽
#menu 選單
#submenu 子選單
#sideBar 側邊欄
#sidebar_a, # sidebar_b 左邊欄或右邊欄
#main 頁面主體
#tag 標籤
#msg #message 提示訊息
#tips 小技巧
#vote 投票
#friendlink 友誼連結
#title 標題
#summary 摘要
#loginbar 登入條
#searchInput 搜尋輸入框
#hot 熱門熱點
#search 搜尋
#search_output 搜尋輸出和搜尋結果相似
#searchBar 搜尋列
#search_results 搜尋結果
#copyright 版權資訊
#branding 商標
#logo 網站LOGO標誌
##siteinfo 網站資訊
#siteinfoLegal 法律聲明
#siteinfoCredits 信譽
#joinus 加入我們
#partner 合作夥伴
##service 服務
#regsiter 註冊
arr/arrow 箭頭
#guild 指南
#sitemap 網站地圖
#list 清單
homepage 首頁
#subpage 二級頁面子頁面
#tool, #toolbar 工具列
#drop 下拉
dorpmenu
下拉選單
#status 狀態
#scroll 捲動
.tab
標籤頁
.left .right .center 居左、中、右
.news 新聞
.download 下載
#.banner 廣告條(頂部廣告條)
#電子貿易相關
#.products 產品
.products_prices 產品價格
.products_description 產品描述
.products_review 產品評論
#.editor_review 編輯評論
# #.news_release 最新產品
.publisher 生產商
.screenshot
縮圖
##.faqs
常見問題
.keyword 關鍵字
.blog 部落格
.forum 論壇
CSS檔案命名 說明
master.css,style.css 主要的
module.css 模組######base.css 基本上共用######layout.css 佈局，版面######themes.css 主題######columns .css 欄位######font.css 文字、字型######forms.css 表單######mend.css 補丁#####print.css 列印##### #CSS命名其它說明:###
DIV+CSS命名小結：無論是使用「.」（小寫句號）選擇符號開頭命名，還是使用「#」(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用「#」(井號)選擇符號開頭命名，其它都用「.」（小寫句號）選擇符號開頭命名，同時考慮命名的CSS選擇器在HTML中重複使用呼叫。
通常我們最常用主要命名有：wrap（外套、最外層）、header（頁眉、頭部）、nav(導航條)、menu(選單)、title(欄目標題、一般配合h1\h2\h3\h4標籤使用)
、content (內容區)、footer(頁尾、底部)、logo（標誌、可以搭配h1標籤使用）、banner（廣告條，一般在頂部）、copyRight（版權）。其它可依自己需要選擇性使用。
DIVCSS5建議：主要的、重要的、最外層的盒子用「#」(井號)選擇符號開頭命名，其它都用「.」（小寫句號）選擇符號開頭命名。
2.CSS樣式檔命名如下
#主要的master.css
佈局，版面layout.css
#專欄columns.css
文字font.css
列印樣式print.css
主題themes.css
四、英文命名技巧：
如果遇到不常用的，可以藉助翻譯工具進行翻譯取其英文命名。
推薦使用Google線上翻譯工具：http://translate.google.cn/
#規格的CSS命名帶來的好處很多，希望大家嚴守命名規則，方便你我他。
相關閱讀：
HTML呼叫CSS管理、美化div的方法
css+div典型佈局基本框架
實例展示DIV+CSS實作電台清單
#
以上是HTML裡的命名規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！
