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

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

目錄

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

5、html書寫規(guī)范6、css書寫規(guī)范

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

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

規(guī)范目的

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

基本準(zhǔn)則

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

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

23

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

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

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

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

例如：微博改版

版塊名稱_時間日期.cssnew_blog_1212.css

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

html書寫規(guī)范

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

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

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

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

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

4.12、特殊符號使用:盡可能使用代碼替代:比如)&空格()&()等等;4.13、書寫頁面過程中,請考慮向后擴(kuò)展性;5

css書寫規(guī)范

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

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

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

自身習(xí)慣書寫,但盡量保證同類屬性寫在一起.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}即可實現(xiàn)日期居右顯示5.6樣式表中中文字體名,請務(wù)必轉(zhuǎn)碼成unicode碼,以避免編碼錯誤時亂碼;

5.7使用table標(biāo)簽時,請不要用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文件中我會初始化表格樣式)5.8盡量不使用兼容ie8,和代碼*html

寫法。

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

果,請參考文檔《IE6下png透明問題解決的最佳方案》

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

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

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

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

JavaScript書寫規(guī)范

6.1文件編碼統(tǒng)一為utf-8,書寫過程過,每行代碼結(jié)束必須有分號;要檢查網(wǎng)上down下來的代碼造

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

圖片規(guī)范

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

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

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

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

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

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

8注釋規(guī)范

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

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

9開發(fā)及測試工具約定

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

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

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

10其他規(guī)范

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

器著想.11CSSHack

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

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

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

WEBWEBFrontDevelopmentStandard

一．概況

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

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

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

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

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

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

3.2XHTML元素的命名參考

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

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

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

附件4css兼容

一．概況

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

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

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

（1）XML

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

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

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

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

（1）DOM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.21設(shè)計稿的分析

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

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

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

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

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

2.22切圖

1.切成所需要的圖片

最基本的，將需要的圖切出來，這時候會需要PS或fireworks切出自己需要的圖。

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

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

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

1.還原設(shè)計稿視覺效果

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

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

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

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

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

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

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

2.24JavaScript腳本的編寫

因為公司擁有自己的js效果庫，大多的效果可以不必到網(wǎng)上自己去找，直接到國信展示平臺中找到相應(yīng)的效果，在運(yùn)用到自己的頁面上即可。

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

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

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

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

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

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

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

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

■TITLE與META

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

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

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

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

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

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

2.34屬性值必須使用雙引號括起來

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

2.35不允許使用屬性簡寫

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

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

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

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

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

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

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

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

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

它們不再有效。如：是錯誤的寫法，其中的“--”可以用空格或等號“==”替代。正確的寫法是，或。

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

content

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

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

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

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

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

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

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

2.42指定語言及字符集

為文檔指定語言：

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

針對老版本的瀏覽器的語言定義：

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

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

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

一種是引用(link)：；

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

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

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

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

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

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

組(#element,.class,span)

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

■CSShack：針對不同的瀏覽器寫不同的CSScode的過程。

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

■每個屬性占一行，而不要將全部屬性寫在一行。

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

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

2.51選擇適合自己用的JavaScript框架（庫）

目前比較流行的JavaScript庫有：

■Jquery

■Prototype

■script.aculo.us

■Dojo■Yui-ext■MooTools■SpryFramework

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

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

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

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

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

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

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

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

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

框架的可擴(kuò)展性支持插件對于任何JavaScript框架來說都絕對是加分的。API風(fēng)格�！昂啙嵑瓦B貫性(chainability)是兩個非常重要的特征”

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

2.52JavaScript的編寫規(guī)范

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

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

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

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

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

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

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

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

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

-cb12196/index.html

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

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

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

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

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

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

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

■categorys(目錄)

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

■css

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

■js

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

■images

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

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

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

3.13css命名

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

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

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

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

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

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

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

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

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

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

3.14js命名

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

■功能性質(zhì)

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

■針對頁面

針對某個目錄的頁面：js_toggle_reg.js,前面的js是為了統(tǒng)一所有針對頁面而定出來的。可以根據(jù)個人的情況把js改成自己所定義的單詞�！鰧嶋H命名規(guī)范：

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

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

3.15圖片的命名

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

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

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

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

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

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

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