WEB前端開(kāi)發(fā)規(guī)范

WEB前端開(kāi)發(fā)規(guī)范

目錄

1、規(guī)范目的2、基本準(zhǔn)則3、文件規(guī)范4、文件規(guī)范

5、html書(shū)寫(xiě)規(guī)范6、css書(shū)寫(xiě)規(guī)范

7、JavaScript書(shū)寫(xiě)規(guī)范8、圖片規(guī)范9、注釋規(guī)范

10、開(kāi)發(fā)及測(cè)試工具約定11、其他規(guī)范12、CSSHack1

規(guī)范目的

為提高團(tuán)隊(duì)協(xié)作效率,便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù),輸出高質(zhì)量的文檔,同是為網(wǎng)站有一個(gè)更好的前端架構(gòu)，網(wǎng)站的發(fā)展及未來(lái)打好一個(gè)基礎(chǔ)。本文檔如有不對(duì)或者不合適的地方請(qǐng)?zhí)岢鰜?lái),

基本準(zhǔn)則

符合web標(biāo)準(zhǔn),語(yǔ)義化html,結(jié)構(gòu)表現(xiàn)行為分離,兼容性優(yōu)良.頁(yè)面性能方面,代碼要求簡(jiǎn)潔明了有序,盡可能的減小服務(wù)器負(fù)載,保證最快的解析速度.文件規(guī)范

3.1、html,css,js,images文件均歸檔至約定的目錄中;

23

3.2、html文件命名:命名以中文命名，依實(shí)際模塊命名，如果同一模塊以_&title&_來(lái)組合命名,以方便添加功能時(shí)查找對(duì)應(yīng)頁(yè)面，團(tuán)結(jié)里的相互理解。

例如：我的好股網(wǎng)里的TAB命名

大模塊名稱_小模塊的titile.html我的好股網(wǎng)_關(guān)注的微博.html

3.3、css文件命名:英文命名,后綴.css.初始化樣式reset.css，其他樣式依實(shí)際模塊頁(yè)面需求命名，共用樣式一般以模塊考慮來(lái)劃分命名,如有改版修改的css文件可以采用&_時(shí)間日期

例如：微博改版

版塊名稱_時(shí)間日期.cssnew_blog_1212.css

4.4、Js文件命名:英文命名,后綴.js.共用common.js,其他依實(shí)際模塊需求命名.5.5、圖片命名:4

html書(shū)寫(xiě)規(guī)范

4.1、文檔類型聲明及編碼:統(tǒng)一用;編碼統(tǒng)一為。目的:統(tǒng)一性和網(wǎng)站提高開(kāi)發(fā)合作效率。

4.2、非特殊情況下樣式文件必須外鏈至之間;非特殊情況下JavaScript文件必須外鏈至頁(yè)面底部之前;目的:網(wǎng)站的優(yōu)化。

4.3、所有編碼均遵循xhtml標(biāo)準(zhǔn),標(biāo)簽&屬性&屬性命名必須由小寫(xiě)字母及下劃線數(shù)字組成,且所有標(biāo)簽必須閉合,包括br(),hr()等;屬性值必須用雙引號(hào)包括;目的:更加符合web標(biāo)準(zhǔn)(w3c),也有利于seo。4.4、充分利用無(wú)兼容性問(wèn)題的html自身標(biāo)簽,比如span,em,strong,optgroup,label,等等目的：減少代碼量

4.5、語(yǔ)義化html,如標(biāo)題根據(jù)重要性用h*(同一頁(yè)面只能有一個(gè)h1),段落標(biāo)記用p,列表用ul,內(nèi)聯(lián)元素中不可嵌套塊級(jí)元素;目的：減少代碼量，也有利于seo

4.5、盡可能減少div嵌套,如4.11、給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋,方便后臺(tái)程序員嵌套模版;

4.12、特殊符號(hào)使用:盡可能使用代碼替代:比如)&空格()&()等等;4.13、書(shū)寫(xiě)頁(yè)面過(guò)程中,請(qǐng)考慮向后擴(kuò)展性;5

css書(shū)寫(xiě)規(guī)范

5.1編碼統(tǒng)一為utf-8;都用小寫(xiě)

5.2class與id的使用:一般都使用class，特殊除外，因id的優(yōu)先級(jí)比class的高5.3樣式命名推薦使用英文避免使用漢語(yǔ)拼音,盡量使用簡(jiǎn)易的單詞組合;命名方式參照《WEB前端開(kāi)

發(fā)CSS命名參考》。命名方式采用駝峰命名法和劃線命名法兩種，提高可讀性。例如：dropMenu、subNavMenu、drop-menu、sub_nav_menu。駝峰命名法用來(lái)區(qū)別不同的單詞。劃線命名法表明從屬關(guān)系。如：“.timeList”和“.time_list”分別表示時(shí)間列表和時(shí)間部分下的列表。5.4css屬性書(shū)寫(xiě)順序,建議遵循布局定位屬性>自身屬性>文本屬性>其他屬性.此條可根據(jù)

自身習(xí)慣書(shū)寫(xiě),但盡量保證同類屬性寫(xiě)在一起.1.定位屬性（比如：display,position,float,clear,visibility,table-layout等）2.自身屬性（比如：width,height,margin,padding,border等）3.文本屬性（比如：font,line-height,text-align,text-indent,vertical-align等）4.其他屬性（比如：color,background,opacity,cursor,content,list-style,quotes等）

5.5避免濫用自選擇器。#testspan｛｝和#test.span｛｝盡量選擇后者。采用繼承屬性還是新加

class根據(jù)不同情況靈活運(yùn)用。新加class便于擴(kuò)展維護(hù)。繼承屬性示例：這兒是標(biāo)題列表201*-09-15樣式表：ul.listli{position:relative}ul.listlispan{position:absolute;right:0}即可實(shí)現(xiàn)日期居右顯示5.6樣式表中中文字體名,請(qǐng)務(wù)必轉(zhuǎn)碼成unicode碼,以避免編碼錯(cuò)誤時(shí)亂碼;

