關於html與CSS標籤命名規則的總結大全

資料夾主要建立以下資料夾：
　　1、Images 存放一些網站常用的圖片；
　　2、Css 存放一些CSS檔案；
　　3、Flash 存放一些Flash檔案；
　　44 、PSD 存放一些PSD來源檔案；
　　5、Temp 存放所有臨時圖片和其它檔案；
　　6、copyright 版權資訊（可選）
　　8、readme 說明檔案
　　css統一命名#　　註：本CSS命名規則只適合物table製作模式下
　　1、 css檔案統一放在css資料夾下；命名css.css
　　2、主樣式定義：body、table、td、tr、 a
　　3、連結樣式定義：link_white（白色）；link_black （黑色）；link_blue （藍色） 等等；
　　說明：如有重複的後面加阿拉伯數字；如link_red01 有底線的如：linkred
　　4、 文字樣式定義：font_red （紅色）；font_red_14 （紅色14號字）；font_red_14b （紅色14號加粗）
　　5、邊框樣式定義：border_red_tblr（紅色四邊）；左右三邊）；border_red_lr（紅色左右兩邊）；border_red_b （紅色底一個邊）等等；
　　6、 表單樣式定義：text_100 （文字欄位寬為100）；textarea_200_red （文字區域寬度為200 有寬為200有寬為200有寬為200有寬為200有寬為200。紅色邊框）；select_100 （列表寬為100）；button_150 （按鈕寬150）；
　　說明：表單用寬度定義，在命名中最長寫到：「text_100_red」
　　7、線的樣式定義： line_X （橫線）；line_Y （垂直線）；line_X_red （紅色橫線）；line_X_red2 （兩個像素的紅色橫線）；說明：在line中只定義虛線，實線在border中定義
　　8、其它樣式定義：在這裡主要定義一些個性化的樣式；
　　檔案命名
　　head.asp 頭檔
　　foot.asp 底檔
　　index.asp 首頁檔案
　頁檔案
」分類資料sort
　　index.asp 首頁檔案
.巢狀檔案
　　article_channel.asp 文章_頻道頁
　　article_list.asp 文章_列表頁
　　article_detail.asp 文章_顯示頁
　　註明：如果有多個文章頻道，則用article01 article02，？ ##　　product_list.asp 產品中心_列表頁
　　prodect_detail.asp 產品中心_顯示頁
　　corporation_channel.asp 會員_頻道頁
　　corporation_list.asp 列錶頁會員顯示會員顯示會員編號_corp_d.頁
　　information_channel.asp 商機資訊_頻道頁
　　information_list.asp 商機資訊_清單頁
　　information_detail.asp 商機資訊_顯示頁
　　job_b_list 招聘_job_yb.asp_list.招募_清單頁
　　job_detail.asp 招募_顯示頁
　　hr_channel.asp 求職_頻道頁
　　hr_list.asp 求職_清單頁
　　hr_detail.asp _list.asp 求職_列表頁
　　hr_detail.asp _顯示求職頁#chan_y_v.人才中心_頻道頁
　　job_hr_lisr.asp 人才中心_列表頁
　　job_hr_detail.asp 人才中心顯示頁
　　copyright.asp 版權頁
如：menubg .gif（導航的背景圖）
　　2、會員登入：login.gif 如：loginbg.gif （會員登陸的背景圖）
　　3、搜尋命名：search.gif 如：search_bg.gif （搜尋的背景圖）
　　4、小圖示：ico_數字.gif 如：ico_001.gif
　　5、線的命名：line_X_顏色.gif 如：line_X_red.gif（紅色橫向虛線）說明： line只命名虛線
　　line_Y_red.gif（紅色縱向虛線）
　　6、廣告命名：ad_數字.gif 如：ad001.gif
#　　7、其它欄目的圖片：以欄位名稱的第一個字母.gif
　　如：xwzx_bg.gif （新聞中心背景） cpzx_l.gif （產品中心的左邊圖）
　　8、產品與欄位熱點圖片： pic_數字.gif 如：pic_001.gif
說明：上、下、左、右可以縮寫為T、B、L、R
　　CSS標準化設計命名
　　1、類別class的命名規範範例
　　頭：header
　　內容：content/ container
　　尾：footer
　　導覽：nav
　　側邊欄：sidebar
　　欄目：column
　　頁外圍控制整體佈局寬度：wrapper　#Cyft]]>條：loginbar
　　標誌：logo
　　廣告：banner
　　頁面主體：main
　　熱點：hot
　　新聞：news
　　下載：download
　　新聞：news
　　下載：downloadload#a>選單：menu
　　子選單：submenu
　　搜尋：search
　　友情連結：friendlink
　　頁腳：footer
　　版權：copyright
　　頁尾：捲動#」內容：copyright
[ #　　標籤頁：tab
　　文章清單：list
　　提示訊息：msg
　　小技巧：tips
欄目標題：title
　　加入：joinus
　　指南：guild
　　服務：service
　　註冊：regsiter
　　狀態：Vivage
　　註冊：regsiter
　　狀態：#partus
　　投票：regsiter
　　狀態#partus
#te##」投票：##a>#voy>##da
#」合作夥伴##vo」投票：##」投票：##a>#」2>#ffidoo##da>##voft>#df>#Svos
Svoy>#voy##Svoy>#Svoy>#Svos#」投票：
」投票：#ff>#_vooo
S影響」。 2.註釋的寫法
　　/ Footer /
　　內容區
　　/ End Footer /
　　3、id的命名規範範例
　　（1）頁面結構
（1）頁面結構##」容器2#1

　頁頭：header
　　內容：content/container
　　頁面主體：main
　　頁尾：footer
　　導覽：nav
　　側欄位：sidebar
　　導覽：nav
　　側欄#sidebar##　　欄位外欄：co控制整體佈局寬度：wrapper
　　左右中：left right center
　　（2）導覽
　　導覽：nav
　　主導航：mainbav
　　子導航：nav##　　主導航：mainbav
　　子導航：sub#　　主導航：mainbav##　合　子導航： ##　　邊導覽：sidebar
　　左導航：leftsidebar
　　右導覽：rightsidebar
　　選單：menu
　　子選單：submenu
　：摘要： 標題# 題　）功能
　　標誌：logo
　　廣告：banner
　　登陸：login
　　登入條：loginbar
　　註冊：regsiter
　　門：searchsearch
　　註冊：regsiter
　　：title
　　加入：joinus
　　狀態：status
　　按鈕：btn
　　捲動：scroll
　　標籤頁：tab
　　文章列表：list
　　標籤頁：tab
　　文章列表：list
　目前的： current
　　小技巧：tips
　　圖示：icon
　　 註記：註
　　指南：guild
　　服務：service
　　熱點：guild
　　。
　　熱點：下載：download
　　投票：vote
　　合作夥伴：partner

　　友情連結：link

　　版權：copyright
　　4、類別的書寫規格範例

　　使用顏色類型（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 { }

　　5、CSS檔案命名範例
　　主要的master.css
　　模組module.css
　　基本共用base.css
　　佈局，版面layout.css
　　主題themes.css#1面版，版面layout.css
　　主題themes.css##coco ##　　文字font.css
　　表單forms.css
　　補丁mend.css
　　印製print.css
　　6、注意事項

　　（1）盡量小（1）盡量小；用英文；###　　（3）不加中槓和底線；###　　（4）盡量不縮寫，除非一看就明白的單字######

以上是關於html與CSS標籤命名規則的總結大全的詳細內容。更多資訊請關注PHP中文網其他相關文章！