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

1、v1.0可編輯可修改3前端開發(fā)設計規(guī)范目錄前端開發(fā)設計規(guī)范hHTM限用規(guī)范、頁面文件命名規(guī)范1、頁面head部分書寫規(guī)范1、HTML元素開發(fā)規(guī)范2、HTML素書寫規(guī)范2、HTMLt素命名規(guī)范.3、WEBC面開發(fā)規(guī)范4.4.4.、錯誤跳轉頁面的處理、提示信息的處理、頁面的返回5、提交前數(shù)據的判斷驗證5、刪除操作5、頁面中java代碼的使用.6.、網站頁面布局規(guī)范66、前臺頁面尺寸、標準網頁廣告圖標規(guī)格（參考）6.、頁面字體7、字體顏色7.三、javaScript開發(fā)規(guī)范7.、javaScript文件命名規(guī)范：.7.、javaScript開發(fā)規(guī)范8.、javaScript書寫規(guī)范8、javaScr

2、ipt命名規(guī)范8四、css樣式規(guī)范10、css樣式文件命名規(guī)范.10、通用樣式文件命名規(guī)范：10、業(yè)務類樣式文件命名規(guī)范11、css樣式文件命名須知.1.1.、css樣式文件存放目錄規(guī)范.1.1.、css樣式定義規(guī)范12、css樣式內容頂部注釋規(guī)范12、css樣式內容注釋規(guī)范12、css樣式定義規(guī)范.13、css樣式常用id的命名14、css樣式常用class的命名15、css樣式書寫規(guī)范16、css樣式排版規(guī)范.16、css樣式書寫風格規(guī)范16、css樣式屬性定義順序規(guī)范17,、css樣式其他規(guī)范18、css樣式Hack的使用.19、字體定義規(guī)范1.9、css樣式檢測2Q、注意事項2Q、cs

3、s樣式引用規(guī)范2Q、媒體內容命名規(guī)范212122五、項目文件存放規(guī)范六、前端開發(fā)規(guī)則v1.0可編輯可修改一、HTM吸用規(guī)范、頁面文件命名規(guī)范命名格式為：項目名縮寫所屬功能所屬功能子項_.jsp/html，文件命名下劃線不能超過三個，命名盡量使用簡短的能明確表明文件用途的英文或者英文簡寫。、頁面head部分書寫規(guī)范1) 、JSP頁面：需要在頁面的最開始部分增加以下語句：ifpag*l*nguge-1,jjiviimpertutil/pcgtEncoding-*UTF8.2) 、HTML頁面：需要在頁面的最開始部分增加以下語句：4融http-eqmiv-nt-Tyy*tontwi1twxt/lit

4、nI;3) 、HTML5頁面：頁面添加編碼格式可簡寫為：metacharset34)、響應式的網頁添加如下語句：contsnt-”Idth-det1s-*1dth,lnltHal-stjle-l.aj,nrn1-nun-scale-1.0ma)rimum-&cale-1*&,user-seala&le=noyi5) 、title元素：一般網頁必須添加title元素，若為框架頁面，則可以不寫。title統(tǒng)一使用中文，title內容要簡潔明了，不能超過20個字。6)、外部js的引用：頁面加載時需要用到的js文件寫在head中，引用時不用寫language屬性，HTML可以省略type屬性，如。7）

5、、外部CSS文件的引用：必須使用link方式引入，HTML同以省略type屬性，CSS文件引入要放在js文件前。|、HTM黃素開發(fā)規(guī)范、HTM尻素書寫規(guī)范 , 等。1）、代碼的結構要保持完整性，單個標簽必須要關閉，如:2）、子元素要比父元素縮進兩個字符。3）、body中的所有內容不能直接書寫在標簽中，需要在body中嵌入一層div,所有的元素需要寫在改div中。f7臬比父乙篡歌近6北凡全開場崛后代碼4）、除非必要，所有標簽元素的樣式都需要使用CS戒件來定義。5）、img元素：所有展示用圖片都要使用alt屬性添加能簡要描述圖片的文字說明，如首頁的廣告圖片等，必須具有width和height屬性。