5.7使用table標(biāo)簽時(shí),請(qǐng)不要用width/height/cellspacing/cellpadding等table屬性直接定義

表現(xiàn),應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn),如

thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;}tableth,tabletd{padding:0;},base.css文件中我會(huì)初始化表格樣式)5.8盡量不使用兼容ie8,和代碼*html

寫(xiě)法。

5.9用png圖片做圖片時(shí),要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效

果,請(qǐng)參考文檔《IE6下png透明問(wèn)題解決的最佳方案》

5.10兼容性屬性的使用,比如text-shadow（文字陰影）、css3的相關(guān)屬性在保證目前主流瀏覽器使

用正常的情況下可以使用來(lái)對(duì)頁(yè)面進(jìn)行錦上添花式的設(shè)計(jì)。

5.11減少使用影響性能的屬性,比如position:absolute||float;5.12必須為大區(qū)塊樣式添加注釋,小區(qū)塊適量注釋;5.13代碼縮進(jìn)與格式:單行書(shū)寫(xiě),統(tǒng)一使用tab進(jìn)行縮進(jìn)。;

目的：css書(shū)寫(xiě)規(guī)范主要提高效率方便面想關(guān)人員的修改，提高網(wǎng)站的擴(kuò)展性(根據(jù)網(wǎng)站情況不一樣，要靈活應(yīng)用)6

JavaScript書(shū)寫(xiě)規(guī)范

6.1文件編碼統(tǒng)一為utf-8,書(shū)寫(xiě)過(guò)程過(guò),每行代碼結(jié)束必須有分號(hào);要檢查網(wǎng)上down下來(lái)的代碼造

成的代碼污染(沉冗沖突，代碼注入)等，有的可以firefox的一些擴(kuò)展插件分析;6.2庫(kù)引入:原則上僅引入jQuery庫(kù),若需引入第三方庫(kù),須與團(tuán)隊(duì)其他人員討論決定;6.3命名語(yǔ)義化,盡可能利用英文單詞或其縮寫(xiě);6.4代碼結(jié)構(gòu)明了,加適量注釋.提高函數(shù)重用率;6.5注重與html分離,減小reflow,注重性能.目的：避免帶來(lái)的問(wèn)題及沖突，網(wǎng)站的優(yōu)化。7

圖片規(guī)范

7.1所有頁(yè)面元素類圖片均放入img文件夾,7.2圖片格式僅限于gif||png||jpg;

7.3命名全部用小寫(xiě)英文字母||數(shù)字||_的組合，其中不得包含漢字||空格||特殊字符；盡

量用易懂的詞匯,便于團(tuán)隊(duì)其他成員理解;另,命名分頭尾兩部分,用下劃線隔開(kāi),比如ad_left01.gif||btn_submit.gif;

7.4在保證視覺(jué)效果的情況下選擇最小的圖片格式與圖片質(zhì)量,以減少加載時(shí)間;7.5盡量避免使用半透明的png圖片(若使用,請(qǐng)參考css規(guī)范相關(guān)說(shuō)明);

7.6運(yùn)用csssprite技術(shù)集中小的背景圖或圖標(biāo),減小頁(yè)面http請(qǐng)求,但注意,請(qǐng)務(wù)必在對(duì)應(yīng)的

spritepsd源圖中劃參考線,并保存至img目錄下.

8注釋規(guī)范

8.1html注釋:注釋格式,“-”只能在注釋的始末位置,不可置入注釋文字區(qū)域;8.2css注釋:注釋格式/*這兒是注釋*/;

8.3JavaScript注釋,單行注釋使用“//這兒是單行注釋”,多行注釋使用/*這兒有多行注釋*/;

9開(kāi)發(fā)及測(cè)試工具約定

9.1編碼必須格式化,比如縮進(jìn);

9.2測(cè)試工具:前期開(kāi)發(fā)僅測(cè)試FireFox&IE6&IE7&IE8,后期優(yōu)化時(shí)加入Opera&Chrome;9.3建議測(cè)試順序:FireFox>IE7>IE8>IE6>Opera>Chrome,建議安裝firebug及IETab

Plus插件.安裝調(diào)試?yán)�器IETester

10其他規(guī)范

10.1開(kāi)發(fā)過(guò)程中嚴(yán)格按分工完成頁(yè)面,以提高css復(fù)用率,避免重復(fù)開(kāi)發(fā);10.2減小沉冗代碼,書(shū)寫(xiě)所有人都可以看的懂的代碼.簡(jiǎn)潔易懂是一種美德.為用戶著想,為服務(wù)

器著想.11CSSHack

即便是完美的CSS也未必能在目前眾多的終端瀏覽器中呈現(xiàn)一致的效果，所以，CSSHack在很多情況下都是必要的，建議先以對(duì)CSS標(biāo)準(zhǔn)支持得比較好的瀏覽器（比如“Firefox”或者“Chrome”）為主編輯CSS，最后再處理IE的兼容性單獨(dú)為IE建立一個(gè)CSS文件（比如for-ie.css,fuck-ie.css,ie-hack.css等），最后在HTML文件中，通過(guò)IE的條件注釋按需引用。

擴(kuò)展閱讀：web前端開(kāi)發(fā)規(guī)范

前端開(kāi)發(fā)規(guī)范

WEBWEBFrontDevelopmentStandard

一．概況

1.1WEB標(biāo)準(zhǔn)

二．實(shí)現(xiàn)WEB標(biāo)準(zhǔn)2.1WEB前端開(kāi)發(fā)工具2.2網(wǎng)站架構(gòu)的流程

2.3XHTML的編寫(xiě)代碼規(guī)范

2.4CSS相關(guān)規(guī)范

2.5Javascript的編寫(xiě)代碼規(guī)范

三．目錄結(jié)構(gòu)和命名規(guī)范3.1網(wǎng)站的目錄結(jié)構(gòu)和文件命名

