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

一、站點文件夾主要建立以下文件夾：
　　1、images 存放一些網站常用的圖片；
　　2、css 存放一些CSS文件；
　　3、Flash 存放一些Flash文件；
　　4、Temp 存放所有臨時圖片和其它文件；
　　5、copyright 版權信息（可選）
　　6、readme 說明文件
　　
二、web文件命名
　　主要根據頁面內容和功能命名。如：
index.html 首頁文件
information.html 旅游資訊
scenery.html 風景欣賞
ticket.html 網上購票
About.html 關于我們
Join.html 加入我們

三、CSS文件命名示例
1.index.css：單獨為首頁建立樣式
2.base.css：共用樣式。
3.style.css：獨立頁面所使用的樣式文件。
4.global.css：頁面樣式基礎，全局公用樣式，頁面中必須包含。
5.layout.css：布局、版面樣式，公用類型較多時使用，一般用在首頁級頁面和產品類頁面中
6.Master.css/main.css：主要的樣式表
7.forms.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）用于底部
12．content/container：內容
　　13. left right center：左右中

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

六、功能命名
1.logo：標記網站logo標志
2.banner：標語、廣告條、頂部廣告條
3.login：登陸，（例如登錄表單：form-login）
4.loginbar：登錄條
5.regsiter：注冊
6.tool、toolbar：工具條
7.search：搜索
8.searchbar：搜索條
9.searchlnput：搜索輸入框
10.shop：功能區，表示現在的
11.icon：小圖標
12.label：商標
13.homepage：首頁
14.subpage：二級頁面子頁面
15.hot：熱門熱點
16.list：文章列表，（例如新聞列表：list-news）
17.scroll:滾動
18.tab：標簽
19.sitemap：網站地圖
20.msg 或 message：提示信息
21.current：當前的
22.joinus：加入
23.status：狀態
24.btn：按鈕，（例如搜索按鈕可寫成：btn-search）
25.tips：小技巧
26.note：注釋
27.guild：指南
28.arr、arrow：標記箭頭
29.service：服務
30.breadcrumb：(即頁面所處位置導航提示）
31.download：下載
32.vote：投票
33.siteinfo：網站信息
34.partner：合作伙伴
35.link、friendlink：友情鏈接
36.copyright：版權信息
37.siteinfoCredits：信譽
38.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（代表工具欄的背景圖片位置）
八、類class的書寫規范示例
　　（1）顏色：使用顏色的名稱或者16進制代碼，如
　　.red { color： red； }
　　.f60 { color： #f60； }
　　.ff8600 { color： #ff8600； }
　　（2）字體大小，直接使用"font+字體大小"作為名稱，如
　　.font12px { font-size： 12px； }
　　.font9pt {font-size： 9pt； }
　　（3）對齊樣式，使用對齊目標的英文名稱，如
　　.left { float：left； }
　　.bottom { float：bottom； }
　　（4）標題欄樣式，使用"類別+功能"的方式命名，如
　　.barnews { }
　　.barproduct { }
　　九、注意事項
　　（1）一律小寫；
　　（2）盡量用英文；
　　（3）不加中杠和下劃線；
　　（4）盡量不縮寫，除非一看就明白的單詞

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

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

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

命名：根據每塊元素的主題 或者功能、在頁面上的位置

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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。