6、6）、所有Form都要指定action屬性，但屬性值需要則填寫，不需要則留空，method屬性統(tǒng)一使用POST所有form表單都要在提交前對輸入的數(shù)據前進行驗證，驗證使用jQueryvalidate插件，書寫規(guī)范如下：性史蛤白畀時.型刖b-l卜一，戶rt，Jkyn-dirt:/fl!49-_jj,j,.-fniM中有交伴集時弼電丸7）、所有不可更改的input元素都要設置readonly屬性。8）、按功能模塊添加簡單明了的注釋，在功能模塊的開始標明模塊開始，結束時標明模塊結束，注釋單獨占一行；模塊之間留行間隔便于查看代碼。9）、已過時的元素標簽使用CSS羊式來代替，已過時的標簽屬性禁止使用，使

7、用CSS樣式定義來實現(xiàn)。二一一.9戶百左送卷上1-博堤之向問需7程執(zhí)結*許悻,/bocyi、HTM尻素命名規(guī)范涉及到跟服務端交互的元素，元素命名應當與服務端程序中定義的對應變量名相同，或使用對象名.變量名的形式。頁面上使用到的不涉及與服務端交互的HTME素其id和name需統(tǒng)一，所有命名使用元素標簽的縮寫_后綴方式，后綴命名使用小駝峰命名法即第一個單詞全部使用小寫，其他單詞首字母大寫，常見元素命名規(guī)則如下表所示:縮寫示例text輸入框txttxt_userNamebutton按鈕btnbtn_checkselect下拉選擇selsel_beginTimecheckbox多選項chkchk_de

8、partmentNumberdiv標記divdiv_resultsubmit提交按鈕subsub_registerhidden隱藏值hdnhdn_userId二、WEtM面開發(fā)規(guī)范、錯誤跳轉頁面的處理400、401、403、404、405、406、407、410、412、414、500、501、502等錯誤代碼使用其相應的統(tǒng)一頁面，所有錯誤信息全部使用中文錯誤信息，標點符號使用中文半角符號。頁面設計與項目功能相匹配，做到簡潔友好。、提示信息的處理成功提示信息可以使用彈窗或跳轉統(tǒng)一成功頁面的方式，成功頁面的風格與網站總體風格相同，格式如下：“成功：”+提示信息+!”。3v1.0可編輯可修改、頁面

9、的返回所有需要返回上一頁的時候使用（）；不使用（-1）。、提交前數(shù)據的判斷驗證1）、所有由用戶輸入的數(shù)據在提交前都要進行驗證。2）、驗證方式使用jQueryvalidate插件，需要驗證的項：長度驗證：默認長度為數(shù)據庫中數(shù)據的最大長度，中文占兩個字符，英文占一個字符。為空驗證：所有不允許為空的輸入內容為空時不允許提交。其他驗證：需要根據輸入內容的不同設定合適的驗證，如Email格式是否正確，身份證號格式是否正確等。3）、驗證后發(fā)現(xiàn)錯誤，需要提示明確的錯誤信息。錯誤提示信息樣式：字體顏色#ff3366,文字前面加紅色感嘆號小圖標。4）、可輸入表單需要具有輸入內容的提示信息，可使用placehol

10、der屬性來定義或者自定義，顏色必須使用灰色，字體比網站使用字體小。、刪除操作所有涉及刪除的操作，需要用戶進行確認之后才能進行操作。、頁面中java代碼的使用頁面中不允許使用%勺方式嵌入java代碼。、網站頁面布局規(guī)范、前臺頁面尺寸1）、800*600下，網頁寬度保持在778以內，就不會出現(xiàn)水平滾動條，高度則視版面和內容決定，1024*768下，網頁寬度保持在1002以內，不會出現(xiàn)水平滾動條，高度同樣視版面內容決定。2）、根據第一條原則，規(guī)定網頁的尺寸為width=960px,height=600px。3）、頁面長度原則上不超過3屏（可根據實際情況設定），寬度不超過1屏。4）、全尺寸banne

11、r為468*60px,半尺寸banner為234*60px，小banner為88*31px。5）、每個非首頁靜態(tài)頁面含圖片字節(jié)不超過60K,全尺寸banner不超過14K。、標準網頁廣告圖標規(guī)格（參考）1）、120*120,適用于產品或新聞照片展示。2）、120*60,主要用于做LOGO!用。3）、120*90,主要應用于產品演示或大型LOGO4）、125*125,適于表現(xiàn)照片效果的圖像廣告。5）、234*60,適用于框架或左右形式主頁的廣告鏈接。6）、392*72,主要用于有較多圖片展示的廣告條，用于頁眉或頁腳。7）、468*60,應用最為廣泛的廣告條尺寸，用于頁眉或頁腳。8）、88*31,