3.2XHTML元素的命名參考

四．附件附件1命名及注釋規(guī)范

附件2網(wǎng)頁(yè)設(shè)計(jì)psd效果圖制作要求

附件3EricMeyer和YUI的cssreset以及通用、常用公共樣式

附件4css兼容

一．概況

1.1WEB標(biāo)準(zhǔn)WEB標(biāo)準(zhǔn)不是一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)

（Presentation）和行為（Behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML,表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對(duì)象模型（如W3CDOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript標(biāo)準(zhǔn)。我們來(lái)簡(jiǎn)單了解一下這些標(biāo)準(zhǔn)：

1.11結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言

（1）XML

XML是TheExtensibleMarkupLanguage(可擴(kuò)展標(biāo)識(shí)語(yǔ)言)的簡(jiǎn)寫(xiě)。目前推薦遵循的是W3C于201*年10月6日發(fā)布的XML1.0，參（-XML-201*1006）。和HTML一樣，XML同樣來(lái)源于SGML，但XML是一種能定義其他語(yǔ)言的語(yǔ)。XML最初設(shè)計(jì)的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來(lái)逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。（2）XHTML

XHTML是TheExtensibleHyperTextMarkupLanguage可擴(kuò)展標(biāo)識(shí)語(yǔ)言的縮寫(xiě)。目前推薦遵循的是W3C于201*年1月26日推薦XML1.0。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML，但面對(duì)成千上萬(wàn)已有的站點(diǎn)，直接采用XML還為時(shí)過(guò)早。因此，我們?cè)贖TML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML。簡(jiǎn)單的說(shuō)，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過(guò)渡。1.12表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言

CSS是CascadingStyleSheets層疊樣式表的縮寫(xiě)。目前推薦遵循的是W3C于1998年5月12日推薦CSS2。W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語(yǔ)言。純CSS布局與結(jié)構(gòu)式XHTML相結(jié)合能幫助設(shè)計(jì)師分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問(wèn)及維護(hù)更加容易。

1.13行為標(biāo)準(zhǔn)

（1）DOM

DOM是DocumentObjectModel文檔對(duì)象模型的縮寫(xiě)，根據(jù)W3CDOM規(guī)范DOM是一種與瀏覽器，平臺(tái)，語(yǔ)言的接口，使得你可以訪問(wèn)頁(yè)面其他的標(biāo)準(zhǔn)組件。簡(jiǎn)單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設(shè)計(jì)師和開(kāi)發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來(lái)訪問(wèn)他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)像。(2)ECMAScript

ECMAScript是ECMA(EuropeanComputerManufacturersAssociation)制定的標(biāo)準(zhǔn)腳本語(yǔ)言（JAVAScript）。目前推薦遵循的是ECMAScript262。

二、如何實(shí)現(xiàn)WEB標(biāo)準(zhǔn)

2.1WEB前端開(kāi)發(fā)工具2.11制作軟件

制作網(wǎng)頁(yè)，我們可以用Dreamweaver和Frontpage等直接視圖進(jìn)行網(wǎng)頁(yè)制作。而要實(shí)現(xiàn)Web標(biāo)準(zhǔn)，這些

軟件或者工具都必須升級(jí)到最新版。如AdobeDreamweaverCS、MicrosoftExpressionweb,ApatanaStudio.使用最新的軟件，更有助編寫(xiě)出嚴(yán)格標(biāo)準(zhǔn)的頁(yè)面。同時(shí)在此，我們很應(yīng)該明確，可視化網(wǎng)頁(yè)制作會(huì)產(chǎn)生很多冗余的代碼，不利于SEO優(yōu)化及今后的維護(hù)，拋棄視圖制作頁(yè)面，改為純手寫(xiě)HTML和CSS。培養(yǎng)良好的書(shū)寫(xiě)

代碼習(xí)慣，對(duì)維護(hù)和修改會(huì)起到事半功倍的效果。

■ApatanaStudio(免費(fèi))■AdobeDreamweaverCS■MicrosoftExpressionWeb

2.12測(cè)試及調(diào)試軟件

由于存在各種瀏覽器，所以我們制作出來(lái)的頁(yè)面必須兼容各種瀏覽器。首先我們必須兼容最常見(jiàn)的幾款瀏覽器：IE6、IE7、IE8、Firefox。當(dāng)你的頁(yè)面都支持以上4種瀏覽器，Opera、Safari、Chrome、360、遨游等其他瀏覽器基本上已經(jīng)都沒(méi)問(wèn)題了。這里推薦幾款輔助工具。

■IETester-集成IE5.5-IE9-debugbar.com/wiki/IETester/HomePage■IEDevelopertoolbar-微軟出的IE下查看頁(yè)面DOM結(jié)構(gòu)的IE插件■Debugbar-和IEdevelopertoolbar差不多

■FirefoxFirebug插件-Firefox下的DOM查看插件

2.2網(wǎng)站架構(gòu)的流程網(wǎng)站的架構(gòu)流程必須按照步驟走，步驟大概分為4步

1.設(shè)計(jì)稿的分析2.切圖3.編寫(xiě)html和css4.編寫(xiě)JavaScript腳本

2.21設(shè)計(jì)稿的分析

1.能分清設(shè)計(jì)稿中的公共與私有的部分

從最基本的開(kāi)始，分清公共部分如頭尾、菜單、導(dǎo)航、大框架和每個(gè)獨(dú)立頁(yè)面所用到的部分等。2.在1的基礎(chǔ)上對(duì)各部分的實(shí)現(xiàn)方式有一個(gè)初步的方案（包括如何切圖、寫(xiě)結(jié)構(gòu)、寫(xiě)樣式），在分清公共和私有部分后，分析最簡(jiǎn)單的實(shí)現(xiàn)方法，如哪些部分是可以平鋪的，哪些是可以重復(fù)被使用的等等。3.在2的基礎(chǔ)上，準(zhǔn)確的給出各部分的實(shí)現(xiàn)方案（包括如何切圖、寫(xiě)結(jié)構(gòu)、寫(xiě)樣式），在分清公共和私有部分后，能準(zhǔn)確的給出各部分的實(shí)現(xiàn)方案，如“焦點(diǎn)圖”的實(shí)現(xiàn)方法有幾種種，選擇哪種方法更合適項(xiàng)目？圖片應(yīng)該如何切？

