HTML裡的命名規則

我們知道，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中文網其他相關文章！