12、主要用于網頁鏈接，或網站小型LOGO、頁面字體正文內容中文統(tǒng)一使用宋體（可根據需要設定），大小為12px,標題使用14Px加粗,不建議使用13px字，英文字體使用Arial和Helvetica/Univers。、字體顏色1）、正文使用灰黑色#333333。2）、超鏈接可以使用藍色#1f376d或#425c9e,也可以根據整體頁面布局進行調整,整個網站的文字超鏈接樣式要統(tǒng)一。三、javaScript開發(fā)規(guī)范、javaScript文件命名規(guī)范：1）、可通用的javaScript文件：項目名稱縮寫-文件作用.js。2）、其他javaScript文件：所屬功能-文件作用.js。、javaScript開

13、發(fā)規(guī)范、javaScript書寫規(guī)范1）、javaScript代碼都需要寫在javaScript文件中，在頁面中進行調用，調用代碼除頁面加載時需要用到的外全都寫在頁面最低端。2）、如驗證用javaScript代碼等，每個頁面不同且比較短的，可以寫在頁面的最底端，從最后一個外部javaScript引入命令后開始。3）、腳本變量開發(fā)規(guī)范：變量的使用盡量縮小到小的作用域。如循環(huán)使用。4）、盡量避免使用全局變量。5）、每一句語句都要以分號“；”結束。6）、函數(shù)程序體縮進四個空格，Tab鍵為4個空格，以Tab鍵作為縮進單位。7）、函數(shù)名與“（”之間不應該有空格，“）”與“”之間加空格。8）、函數(shù)體之間應

14、當加空行。9）、如果代碼本身是清楚的，則只需要在函數(shù)定義前，添加簡單注釋說明該函數(shù)的作用，若代碼本身比較復雜，可在個別語句后添加簡潔明了的注釋。、javaScript命名規(guī)范1）、常量以及全局變量名必須全部使用大寫字母。2）、不要再命名中使用“$”和“”等特殊字符，不要把“作為變量名的第一個字符和最后一個字符。3）、變量名必須使用其類型的縮寫字符串開始。各種類型的縮寫字符串如下:變量類型縮寫變量類型縮寫整型變量int長整型變量lng浮點型變量flt雙精度變量dbl對象變量obj字符串變量strDate類型變重dtm數(shù)組ary臨時變量tmp4）、變量名必須采用有意義的單詞命名，如：strUser

15、Name、IngArraylndex,以及不要出現(xiàn)數(shù)字編號命名，如：valuel,value25）、如果變量名過長可以使用單詞縮寫，除了被廣泛了解的單詞縮寫以外，所有使用單詞縮寫的變量名必須在定義時給出注釋，如：functionvaritrAdhamc=null;.3.:-一1.見，4.var=null;-Iri.打6）、參數(shù)變量命名必須加前綴：p_。7）function命名規(guī)范：使用動詞+名詞的方式，并且命名需要明確指出其作用，動詞前綴必須是同函數(shù)功能相關的完整動詞，如getUserId（）,用來取用戶Id。8）、所有命名使用小駝峰命名法：第一個單詞全部使用小寫，其他單詞首字母大寫，如：my

