Web設(shè)計(jì)命名規(guī)范
在設(shè)計(jì)一個(gè)HTML文件時(shí)，需要為站點(diǎn)文件夾、文件及文檔結(jié)構(gòu)、ID及類命名，在需要命名是初學(xué)著可能只會(huì)依據(jù)自己的想法隨便給一些簡(jiǎn)單的名稱，但若是一味的亂起名稱，不僅會(huì)讓團(tuán)隊(duì)的伙伴看不明白，還會(huì)導(dǎo)致標(biāo)簽名稱混亂，這樣會(huì)使得代碼維護(hù)十分困難，是非常不利于管理的。所以我們?cè)谠O(shè)計(jì)整個(gè)網(wǎng)站，還是一個(gè)單獨(dú)的HTML頁(yè)面，都應(yīng)該要有良好的命名規(guī)則。
文件名稱必須由英文字母開頭，通常命名的規(guī)則是根據(jù)內(nèi)容的分類和框架的類型翻譯成英文單詞來(lái)命名，例如：div id=“nav”（表示為這個(gè)div是個(gè)導(dǎo)航條），所有單詞應(yīng)當(dāng)用小寫字母，名稱中可以使用數(shù)字，或下劃線，例如：div=“main_piclist”（表示主要內(nèi)容下的圖片列表）、div=“nav_bg.jpg”（表示導(dǎo)航條的背景圖），還可以使用中劃線進(jìn)行名稱之間的連接，例如：div=“main-left”（表示左側(cè)內(nèi)容的布局）所有命名要盡量避免使用中文字符，要以最少的字母達(dá)到最容易理解的含義，除非一看即懂，否則盡量不縮寫。

一、站點(diǎn)文件夾主要建立以下文件夾：
　　1、images 存放一些網(wǎng)站常用的圖片；
　　2、css 存放一些CSS文件；
　　3、Flash 存放一些Flash文件；
　　4、Temp 存放所有臨時(shí)圖片和其它文件；
　　5、copyright 版權(quán)信息（可選）
　　6、readme 說(shuō)明文件
　　
二、web文件命名
　　主要根據(jù)頁(yè)面內(nèi)容和功能命名。如：
index.html 首頁(yè)文件
information.html 旅游資訊
scenery.html 風(fēng)景欣賞
ticket.html 網(wǎng)上購(gòu)票
About.html 關(guān)于我們
Join.html 加入我們

三、CSS文件命名示例
1.index.css：單獨(dú)為首頁(yè)建立樣式
2.base.css：共用樣式。
3.style.css：獨(dú)立頁(yè)面所使用的樣式文件。
4.global.css：頁(yè)面樣式基礎(chǔ)，全局公用樣式，頁(yè)面中必須包含。
5.layout.css：布局、版面樣式，公用類型較多時(shí)使用，一般用在首頁(yè)級(jí)頁(yè)面和產(chǎn)品類頁(yè)面中
6.Master.css/main.css：主要的樣式表
7.forms.css：表單樣式
四、頁(yè)面結(jié)構(gòu)命名
1．page：代表整個(gè)頁(yè)面，用于最外層。
2．wrap：外套，將所有元素包在一起的一個(gè)外圍包，用于最外層
3．wrapper：頁(yè)面外圍控制整體布局寬度，用于最外層
4．container：一個(gè)整體容器，用于最外層
5．head、header：頁(yè)頭區(qū)域，用于頭部
6．nav：導(dǎo)航條
7．content：內(nèi)容，網(wǎng)站中最重要的內(nèi)容區(qū)域，用于網(wǎng)頁(yè)中部主體
8．main：網(wǎng)站中的主要區(qū)域（表示最重要的一塊位置），用于中部主體內(nèi)容
9．column：欄目
10．sidebar：側(cè)欄
11．foot、footer：頁(yè)尾、頁(yè)腳。網(wǎng)站一些附加信息放置區(qū)域，（或命名為copyright）用于底部
12．content/container：內(nèi)容
　　13. left right center：左右中