4.在3的基礎(chǔ)上，能同時(shí)考慮方案的擴(kuò)展性、復(fù)用性及頁(yè)面性能（包括如何切圖、寫(xiě)結(jié)構(gòu)、寫(xiě)樣式），在給出的方案中考慮是否可擴(kuò)展、如何重復(fù)使用、將哪一類的圖合并可以最大化頁(yè)面的性能。這里還要注意有些模塊的內(nèi)容可能是動(dòng)態(tài)的，當(dāng)內(nèi)容改變后如何兼容。

5.在4的基礎(chǔ)上，考慮整站的結(jié)構(gòu)分布（包括文件分布、目錄結(jié)構(gòu)）

考慮上面方案的綜合效率，如維護(hù)所需要的成本、頁(yè)面打開(kāi)速度、帶寬成本、服務(wù)器開(kāi)銷等等(當(dāng)然這是配合后臺(tái)程序員一起討論)。

2.22切圖

1.切成所需要的圖片

最基本的，將需要的圖切出來(lái)，這時(shí)候會(huì)需要PS或fireworks切出自己需要的圖。

2.在1的基礎(chǔ)上，對(duì)切出來(lái)的圖片進(jìn)行一些優(yōu)化（包括壓縮文件大小、選擇圖片類型），壓縮輸出的圖片，在不影響畫(huà)面質(zhì)量的前提下，盡可能的減少文件字節(jié)數(shù)。這個(gè)工作很重要，優(yōu)化一張圖片所帶來(lái)的效果可能比優(yōu)化很多的代碼所帶來(lái)的效果要明顯得多。

3.在2的基礎(chǔ)上，規(guī)劃切出來(lái)的圖片（包括文件分布）規(guī)劃切出來(lái)的圖片，哪些圖應(yīng)該被合并，存放于哪個(gè)目錄等等。

4.在3的基礎(chǔ)上，考慮整體的性能（包括合并圖片、壓縮文件大小）,同樣是綜合整體的性能、效率。2.23HTML和CSS的編寫(xiě)

1.還原設(shè)計(jì)稿視覺(jué)效果

還原設(shè)計(jì)稿，是頁(yè)面制作最基本的要求，不管設(shè)計(jì)稿是否符合自己的審美觀，做為頁(yè)面重構(gòu)工作者，還原設(shè)計(jì)稿是一項(xiàng)職業(yè)素質(zhì)。通過(guò)標(biāo)準(zhǔn)驗(yàn)證是檢驗(yàn)我們輸出的質(zhì)量很重要的一個(gè)方法。雖然最終的頁(yè)面不一定可以通過(guò)驗(yàn)證，但我們所輸出的靜態(tài)頁(yè)面大部分是可以做到通過(guò)驗(yàn)證的，除非有特殊的需求。

2.在1的基礎(chǔ)上，實(shí)現(xiàn)多瀏覽器的兼容

兼容多瀏覽器，要實(shí)現(xiàn)多瀏覽器的兼容，少不要了解下各瀏覽器的習(xí)性。3.在2的基礎(chǔ)上，標(biāo)簽語(yǔ)義化

標(biāo)簽語(yǔ)義化，是WEB標(biāo)準(zhǔn)的核心內(nèi)容，只有做好了語(yǔ)義化，才能說(shuō)得上做到了WEB標(biāo)準(zhǔn)。雖然在國(guó)內(nèi)沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)，不過(guò)一些基本的語(yǔ)義標(biāo)簽的使用還是可以定下的，如段落、列表、表格等等。

4.在3的基礎(chǔ)上，選擇較優(yōu)的實(shí)現(xiàn)方式（包括模塊化結(jié)構(gòu)，方便程序腳本使用），做好了上面3點(diǎn)，只能說(shuō)單一的頁(yè)面做好了，下面得考慮兩個(gè)以上的頁(yè)面了。模塊化就是為了更好的提高復(fù)用，減少重復(fù)開(kāi)發(fā)所帶來(lái)的浪費(fèi)。模塊化也是被越來(lái)越多的人所關(guān)注，可以說(shuō)是發(fā)展的一個(gè)趨勢(shì)，隨著大家對(duì)HTML和CSS掌握越多，如何更好的發(fā)揮它們也成了提高工作效率的重點(diǎn)，其中模塊化就是很好的一種方式。

5.在4的基礎(chǔ)上，考慮到擴(kuò)展性、復(fù)用性和可維護(hù)性

做好了模塊化，并不一定就是最優(yōu)化的，如果考慮上擴(kuò)展性、復(fù)用性和可維護(hù)方面的內(nèi)容，模塊化有時(shí)反而會(huì)不利于這幾個(gè)方面，如何平衡這幾方面，是一個(gè)更高的要求。

2.24JavaScript腳本的編寫(xiě)

因?yàn)楣�司擁有自己的js效果庫(kù)，大多的效果可以不必到網(wǎng)上自己去找，直接到國(guó)信展示平臺(tái)中找到相應(yīng)的效果，在運(yùn)用到自己的頁(yè)面上即可。

1.在公司的展示平臺(tái)中抽取相應(yīng)的效果的js文件。

2.在1的基礎(chǔ)上，把效果運(yùn)用到自己的頁(yè)面中，還原設(shè)計(jì)稿視覺(jué)效果。3.在2的基礎(chǔ)上，實(shí)現(xiàn)多瀏覽器的兼容以及js相互之間的兼容。