16、ClassName9v1.0可編輯可修改之風間|隔1個空格functionpetii(QarstrUs&rld;funrctrioncetlserName(J(Ikarstrifeerne；四、css樣式規(guī)范、css樣式文件命名規(guī)范、通用樣式文件命名規(guī)范:1）、整個項目通用的css布局樣式文件命名為：。如：通過于整個網站中使用的div、hl、img等的定義文件。2）、對引用的開源css樣式重定義的文件命名為：開源的css樣式文件名如：為引用的css樣式文件，現(xiàn)在對它的.btn重新定義樣式內容，這類樣式的文件名命名為：開源的css樣式文件名。一個項目建議最多使用一個css框架。3）、外部引用的字

17、體css樣式文件命名為：font-加引用的字體名字.css,若有多個字體引用則使用：。4）、自定義的響應式布局樣式命名為：項目名稱縮寫-。5）、跨項目通用功能定義的css樣式文件命名為：實現(xiàn)的功能.css。6）、為IE瀏覽器做兼容處理的樣式命名為：ie-版本號.css。、業(yè)務類樣式文件命名規(guī)范自定義的樣式統(tǒng)一定義在一個文件內，文件命名為：項目名稱。、css樣式文件命名須知1）、以上所有的css樣式文件命名必須是小寫字母，不允許中文、大寫字母及其他特殊字符等。如果有樣式版本共存或更新需要保留老版本樣式，請在樣式文件名后面加上“-版本號”，最新版本樣式文件除外，同樣版本號只允許是數(shù)字或小寫字母。2

18、）、以上css文件命名制定的規(guī)范只適用普遍的情況，特殊情況下請開發(fā)人員根據實際情況自行命名，但必須遵行1）的規(guī)定。、css樣式文件存放目錄規(guī)范項目文件存放目錄將在后面說明，此處只針對css樣式文件存放規(guī)定。1）、字體樣式文件存放文件夾：/font/,包括字體的源文件。2）、引用的樣式保持原來的目錄結構，如果有多個引用的樣式則按功能新建文件夾來分別存放。3）、其他樣式文件不用單獨新建文件夾。、css樣式定義規(guī)范、css樣式內容頂部注釋規(guī)范1）、請使用utf-8編碼。2）、申明css定義的內容概述或目的，申明編寫的人員、更新日期。3）、請謹慎使用importurl（）引入其他css樣式文件。、cs

19、s樣式內容注釋規(guī)范1）、模塊注釋必須單獨寫在一行，簡要說明模塊的功能。1. /*Header2. 產Footer3. /*Gallery302）、單行注釋可以寫在單獨一行，也可以寫在行尾，注釋中的每一行長度不超過個漢字，或者60個英文字符。1*/*thisisashortcomment*/3）、多行注釋必須寫在單獨行內，即/*后換行寫注釋，*/單獨寫一行。工./1.*thisIsconnnentline1.S.*thisiscominentline2.4.*/4）、用于標注修改、待辦等信息的注釋以單行注釋為基準。1./1000：IXKXbyH眥1613-64*1=16:32/一/*flUCFl

20、X:kxkxbyn右加201204*1318132*/5）、對一個代碼區(qū)塊注釋（可選），將樣式語句分區(qū)塊并在新行中對其注釋。L.7*module:module!by強三*/：/*inod1eemodulesby張三*/、css樣式定義規(guī)范1)、使用有意義的或通用的id和class命名：id和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。反映元素的使用目的是首選；使用通用名稱代表該元素不表特定意義，與其同級元素無異，通常是用于輔助命名；使用功能性或通用的名稱可以更適用于文檔或模版變化的情況。2)、id和class命名越簡短越好，只要足夠表達涵義。這樣既有助于理解，也

21、能提高代碼效率。3)、常用命名(多記多查英文單詞)：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menunav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。4)、類型選擇器避免同時使用標簽、id和class作為定位一個元素選擇器，可以使用class層級來代替。5)、規(guī)則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或下劃線。6)、命名避免使用中文拼音，

22、應該采用更簡明有語義的英文單詞進行組合。7)、命名注意縮寫，但是不能盲目縮寫，具體請參見常用的CSS命名規(guī)則。8)、不允許通過1、2、3等序號進行命名，避免class與id重名。9)、id用于標識模塊或頁面的某一個父容器區(qū)域，名稱必須唯一，不要隨意新建id。10）、class用于標識某一個類型的對象，命名必須言簡意賅，盡可能提高代碼模塊的復用，樣式盡量用組合的方式。、css樣式常用id的命名1）、頁面結構命名結構命名結構命名容器container頁頭header頁面主體main貞尾footer側欄sidebar欄目column內容content/container內容content/conta

23、iner外圍布局wrapper左右中l(wèi)eftrightcenter2）、導航命名結構命名結構命名導航nav主導航mainbav子導航subnav頂導航topnav邊導航sidebar左導航leftsidebar右導航rightsidebar菜單menu子菜單submenu標題/摘要title/summary3）、功能命名結構命名結構命名標志logo廣告banner登陸login登錄條loginbar注冊regsiter搜索search功能區(qū)shop標題title加入joinus狀態(tài)status按鈕btn滾動scroll標簽五tab文章列表list提示信息msg當前的current小技巧tips

24、圖標icon注釋note指南guild服務service執(zhí)點1hot新聞news下載download投票vote合作伙伴partner友情鏈接link版權copyright以上樣式定義須符合css樣式定義規(guī)范。、css樣式常用class的命名1）、顏色：單獨定義顏色時使用顏色的名稱，復合顏色用中劃線連接。如：.blue或.blue-green。2）、字體大?。簡为毝x時使用font-字號；如：.font-12。3）、對齊樣式：使用對齊目標的英文名稱。如：.left。4）、其他樣式：功能縮寫-當前的作用區(qū)域；如果有多層級，則下一層級定義為：上一級的樣式名-目標區(qū)塊命名；在嵌入其他門戶網站中的應用