ContentLeft contgentRight
五、導(dǎo)航命名
1.nav、navbar、navigation、nav-wrapper：導(dǎo)航條或?qū)Ш桨?#xff0c;代表橫向?qū)Ш?br /> 2.topnav：頂部導(dǎo)航
3.mainbav：主導(dǎo)航
4.subnav：子導(dǎo)航
5.sidebar：邊導(dǎo)航
6.leftsidebar 或 sidebar_a ：左導(dǎo)航
7.rightsidebar 或 sidebar_b：右導(dǎo)航
8.title：標(biāo)題
9.summary：摘要/li>
10.menu：菜單。區(qū)域包含一般的鏈接和菜單
11.submenu：子菜單
12.drop：下拉
13.dorpmenu：下拉菜單
14.links：鏈接菜單

六、功能命名
1.logo：標(biāo)記網(wǎng)站logo標(biāo)志
2.banner：標(biāo)語(yǔ)、廣告條、頂部廣告條
3.login：登陸，（例如登錄表單：form-login）
4.loginbar：登錄條
5.regsiter：注冊(cè)
6.tool、toolbar：工具條
7.search：搜索
8.searchbar：搜索條
9.searchlnput：搜索輸入框
10.shop：功能區(qū)，表示現(xiàn)在的
11.icon：小圖標(biāo)
12.label：商標(biāo)
13.homepage：首頁(yè)
14.subpage：二級(jí)頁(yè)面子頁(yè)面
15.hot：熱門熱點(diǎn)
16.list：文章列表，（例如新聞列表：list-news）
17.scroll:滾動(dòng)
18.tab：標(biāo)簽
19.sitemap：網(wǎng)站地圖
20.msg 或 message：提示信息
21.current：當(dāng)前的
22.joinus：加入
23.status：狀態(tài)
24.btn：按鈕，（例如搜索按鈕可寫成：btn-search）
25.tips：小技巧
26.note：注釋
27.guild：指南
28.arr、arrow：標(biāo)記箭頭
29.service：服務(wù)
30.breadcrumb：(即頁(yè)面所處位置導(dǎo)航提示）
31.download：下載
32.vote：投票
33.siteinfo：網(wǎng)站信息
34.partner：合作伙伴
35.link、friendlink：友情鏈接
36.copyright：版權(quán)信息
37.siteinfoCredits：信譽(yù)
38.siteinfoLegal：法律信息

七、CSS樣式命名
1.對(duì)齊樣式命名：left（左邊內(nèi)容）、center（中間內(nèi)容）、right（右邊內(nèi)容）等；
2.顏色英文命名：red（紅色）、green（綠色）、yellow（黃色），又或者border_red（紅色邊框）等；
3.顏色代碼命名：f00（紅色）、ff0（黃色）、f90（橙色）等；
4.文字大小命名：font12px（字體12像素）、font16px（字體16像素）等；
5.頁(yè)面線條命名：line_x （橫線）、line_y （縱線）或 line_red（紅線）、line_black（黑線）
6.圖片圖標(biāo)命名：pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
7.頁(yè)面廣告命名：ad_01、ad_02
8.背景框架命名：nav_bg（代表導(dǎo)航條的背景圖片位置）、tool_bg（代表工具欄的背景圖片位置）
八、類class的書寫規(guī)范示例
　　（1）顏色：使用顏色的名稱或者16進(jìn)制代碼，如
　　.red { color： red； }
　　.f60 { color： #f60； }
　　.ff8600 { color： #ff8600； }
　　（2）字體大小，直接使用"font+字體大小"作為名稱，如
　　.font12px { font-size： 12px； }
　　.font9pt {font-size： 9pt； }
　　（3）對(duì)齊樣式，使用對(duì)齊目標(biāo)的英文名稱，如
　　.left { float：left； }
　　.bottom { float：bottom； }
　　（4）標(biāo)題欄樣式，使用"類別+功能"的方式命名，如
　　.barnews { }
　　.barproduct { }
　　九、注意事項(xiàng)
　　（1）一律小寫；
　　（2）盡量用英文；
　　（3）不加中杠和下劃線；
　　（4）盡量不縮寫，除非一看就明白的單詞

注：
命名：根據(jù)每塊元素的主題 或者功能、在頁(yè)面上的位置
駝峰命名 從第二個(gè)單詞開始每個(gè)單詞的首字母大寫 如; #mainLeftBox{}
寫包含樣式的時(shí)候能找到這個(gè)元素并且不影響其他元素即可

登錄條：loginBar 標(biāo)志：logo 側(cè)欄：sideBar
廣告：banner 導(dǎo)航：nav 子導(dǎo)航：subNav
菜單：menu 子菜單：subMenu 搜索：search
滾動(dòng)：scroll 頁(yè)面主體：main 內(nèi)容：content
標(biāo)簽頁(yè)：tab 文章列表：list 提示信息：msg
小技巧：tips 欄目標(biāo)題：title 加入：joinus
指南：guild 服務(wù)：service 熱點(diǎn)：hot
新聞：news 下載：download 注冊(cè)：regsiter
狀態(tài)：status 按鈕：btn 投票：vote
合作伙伴：partner 友情鏈接：friendLink 頁(yè)腳：footer
版權(quán)：copyRight

外　套：wrap 版 權(quán)：copyRight 商　標(biāo)：label 標(biāo)　題：title
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar 左導(dǎo)航：leftsideBar 右導(dǎo)航：rightsideBar
標(biāo)　語(yǔ)：banner 菜單內(nèi)容1： menu1Content
菜單容量：　menuContainer 子菜單：　　submenu
邊導(dǎo)航圖標(biāo)：sidebarIcon 注釋：　　　note
面包屑：breadCrumb(即頁(yè)面所處位置導(dǎo)航提示)
容器：container 內(nèi)容：content 搜索：search
登陸：login 功能區(qū)：　　shop(如購(gòu)物車，收銀臺(tái))
當(dāng)前：current

命名：根據(jù)每塊元素的主題 或者功能、在頁(yè)面上的位置

駝峰命名 從第二個(gè)單詞開始每個(gè)單詞的首字母大寫 #mainLeftBox{}

寫包含樣式的時(shí)候能找到這個(gè)元素并且不影響其他元素即可

頁(yè)頭：header 如：#header{屬性:屬性值;}或.header{屬性:屬性值;},也許你需要了解class與id區(qū)別及用法
登錄條：loginBar 標(biāo)志：logo 側(cè)欄：sideBar
廣告：banner 導(dǎo)航：nav 子導(dǎo)航：subNav
菜單：menu 子菜單：subMenu 搜索：search
滾動(dòng)：scroll 頁(yè)面主體：main 內(nèi)容：content
標(biāo)簽頁(yè)：tab 文章列表：list 提示信息：msg
小技巧：tips 欄目標(biāo)題：title 加入：joinus
指南：guild 服務(wù)：service 熱點(diǎn)：hot
新聞：news 下載：download 注冊(cè)：regsiter
狀態(tài)：status 按鈕：btn 投票：vote
合作伙伴：partner 友情鏈接：friendLink 頁(yè)腳：footer
版權(quán)：copyRight

外　套：wrap 版 權(quán)：copyRight 商　標(biāo)：label 標(biāo)　題：title
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar 左導(dǎo)航：leftsideBar 右導(dǎo)航：rightsideBar
標(biāo)　語(yǔ)：banner 菜單內(nèi)容1： menu1Content
菜單容量：　menuContainer 子菜單：　　submenu
邊導(dǎo)航圖標(biāo)：sidebarIcon 注釋：　　　note
面包屑：breadCrumb(即頁(yè)面所處位置導(dǎo)航提示)
容器：container 內(nèi)容：content 搜索：search
登陸：login 功能區(qū)：　　shop(如購(gòu)物車，收銀臺(tái))
當(dāng)前：current

總結(jié)

以上是生活随笔為你收集整理的Web设计命名规则的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。