2.3XHTML的編寫(xiě)代碼規(guī)范在開(kāi)始設(shè)計(jì)XHTML頁(yè)面以前，我們必須先了解有關(guān)XHTML的代碼規(guī)范，養(yǎng)成良好的書(shū)寫(xiě)習(xí)慣。在上一篇文章中我們也看到標(biāo)簽不同于HTML中的的寫(xiě)法，下面我們?cè)敿?xì)介紹一下XHTML代碼的書(shū)寫(xiě)規(guī)范。2.31XHTML頁(yè)面報(bào)頭規(guī)范

■每個(gè)頁(yè)面采用統(tǒng)一文檔類型

■頁(yè)面所有超鏈接引用彈出新窗口（可選/可不選）

■統(tǒng)一使用utf-8編碼■html頁(yè)面中統(tǒng)一加入IE向下兼容代碼

X-UA-Compatible是針對(duì)ie8新加的一個(gè)設(shè)置，對(duì)于ie8之外的瀏覽器是不識(shí)別的，這個(gè)區(qū)別與content="IE=7"在無(wú)論頁(yè)面是否包含指令，都像是使用了WindowsInternetExplorer7的標(biāo)準(zhǔn)模式。而

content="IE=EmulateIE7"模式遵循指令。對(duì)于多數(shù)網(wǎng)站來(lái)說(shuō)，它是首選的兼容性模式。為了避免制作出的頁(yè)面在IE8下面出現(xiàn)錯(cuò)誤，建議直接將IE8使用IE7進(jìn)行渲染。也就是直接在頁(yè)面的header的meta標(biāo)簽中加入如下代碼：

■TITLE與META

■ICO的引用/收藏夾圖標(biāo)

2.32所有的標(biāo)簽都必須使用結(jié)束標(biāo)記

在XHTML中如果出現(xiàn)開(kāi)始標(biāo)簽，就必須有相對(duì)應(yīng)的結(jié)束標(biāo)簽。如：，等如果使用單體標(biāo)簽，則必須用“/”斜線來(lái)結(jié)束。如：，等。

2.33所有標(biāo)簽和屬性名稱都必須小寫(xiě)

在XHTML中標(biāo)簽和屬性名稱大寫(xiě)或大小寫(xiě)混雜是不被允許的。

如：在HTML中是沒(méi)錯(cuò)的，但在XHTML中必須寫(xiě)成：。div是標(biāo)簽元素，class是屬性名稱都必須小寫(xiě)，而Abc是屬性值，在XHTML中屬性值是不被限制的。但為了不易出錯(cuò)，建議全部小寫(xiě)如：onMouseOver也必須寫(xiě)成：onmouseover。某些開(kāi)發(fā)工具自動(dòng)生成的。

2.34屬性值必須使用雙引號(hào)括起來(lái)

在HTML中可以寫(xiě)成，但XHTML規(guī)定必須寫(xiě)成：。

2.35不允許使用屬性簡(jiǎn)寫(xiě)

尤其是在表單元素中，以前HTML允許寫(xiě)成如：、等，但XHTML規(guī)定所有屬性必須被賦值。正確的寫(xiě)法是：、。

2.36所有標(biāo)簽都必須合理嵌套

XHTML書(shū)寫(xiě)結(jié)構(gòu)的要求是非常嚴(yán)謹(jǐn)?shù)�，因此所有的嵌套都必須按順序，即最先出現(xiàn)的標(biāo)簽，最后結(jié)束。正確的寫(xiě)法是：XHTML代碼規(guī)范。

2.37不是標(biāo)簽一部分的特殊符號(hào)都用編碼表示出現(xiàn)在內(nèi)容中的特殊符號(hào)都需要用編碼形式表現(xiàn)出來(lái)

■任何（），不是標(biāo)簽的一部分，都必須被編碼為：>■任何（&），都必須編碼為：&

■任何（"），不是標(biāo)簽的一部分，都必須被編碼為："

2.38圖片標(biāo)簽必須要有ALT屬性

為了使瀏覽者在圖片未顯示的情況下依然可以了解要表現(xiàn)的意義，XHTML規(guī)定沒(méi)一個(gè)圖片標(biāo)簽都要有alt標(biāo)簽。如只起修飾作用沒(méi)有任何意義的圖片也要設(shè)置alt屬性，屬性值為空。2.39不能在注釋中使用兩個(gè)以上的破折號(hào)“--”

■在注釋中的內(nèi)容中，不能出現(xiàn)兩個(gè)或兩個(gè)以上破折號(hào)“--”，只能出現(xiàn)在注釋的開(kāi)頭和結(jié)束，在內(nèi)容中

它們不再有效。如：是錯(cuò)誤的寫(xiě)法，其中的“--”可以用空格或等號(hào)“==”替代。正確的寫(xiě)法是，或。

■單位都按閉包形式出現(xiàn)

content

以上的所提的不規(guī)則寫(xiě)法雖然不會(huì)對(duì)網(wǎng)頁(yè)的顯示造成影響，但在進(jìn)行W3C效驗(yàn)的時(shí)候卻會(huì)出很多莫名

其妙的問(wèn)題。為了使代碼更加規(guī)范，易于閱讀和維護(hù)，為轉(zhuǎn)向XML做準(zhǔn)備，養(yǎng)成良好的書(shū)寫(xiě)規(guī)范還是很有必要的。

2.4CSS相關(guān)規(guī)范2.41選擇DOCTYPE

同樣CSS在不同聲明中的頁(yè)面所起的效果也許會(huì)不一致。XHTML1.0提供了三種DTD聲明可供選擇：過(guò)渡的(Transitional):要求非常寬松的DTD，它允許你繼續(xù)使用HTML4.01的標(biāo)識(shí)(但是要符合x(chóng)html的寫(xiě)法)。完整代碼如下：

嚴(yán)格的(Strict):要求嚴(yán)格的DTD，你不能使用任何表現(xiàn)層的標(biāo)識(shí)和屬性。完整代碼如下：

