文件夾主要建立以下文件夾：
　　1、Images 存放一些網(wǎng)站常用的圖片；
　　2、Css 存放一些CSS文件；
　　3、Flash 存放一些Flash文件；
　　4、PSD 存放一些PSD源文件；
　　5、Temp 存放所有臨時(shí)圖片和其它文件；
　　6、copyright 版權(quán)信息（可選）
　　8、readme 說(shuō)明文件
　　css統(tǒng)一命名
　　注：本CSS命名規(guī)則只適合物table制作模式下
　　1、 css文件統(tǒng)一放在css文件夾下；命名css.css
　　2、 主樣式定義：body、table、td、tr、a
　　3、 鏈接樣式定義：link_white（白色）；link_black （黑色）；link_blue （藍(lán)色） 等等；
　　說(shuō)明：如有重復(fù)的后面加阿拉伯?dāng)?shù)字；如 link_red01 有下劃線的如：linkred
　　4、 文字樣式定義：font_red （紅色）；font_red_14 （紅色14號(hào)字）；font_red_14b （紅色14號(hào)加粗）
　　5、 邊框樣式定義：border_red_tblr （紅色四個(gè)邊）；border_red_blr（紅色底左右三邊）；border_red_lr（紅色左右兩個(gè)邊）；border_red_b （紅色底一個(gè)邊）等等；
　　6、 表單樣式定義：text_100 （文本字段寬為100）； textarea_200_red （文本區(qū)域?qū)挒?00有紅色邊框）；select_100 （列表寬為100）；button_150 （按鈕寬150）；
　　說(shuō)明：表單用寬度定義，在命名中最長(zhǎng)寫(xiě)到：“text_100_red”
　　7、 線的樣式定義：line_X （橫線）；line_Y （豎線）；line_X_red （紅色橫線）；line_X_red2 （兩個(gè)像素的紅色橫線）；說(shuō)明：在line中只定義虛線，實(shí)線在border中定義
　　8、 其它樣式定義：在這里主要定義一些個(gè)性化的樣式；
　　文件命名
　　head.asp 頭文件
　　foot.asp 底文件
　　index.asp 首頁(yè)文件
　　sort.html 分類嵌套文件
　　article_channel.asp 文章_頻道頁(yè)
　　article_list.asp 文章_列表頁(yè)
　　article_detail.asp 文章_顯示頁(yè)
　　注明：如果有多個(gè)文章頻道，則用article01， article02，article03等等
　　exhibit_channel.asp 展會(huì)信息_頻道頁(yè)
　　exhibit_list.asp 展會(huì)信息_列表頁(yè)
　　exhibit_detail.asp 展會(huì)信息_顯示頁(yè)
　　product_channel.asp 產(chǎn)品中心_頻道頁(yè)
　　product_list.asp 產(chǎn)品中心_列表頁(yè)
　　prodect_detail.asp 產(chǎn)品中心_顯示頁(yè)
　　corporation_channel.asp 會(huì)員_頻道頁(yè)
　　corporation_list.asp 會(huì)員_列表頁(yè)
　　corporation_detail.asp 會(huì)員_顯示頁(yè)
　　information_channel.asp 商機(jī)信息_頻道頁(yè)
　　information_list.asp 商機(jī)信息_列表頁(yè)
　　information_detail.asp 商機(jī)信息_顯示頁(yè)
　　job_channel.asp 招聘_頻道頁(yè)
　　job_list.asp 招聘_列表頁(yè)
　　job_detail.asp 招聘_顯示頁(yè)
　　hr_channel.asp 求職_頻道頁(yè)
　　hr_list.asp 求職_列表頁(yè)
　　hr_detail.asp 求職_顯示頁(yè)
　　job_hr_channel.asp 人才中心_頻道頁(yè)
　　job_hr_lisr.asp 人才中心_列表頁(yè)
　　job_hr_detail.asp 人才中心顯示頁(yè)
　　copyright.asp 版權(quán)頁(yè)
　　圖片命名
　　1、導(dǎo)航命名：menu.gif 如：menubg .gif（導(dǎo)航的背景圖）
　　2、會(huì)員登錄：login.gif 如：loginbg.gif （會(huì)員登陸的背景圖）
　　3、搜索命名：search.gif 如：search_bg.gif （搜索的背景圖）
　　4、小 圖 標(biāo)：ico_數(shù)字.gif 如：ico_001.gif
　　5、線的命名：line_X_顏色.gif 如：line_X_red.gif（紅色橫向虛線）說(shuō)明：line只命名虛線
　　line_Y_red.gif（紅色縱向虛線）
　　6、廣告命名：ad_數(shù)字.gif 如：ad001.gif
　　7、其它欄目的圖片：以欄目名的第一個(gè)字母.gif
　　如：xwzx_bg.gif （新聞中心背景） cpzx_l.gif （產(chǎn)品中心的左邊圖）
　　8、產(chǎn)品與欄目熱點(diǎn)圖片： pic_數(shù)字.gif 如：pic_001.gif
　　說(shuō)明：上、下、左、右 可以縮寫(xiě)為T、B、L、R
　　CSS標(biāo)準(zhǔn)化設(shè)計(jì)命名
　　1、類class的命名規(guī)范示例
　　頭：header
　　內(nèi)容：content/container
　　尾：footer
　　導(dǎo)航：nav
　　側(cè)欄：sidebar
　　欄目：column
　　頁(yè)面外圍控制整體布局寬度：wrapper
　　左右中：left right center
　　登錄條：loginbar
　　標(biāo)志：logo
　　廣告：banner
　　頁(yè)面主體：main
　　熱點(diǎn)：hot
　　新聞：news
　　下載：download
　　子導(dǎo)航：subnav
　　菜單：menu
　　子菜單：submenu
　　搜索：search
　　友情鏈接：friendlink
　　頁(yè)腳：footer
　　版權(quán)：copyright
　　滾動(dòng)：scroll
　　內(nèi)容：content
　　標(biāo)簽頁(yè)：tab
　　文章列表：list
　　提示信息：msg
　　小技巧：tips
　　欄目標(biāo)題：title
　　加入：joinus
　　指南：guild
　　服務(wù)：service
　　注冊(cè)：regsiter
　　狀態(tài)：status
　　投票：vote
　　合作伙伴：partner
　　2、注釋的寫(xiě)法
　　/ Footer /
　　內(nèi)容區(qū)
　　/ End Footer /
　　3、id的命名規(guī)范示例
　　（1）頁(yè)面結(jié)構(gòu)
　　容器： container
　　頁(yè)頭：header
　　內(nèi)容：content/container
　　頁(yè)面主體：main
　　頁(yè)尾：footer
　　導(dǎo)航：nav
　　側(cè)欄：sidebar
　　欄目：column
　　頁(yè)面外圍控制整體布局寬度：wrapper
　　左右中：left right center
　　（2）導(dǎo)航
　　導(dǎo)航：nav
　　主導(dǎo)航：mainbav
　　子導(dǎo)航：subnav
　　頂導(dǎo)航：topnav
　　邊導(dǎo)航：sidebar
　　左導(dǎo)航：leftsidebar
　　右導(dǎo)航：rightsidebar
　　菜單：menu
　　子菜單：submenu
　　標(biāo)題： title
　　摘要： summary
　　（3）功能
　　標(biāo)志：logo
　　廣告：banner
　　登陸：login
　　登錄條：loginbar
　　注冊(cè)：regsiter
　　搜索：search
　　功能區(qū)：shop
　　標(biāo)題：title
　　加入：joinus
　　狀態(tài)：status
　　按鈕：btn
　　滾動(dòng)：scroll
　　標(biāo)簽頁(yè)：tab
　　文章列表：list
　　提示信息：msg
　　當(dāng)前的： current
　　小技巧：tips
　　圖標(biāo)： icon
　　注釋：note
　　指南：guild
　　服務(wù)：service
　　熱點(diǎn)：hot
　　新聞：news
　　下載：download
　　投票：vote
　　合作伙伴：partner
　　友情鏈接：link
　　版權(quán)：copyright
　　4、類class的書(shū)寫(xiě)規(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 { }

　　5、CSS文件命名示例
　　主要的 master.css
　　模塊 module.css
　　基本共用 base.css
　　布局，版面 layout.css
　　主題 themes.css
　　專欄 columns.css
　　文字 font.css
　　表單 forms.css
　　補(bǔ)丁 mend.css
　　打印 print.css
　　6、注意事項(xiàng)
　　（1）一律小寫(xiě)；
　　（2）盡量用英文；
　　（3）不加中杠和下劃線；
　　（4）盡量不縮寫(xiě)，除非一看就明白的單詞

以上就是關(guān)于html與CSS標(biāo)簽命名規(guī)則的總結(jié)大全的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！