25、，如果門戶網站沒有特別規(guī)定，為了避免樣式沖突必須為每一個樣式加上前綴，前綴可以按實際情況來設置。、css樣式書寫規(guī)范、css樣式排版規(guī)范1）、使用一次tab鍵或者4個空格作為縮進。charset;/*CSSDocument*body11ne-height:!2)、規(guī)則可以寫成單行，或者多行，但是整個文件內的規(guī)則排版必須統(tǒng)一。3）、對于可以發(fā)布的網站樣式建議進行壓縮，直接使用網上的css格式化工具進行壓縮。、css樣式書寫風格規(guī)范231)、如果是在html頁面中定義的css樣式，則必須寫成單行，不建議在html頁面中定義css樣式。2）、每一條規(guī)則的大括號前后加空格，每一條規(guī)則結束的大括號前加空

26、格。3）、屬性名冒號之前不加空格，冒號之后加空格。4）、每一個屬性值后必須添加分號；并且分號后空格。5）、多個selector共用一個小式集，10個以內的selector必須寫成多行形式，10個以上的selector寫成一行。6）、多行書寫時每一條規(guī)則結束的大括號必須與規(guī)則選擇器的第一個字符對齊。A.InJrfrr-I,A-r-*!*,.Tl-二Z二一-i、css樣式屬性定義順序規(guī)范1）、顯示屬性：display/list-style/position/float/clear2）、自身屬性（盒模型）：width/height/margin/padding/border3）、背景：backgro

27、und;行高：line-height。4）文本屬性：color/font/text-decoration/text-align/text-indent/white-space。5） 、其他：cursor/z-index/zoom/overflow6） 、CSS3屬性：transform/transition/animation/box-shadow/border-radius7）、使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照-webkit-/-moz-/-ms-/-o-的順序進行添加，標準屬性寫在最后。8）、屬性定義順序規(guī)范不作嚴格要求，但在使用css3時最好加上前綴。、css樣式其他

28、規(guī)范1）、使用單引號，不允許使用雙引號。2）、每個聲明結束都應該帶一個分號，不管是不是最后一個聲明。3）、除16進制顏色和字體設置外，CSS文件中的所有的代碼都應該小寫。4）、選擇器應該在滿足功能的基礎上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設置。5）、background、font、margin、padding、border等可以縮寫的屬性，盡量使用縮寫形式。6）、在css中謹慎使用*選擇符。7）、除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag。8） 、0后面不需要單位，比如0Px可以省略成0,可以省略成.8px。9）、如果是16進制表示顏色，

29、則顏色取值字母應該大寫；如果可以，顏色盡量用三位字符表示，例如#AABBCCf成#ABG10）、如果沒有邊框時，不要寫成border:。,應該寫成border:none。11）、在保持代碼解耦的前提下，盡量合并重復的樣式。12）、除了重置瀏覽器默認樣式外，禁止直接為htmltag添加css樣式設置。、css樣式Hack的使用Csshack僅僅是為了兼容瀏覽器對css的解析而設置，請不要使用瀏覽器檢測和CSSHacks作為解決瀏覽器解析差異的首選方式，但應被視為最后的手段。允許使用hack只會帶來更多的hack,你越是使用它，你越是會依賴它。國則Mi、字體定義規(guī)范1）、為了防止文件合并及編碼轉換

30、時造成問題，建議將樣式中文字體名字改成對應的英文名字，如：黑體（SimHei）、宋體（SimSun）、微軟雅黑（MicrosoftYahei,幾個單詞中間有空格組成的必須加引號），詳細介紹參詳附件。2）、字體粗細采用具體數(shù)值，粗體bold寫為700,正常normal寫為400。9） 、font-size必須以px或pt為單位，推薦用px（注：pt為打印版字體大小設置），不允許使用small/medium/large/x-large/xx-large等不確定的值。4）、為了對font-family取值進行統(tǒng)一，更好的支持各個操作系統(tǒng)上各個瀏覽器的兼容性，font-family不允許在業(yè)務代碼中隨意設置。、css樣式檢測寫好一份css樣式文件之后，如果不完全確定定義是否符合W3cB準，可借助在線檢測工具來檢測。常用的測試工具：W3CCSSvalidator、CSSLint等不限制。、注意事項1）、不要輕易改動全站級CSS和通用CSS庫。改動后，要經過全面測試。2）、避免在CSS中使用expression,避免使用filter,盡量不