框架的(Frameset):專門針對(duì)框架頁(yè)面設(shè)計(jì)使用的DTD，如果你的頁(yè)面中包含有框架，需要采用這種DTD。完整代碼如下：

理想情況當(dāng)然是嚴(yán)格的DTD，但對(duì)于我們大多數(shù)剛接觸web標(biāo)準(zhǔn)的設(shè)計(jì)師來(lái)說(shuō)，過(guò)渡的DTD(XHTML1.0Transitional)是目前理想選擇。因?yàn)檫@種DTD還允許我們使用表現(xiàn)層的標(biāo)識(shí)、元素和屬性，也比較容易通過(guò)W3C的代碼校驗(yàn)。

2.42指定語(yǔ)言及字符集

為文檔指定語(yǔ)言：

為了被瀏覽器正確解釋和通過(guò)W3C代碼校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語(yǔ)言，常用的語(yǔ)言定義：標(biāo)準(zhǔn)的XML文檔語(yǔ)言定義：

針對(duì)老版本的瀏覽器的語(yǔ)言定義：

為提高字符集，建議采用“utf-8”，另外除了代碼的編碼使用utf-8，頁(yè)面保存的格式也應(yīng)用utf-8否則在某些編輯器下會(huì)出現(xiàn)亂碼的情況。關(guān)于UTF-8字符處理在Web開(kāi)發(fā)中的應(yīng)用的可以參考IBM的文檔：-lo-utf8/index.html

2.43調(diào)用樣式的方法比較

大家知道頁(yè)面要使用外部css文件的方式有兩種：

一種是引用(link)：；

另一種是導(dǎo)入(@import)：@importurl(’a.css’);；

兩者引用的方式在頁(yè)面上的展現(xiàn)效果卻是一樣的，但是兩者又有著很重大的區(qū)別：就是頁(yè)面的性能問(wèn)題！建議使用link方式調(diào)用樣式。另外，請(qǐng)不要在html頁(yè)面內(nèi)書(shū)寫(xiě)css樣式。除非頁(yè)面是單一獨(dú)立的。

2.44編寫(xiě)樣式的習(xí)慣

我們要養(yǎng)成手寫(xiě)CSS的習(xí)慣，在調(diào)式的時(shí)候可更快更有效的實(shí)現(xiàn)效果。注意的是

■使用reset將默認(rèn)的css重置，推薦使用（EricMeyer和YUI）的cssreset(詳見(jiàn)附件1)■適當(dāng)寫(xiě)好相關(guān)注釋/*forindex*//*forheader*/

■盡量使用類選擇符(.class)、適當(dāng)?shù)氖褂肐D選擇符（#element）、包含選擇符(#elementspan)、選擇符分

組(#element,.class,span)

■將常用的布局方法和常用顏色等寫(xiě)成全局類選擇符■將部分頁(yè)面可復(fù)用的部分分離出來(lái)

■CSShack：針對(duì)不同的瀏覽器寫(xiě)不同的CSScode的過(guò)程。

CSShack的原理：由于不同的瀏覽器對(duì)CSS的支持及解析結(jié)果不一樣，還由于CSS中的優(yōu)先級(jí)的關(guān)系。我們就可以根據(jù)這個(gè)來(lái)針對(duì)不同的瀏覽器來(lái)寫(xiě)不同的CSS。瀏覽器優(yōu)先級(jí)別：FF

■每個(gè)屬性占一行，而不要將全部屬性寫(xiě)在一行。

■屬性較多的時(shí)候可以按照a-z的順序排列，方便修改的時(shí)候更快找到所需的屬性和避免多寫(xiě)�！龉�共及通用樣式規(guī)范化及提取(詳見(jiàn)附件3)

2.5Javascript的編寫(xiě)代碼規(guī)范Javascript是ECMAscript的一種，Web2.0的出現(xiàn)給JavaScript帶來(lái)了重生。XHTML和JavaScript的有效結(jié)合，可以大大提升網(wǎng)站用戶的體驗(yàn)感。為了更有效的編寫(xiě)JavaScript，縮短開(kāi)發(fā)周期，出現(xiàn)了各種各樣的JavaScript框架。下面介紹一下各種庫(kù)和編寫(xiě)JavaScript的規(guī)范。

2.51選擇適合自己用的JavaScript框架（庫(kù)）

目前比較流行的JavaScript庫(kù)有：

■Jquery

■Prototype

■script.aculo.us

■Dojo■Yui-ext■MooTools■SpryFramework

框架的數(shù)目非常多，我們可以參考以下規(guī)則進(jìn)行選擇：

項(xiàng)目需求�！斑@個(gè)Web站點(diǎn)或者Web應(yīng)用，是否需要AJAX，健壯的事件處理？是否需要特效庫(kù)？”框架直接提供的功能的總量，以及使用框架需要的經(jīng)驗(yàn)同樣需要考慮。

對(duì)瀏覽器的支持,就是js相互之間的兼容。

開(kāi)發(fā)團(tuán)隊(duì)對(duì)框架的支持力度。有一個(gè)核心開(kāi)發(fā)團(tuán)隊(duì)來(lái)維護(hù)的框架是最好的。這樣Bug報(bào)告和問(wèn)題會(huì)有更快的響應(yīng)速度，而且測(cè)試會(huì)更加嚴(yán)格，會(huì)更好地遵守開(kāi)發(fā)指導(dǎo)方針。

框架的成熟度�！翱蚣艿某墒於仁亲钅苷f(shuō)明其壽命的指標(biāo)，同時(shí)也是框架的堅(jiān)實(shí)基礎(chǔ)。一個(gè)成熟的框架不會(huì)是beta版的”一個(gè)興旺的社區(qū)，以及提供Subversion或CVS代碼庫(kù)，也是成熟標(biāo)志。

公開(kāi)更新和發(fā)布的頻率。長(zhǎng)時(shí)間的延遲和臃腫的發(fā)行版，都是你在將來(lái)得不到框架的有效支持的明確信號(hào)。反之，過(guò)多的公開(kāi)版本意味著不穩(wěn)定，或者項(xiàng)目不夠?qū)Ｗ��！蔽臋n質(zhì)量。文檔是一個(gè)重要的區(qū)分指標(biāo)。強(qiáng)健的文檔包括API、書(shū)籍、教程和博客，包括每個(gè)方法和屬性的例子也是很有幫助的。

存在一個(gè)活躍的社區(qū)。

基準(zhǔn)測(cè)試�；鶞�(zhǔn)測(cè)試可以幫助我們對(duì)于框架的性能方面得到概括的認(rèn)識(shí)。基準(zhǔn)測(cè)試還說(shuō)明了框架采用

了某些質(zhì)量保證方面的最佳實(shí)踐。

框架的可擴(kuò)展性支持插件對(duì)于任何JavaScript框架來(lái)說(shuō)都絕對(duì)是加分的。API風(fēng)格�！昂�(jiǎn)潔和連貫性(chainability)是兩個(gè)非常重要的特征”

而目前VS201*、Aptana等幾大Web開(kāi)發(fā)軟件都內(nèi)置了jquery或prototype框架，所以我們可以選擇jquery或prototype來(lái)做框架。這2個(gè)框架各有各的好處，最終看個(gè)人比較精通哪個(gè)框架。

2.52JavaScript的編寫(xiě)規(guī)范

■不要在頁(yè)面包含不必要的javascript代碼，盡可能將其外部化。

JavaScript代碼不應(yīng)該嵌入在HTML文件里，除非那些代碼是一個(gè)單獨(dú)的會(huì)話特有的。HTML里的JavaScript代碼大大增加了頁(yè)面的大小，并且很難通過(guò)緩存和壓縮來(lái)緩解。

■盡可能使用語(yǔ)義化名稱來(lái)表達(dá)函數(shù)方法，并且寫(xiě)上相應(yīng)的注釋。

代碼質(zhì)量在軟件質(zhì)量中占很大比例。在軟件生命周期里，一個(gè)程序會(huì)被許多人接手。如果一個(gè)程序可以很好的表達(dá)自己的結(jié)構(gòu)和特性，則在不久的將來(lái)修改它時(shí)就會(huì)減少程序崩潰的可能。當(dāng)js代碼量大的時(shí)候，注釋會(huì)起了很大的重用，所以請(qǐng)不要忽視注釋。

■減少冗余代碼，將可共用的部分獨(dú)立出來(lái)實(shí)現(xiàn)重用。頁(yè)面要實(shí)現(xiàn)用戶體驗(yàn)效果，盡量把函數(shù)寫(xiě)得通用，

在不同的頁(yè)面之間可以重復(fù)使用。

■代碼的縮進(jìn)和換行

代碼不要全寫(xiě)在一行，每一條語(yǔ)句應(yīng)該用分號(hào)結(jié)束并換行。適當(dāng)?shù)氖褂每s進(jìn)，讓代碼容易看。

■應(yīng)遵循javascript的編程規(guī)范，避免出現(xiàn)不必要的錯(cuò)誤�？蓞⒖迹�

-cb12196/index.html

三．目錄結(jié)構(gòu)和命名規(guī)范

我們單獨(dú)一節(jié)來(lái)說(shuō)明網(wǎng)站目錄結(jié)構(gòu)和命名規(guī)范的目的是讓我們重視。因?yàn)闊o(wú)論你的XHTML、CSS、Javascript寫(xiě)得多熟練多好，而網(wǎng)站的目錄結(jié)構(gòu)和其命名是讓人和搜索引擎讀不懂的，那么網(wǎng)站就沒(méi)有真正做到標(biāo)準(zhǔn)化而且整個(gè)網(wǎng)站的后期擴(kuò)展和維護(hù)的成本和代價(jià)會(huì)很大。還有一點(diǎn)需重視就是xhmtlcssjs的代碼注意縮進(jìn)，

并保持格式整齊的并且提供注釋，保證可閱性。同時(shí)為后期編寫(xiě)程序提供良好的開(kāi)發(fā)條件。

首先網(wǎng)站的目錄結(jié)構(gòu)和文件命名清晰、XHTML里面的元素命名清晰會(huì)給SEO帶來(lái)好處。例如文件的命名，如果使用全拼，那么Google是自動(dòng)識(shí)別拼音進(jìn)行排名的。關(guān)于SEO相關(guān)的知識(shí)(請(qǐng)參閱公司SEO相關(guān)文檔)，就不在這里一一闡述了。接下來(lái)介紹目錄結(jié)構(gòu)和命名規(guī)范。

3.1網(wǎng)站的目錄結(jié)構(gòu)和文件命名以下是一個(gè)大概的目錄結(jié)構(gòu)示例圖

3.11目錄結(jié)構(gòu)

目錄結(jié)構(gòu)主要分為四類，需要注意的是，所有命名必須為小寫(xiě)英文，不能大寫(xiě)或中文。

■categorys(目錄)

目錄的命名盡可能使用英文或者全拼表達(dá)目錄內(nèi)的頁(yè)面作用（語(yǔ)義化），需要注意的是不要使用中文詞組簡(jiǎn)拼（eg:目錄-->ml）。簡(jiǎn)拼容易出現(xiàn)重復(fù)、或者目錄結(jié)構(gòu)復(fù)雜的時(shí)候容易出現(xiàn)混亂，給后期維護(hù)帶來(lái)很大的麻煩。

■css

css的目錄命名可以為style、css、skin等，如果網(wǎng)站的目錄結(jié)構(gòu)不是很復(fù)雜的，盡量把css統(tǒng)一放在跟目錄。這樣可以方便后期的維護(hù)操作。如果網(wǎng)站的目錄結(jié)構(gòu)很復(fù)雜，層次超過(guò)3層以上的，可以在對(duì)應(yīng)的層設(shè)置目錄頁(yè)面結(jié)構(gòu)的css。

■js

js的目錄命名一般用js或scripts，這樣一看就知道里面是放js腳本。同樣js的目錄結(jié)構(gòu)也是和css一樣。

■images

images根據(jù)網(wǎng)站規(guī)模來(lái)調(diào)整放圖片的目錄，一般根目錄設(shè)置的images是存放整站共用的圖片（包括圖片圖標(biāo)背景等），而各二級(jí)三級(jí)目錄里面也可以設(shè)置相應(yīng)的images目錄存放當(dāng)前級(jí)的圖片。根據(jù)具體的目錄規(guī)范，做到前后臺(tái)協(xié)商一致！當(dāng)頁(yè)面在引用css或者js的時(shí)候，大型的門戶站點(diǎn)一般會(huì)在引用加上版本號(hào)或者日期。如：

這樣的做法是為了維護(hù)的時(shí)候可以更清晰知道所引用的腳本或樣式是什么時(shí)候什么版本的。3.12html命名

html應(yīng)遵循頁(yè)面的內(nèi)容或用途（SEO）進(jìn)行命名。不能使用中文詞組的簡(jiǎn)拼進(jìn)行命名。當(dāng)使用英文或者中文詞組全拼的時(shí)候，同樣會(huì)給SEO帶來(lái)好處。另外需注意的是，整個(gè)網(wǎng)站的html后綴要統(tǒng)一，避免同時(shí)出現(xiàn)html、htm兩種不同的后綴。

3.13css命名

css可以按照內(nèi)容和功能進(jìn)行命名。

■css功能性質(zhì)一般指：reset.css（重置默認(rèn)的樣式-屬性選擇符）、global.css(全局使用的類選擇符)、

common.css(部分頁(yè)面可共同使用的類選擇符)等各種按功能分類的css。一般還可以將連接、段落、顏色等樣式分離出來(lái)。

■布局頁(yè)面一般指:style.css(全站的整體框架布局)-----index.css(首頁(yè)的布局)、reg.css(注冊(cè)頁(yè)面的布局)。■樣式命名采用小寫(xiě)英文字母、數(shù)字、中扛線的組合，其中不得包含漢字、空格和特殊字符；多個(gè)單詞

應(yīng)采用中扛線分割。

■樣式名稱字符不要超過(guò)20個(gè),少用拼音寫(xiě)樣式，使用限定詞諸如（R(ight),L(eft),T(op),B(ottom),M(iddle)，

要把限定詞放在最后,后綴限定詞建議采用縮寫(xiě)形式，從而減少名稱長(zhǎng)度；

■根據(jù)樣式的性質(zhì)和功能，將樣式分為以下幾種：

reset.css（重置默認(rèn)的樣式-屬性選擇符）global.css(全局使用的類選擇符)

common.css等各種按功能分類的css，各個(gè)功能模塊頁(yè)面的樣式，視具體情況添加或修改。

3.14js命名

js命名規(guī)范也和css的命名規(guī)范差不多，但是分前后臺(tái)兩種js文件，根據(jù)前后不用，使用不用的后綴區(qū)分。

■功能性質(zhì)

js功能性質(zhì)一般指:jquery.js(js庫(kù)或框架)、global.js(全局使用的腳本)、common.js(部分頁(yè)面需要用的腳本)

■針對(duì)頁(yè)面

針對(duì)某個(gè)目錄的頁(yè)面：js_toggle_reg.js,前面的js是為了統(tǒng)一所有針對(duì)頁(yè)面而定出來(lái)的�？梢愿鶕�(jù)個(gè)人的情況把js改成自己所定義的單詞。■實(shí)際命名規(guī)范：

1、js庫(kù)或框架文件，如jquery.js，就引用自身的命名。

2、與后臺(tái)交互功能的js文件，命名規(guī)則就是:back_+js文件名如驗(yàn)證js：back_submitcheck.js3、前端頁(yè)面效果的js文件，命名規(guī)則就是:front_+js文件名如焦點(diǎn)圖效果js：front_focus.js

3.15圖片的命名

首先我們這里需要注意的是，切圖的時(shí)候，可以去參考一些大型的網(wǎng)站如yahoo等的切圖的方法。一般熟練css布局的都會(huì)將許多的小圖標(biāo)，背景圖片集合到一張圖，通過(guò)css來(lái)控制到具體的元素使用哪個(gè)圖標(biāo)或背景。另外目前國(guó)外和國(guó)內(nèi)高標(biāo)準(zhǔn)的網(wǎng)站，一般都采用png圖使用，但是我們公司根據(jù)異步的要求，必須用jpg的圖片。圖片根據(jù)圖片的所處的頁(yè)面位置名稱作用來(lái)命名。圖片的命名規(guī)范化更有利于css的編寫(xiě)�？梢耘e幾個(gè)例子:

index_header_navtab_bg.jpg-----字面理解到圖片是index頁(yè)面headher中導(dǎo)航TAB的背景products_content_title_icon.gif-----字面理解為products頁(yè)面content中標(biāo)題的iconindex_header_banner_pic.png-----字面理解為index頁(yè)面header的banner圖片

只有當(dāng)圖片的名稱語(yǔ)義化了，在你寫(xiě)css或者頁(yè)面需用到圖片的時(shí)候，可以更快速的找到所需的。如果只是隨便的取01.jpg、bg.jpg這類的命名，會(huì)給前端開(kāi)發(fā)帶來(lái)不便，更不用說(shuō)后期維護(hù)了。

友情提示：本文中關(guān)于《WEB前端開(kāi)發(fā)規(guī)范》給出的范例僅供您參考拓展思維使用，WEB前端開(kāi)發(fā)規(guī)范：該篇文章建議您自主創(chuàng)作。

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《WEB前端開(kāi)發(fā)規(guī)范》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://m.seogis.com/gongwen/585492.html

• 上一篇：web前端框架比較分析
• 下一篇：Web前端開(kāi)發(fā)設(shè)計(jì)規(guī)范