前端開發(fā)設計規(guī)范文檔_第1頁
前端開發(fā)設計規(guī)范文檔_第2頁
前端開發(fā)設計規(guī)范文檔_第3頁
前端開發(fā)設計規(guī)范文檔_第4頁
前端開發(fā)設計規(guī)范文檔_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、前端開發(fā)設計規(guī)范 目錄前端開發(fā)設計規(guī)范1一、HTML使用規(guī)范11.1、頁面文件命名規(guī)范11.2、頁面head部分書寫規(guī)范11.3、HTML元素開發(fā)規(guī)范2、HTML元素書寫規(guī)范2、HTML元素命名規(guī)范3二、WEB頁面開發(fā)規(guī)范42.1、錯誤跳轉頁面的處理42.2、提示信息的處理42.3、頁面的返回42.4、提交前數(shù)據(jù)的判斷驗證42.5、刪除操作52.6、頁面中java代碼的使用52.7、網(wǎng)站頁面布局規(guī)范5、前臺頁面尺寸5、標準網(wǎng)頁廣告圖標規(guī)格（參考）6、頁面字體6、字體顏色7三、javaScript開發(fā)規(guī)范73.1、javaScript文件命名規(guī)范：73.2、javaScript開發(fā)規(guī)范7、jav

2、aScript書寫規(guī)范7、javaScript命名規(guī)范8四、css樣式規(guī)范94.1、css樣式文件命名規(guī)范9、通用樣式文件命名規(guī)范：9、業(yè)務類樣式文件命名規(guī)范10、css樣式文件命名須知104.2、css樣式文件存放目錄規(guī)范104.3、css樣式定義規(guī)范11、css樣式內容頂部注釋規(guī)范11、css樣式內容注釋規(guī)范11、css樣式定義規(guī)范12、css樣式常用id的命名13、css樣式常用class的命名144.4、css樣式書寫規(guī)范15、css樣式排版規(guī)范15、css樣式書寫風格規(guī)范15、css樣式屬性定義順序規(guī)范16、css樣式其他規(guī)范16、css樣式 Hack的使用17、字體定義規(guī)范18、c

3、ss樣式檢測18、注意事項184.5、css樣式引用規(guī)范194.6、媒體內容命名規(guī)范19五、項目文件存放規(guī)范19六、前端開發(fā)規(guī)則20一、HTML使用規(guī)范1.1、頁面文件命名規(guī)范命名格式為：項目名縮寫_所屬功能_所屬功能子項_. .jsp/html，文件命名下劃線不能超過三個，命名盡量使用簡短的能明確表明文件用途的英文或者英文簡寫。1.2、頁面head部分書寫規(guī)范1) 、JSP頁面：需要在頁面的最開始部分增加以下語句：2) 、HTML頁面：需要在頁面的最開始部分增加以下語句：3) 、HTML5頁面：頁面添加編碼格式可簡寫為：4) 、響應式的網(wǎng)頁添加如下語句： 5) 、title元素：一般網(wǎng)頁必須

4、添加title元素，若為框架頁面，則可以不寫。title統(tǒng)一使用中文，title內容要簡潔明了，不能超過20個字。6) 、外部js的引用：頁面加載時需要用到的js文件寫在head中，引用時不用寫language屬性，HTML5可以省略type屬性，如。7) 、外部CSS文件的引用：必須使用link方式引入，HTML5可以省略type屬性，CSS文件引入要放在js文件前。1.3、HTML元素開發(fā)規(guī)范1.3.1、HTML元素書寫規(guī)范1) 、代碼的結構要保持完整性，單個標簽必須要關閉，如：<div></div>，<br/>等。2) 、子元素要比父元素縮進兩個字符。

5、3) 、body中的所有內容不能直接書寫在<body></body>標簽中，需要在body中嵌入一層div，所有的元素需要寫在改div中。4) 、除非必要，所有標簽元素的樣式都需要使用CSS文件來定義。5) 、img元素：所有展示用圖片都要使用alt屬性添加能簡要描述圖片的文字說明，如首頁的廣告圖片等，必須具有width和height屬性。6) 、所有Form都要指定action屬性，但屬性值需要則填寫，不需要則留空，method屬性統(tǒng)一使用POST；所有form表單都要在提交前對輸入的數(shù)據(jù)前進行驗證，驗證使用jQuery validate插件，書寫規(guī)范如下：7) 、所

6、有不可更改的input元素都要設置readonly屬性。8) 、按功能模塊添加簡單明了的注釋，在功能模塊的開始標明模塊開始，結束時標明模塊結束，注釋單獨占一行；模塊之間留行間隔便于查看代碼。9) 、已過時的元素標簽使用CSS樣式來代替，已過時的標簽屬性禁止使用，使用CSS樣式定義來實現(xiàn)。1.3.2、HTML元素命名規(guī)范涉及到跟服務端交互的元素，元素命名應當與服務端程序中定義的對應變量名相同，或使用對象名.變量名的形式。頁面上使用到的不涉及與服務端交互的HTML元素其id和name需統(tǒng)一，所有命名使用元素標簽的縮寫_后綴方式,后綴命名使用小駝峰命名法即第一個單詞全部使用小寫，其他單詞首字母大寫，

7、常見元素命名規(guī)則如下表所示：HTML元素縮寫示例text輸入框txttxt_userNamebutton按鈕btnbtn_checkselect下拉選擇selsel_beginTimecheckbox多選項chkchk_departmentNumberdiv標記divdiv_resultsubmit提交按鈕subsub_registerhidden隱藏值hdnhdn_userId二、WEB頁面開發(fā)規(guī)范2.1、錯誤跳轉頁面的處理400、401、403、404、405、406、407、410、412、414、500、501、502等錯誤代碼使用其相應的統(tǒng)一頁面，所有錯誤信息全部使用中文錯誤信息，標

8、點符號使用中文半角符號。頁面設計與項目功能相匹配，做到簡潔友好。2.2、提示信息的處理成功提示信息可以使用彈窗或跳轉統(tǒng)一成功頁面的方式，成功頁面的風格與網(wǎng)站總體風格相同，格式如下："成功："+提示信息+"！"。2.3、頁面的返回 所有需要返回上一頁的時候使用history.back();不使用history.go(-1)。2.4、提交前數(shù)據(jù)的判斷驗證1) 、所有由用戶輸入的數(shù)據(jù)在提交前都要進行驗證。2) 、驗證方式使用jQuery validate插件，需要驗證的項：長度驗證：默認長度為數(shù)據(jù)庫中數(shù)據(jù)的最大長度，中文占兩個字符，英文占一個字符。為空驗證：所

9、有不允許為空的輸入內容為空時不允許提交。其他驗證：需要根據(jù)輸入內容的不同設定合適的驗證，如Email格式是否正確，身份證號格式是否正確等。3) 、驗證后發(fā)現(xiàn)錯誤，需要提示明確的錯誤信息。錯誤提示信息樣式：字體顏色#ff3366，文字前面加紅色感嘆號小圖標。4) 、可輸入表單需要具有輸入內容的提示信息，可使用placeholder屬性來定義或者自定義，顏色必須使用灰色，字體比網(wǎng)站使用字體小。2.5、刪除操作所有涉及刪除的操作，需要用戶進行確認之后才能進行操作。2.6、頁面中java代碼的使用頁面中不允許使用<% %>的方式嵌入java代碼。2.7、網(wǎng)站頁面布局規(guī)范2.7.1、前臺頁面

10、尺寸1) 、800*600下，網(wǎng)頁寬度保持在778以內，就不會出現(xiàn)水平滾動條，高度則視版面和內容決定，1024*768下，網(wǎng)頁寬度保持在1002以內，不會出現(xiàn)水平滾動條，高度同樣視版面內容決定。2) 、根據(jù)第一條原則，規(guī)定網(wǎng)頁的尺寸為width=960px,height=600px。3) 、頁面長度原則上不超過3屏（可根據(jù)實際情況設定），寬度不超過1屏。4) 、全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31px。5) 、每個非首頁靜態(tài)頁面含圖片字節(jié)不超過60K，全尺寸banner不超過14K。2.7.2、標準網(wǎng)頁廣告圖標規(guī)格（參考）1)

11、、120*120，適用于產(chǎn)品或新聞照片展示。 2) 、120*60，主要用于做LOGO使用。3) 、120*90，主要應用于產(chǎn)品演示或大型LOGO。4) 、125*125，適于表現(xiàn)照片效果的圖像廣告。5) 、234*60，適用于框架或左右形式主頁的廣告鏈接。6) 、392*72，主要用于有較多圖片展示的廣告條，用于頁眉或頁腳。7) 、468*60，應用最為廣泛的廣告條尺寸，用于頁眉或頁腳。8) 、88*31，主要用于網(wǎng)頁鏈接，或網(wǎng)站小型LOGO。2.7.3、頁面字體正文內容中文統(tǒng)一使用宋體（可根據(jù)需要設定），大小為12px，標題使用14px加粗，不建議使用13px字，英文字體使用Arial和H

12、elvetica/Univers。2.7.4、字體顏色1) 、正文使用灰黑色#333333。2) 、超鏈接可以使用藍色#1f376d或#425c9e，也可以根據(jù)整體頁面布局進行調整，整個網(wǎng)站的文字超鏈接樣式要統(tǒng)一。三、javaScript開發(fā)規(guī)范3.1、javaScript文件命名規(guī)范：1) 、可通用的javaScript文件：項目名稱縮寫-文件作用.js。2) 、其他javaScript文件：所屬功能-文件作用.js。3.2、javaScript開發(fā)規(guī)范3.2.1、javaScript書寫規(guī)范1) 、javaScript代碼都需要寫在javaScript文件中，在頁面中進行調用，調用代碼除頁

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

14、語句后添加簡潔明了的注釋。3.2.2、javaScript命名規(guī)范1) 、常量以及全局變量名必須全部使用大寫字母。2) 、不要再命名中使用“$”和“”等特殊字符，不要把“_”作為變量名的第一個字符和最后一個字符。3) 、變量名必須使用其類型的縮寫字符串開始。各種類型的縮寫字符串如下： 變量類型縮寫變量類型縮寫整型變量int長整型變量lng浮點型變量flt雙精度變量dbl對象變量obj字符串變量strDate類型變量dtm數(shù)組ary臨時變量tmp4) 、變量名必須采用有意義的單詞命名，如：strUserName、lngArrayIndex，以及不要出現(xiàn)數(shù)字編號命名，如：value1，value2

15、5) 、如果變量名過長可以使用單詞縮寫，除了被廣泛了解的單詞縮寫以外，所有使用單詞縮寫的變量名必須在定義時給出注釋，如： 6) 、參數(shù)變量命名必須加前綴：p_。7) 、function命名規(guī)范：使用動詞+名詞的方式，并且命名需要明確指出其作用，動詞前綴必須是同函數(shù)功能相關的完整動詞，如getUserId（），用來取用戶Id。8) 、所有命名使用小駝峰命名法：第一個單詞全部使用小寫，其他單詞首字母大寫，如：myClassName。四、css樣式規(guī)范4.1、css樣式文件命名規(guī)范4.1.1、通用樣式文件命名規(guī)范：1) 、整個項目通用的css布局樣式文件命名為：layout.css。如：通過于整個網(wǎng)

16、站中使用的div、h1、img等的定義文件。2) 、對引用的開源css樣式重定義的文件命名為：開源的css樣式文件名-reset.css如：bootstrap.css為引用的css樣式文件，現(xiàn)在對它的.btn重新定義樣式內容，這類樣式的文件名命名為：開源的css樣式文件名-reset.css。一個項目建議最多使用一個css框架。3) 、外部引用的字體css樣式文件命名為：font-加引用的字體名字.css，若有多個字體引用則使用：font-style.css。4) 、自定義的響應式布局樣式命名為：項目名稱縮寫responsive.css。5) 、跨項目通用功能定義的css樣式文件命名為：實現(xiàn)的

17、功能.css。6) 、為IE瀏覽器做兼容處理的樣式命名為：ie-版本號.css。4.1.2、業(yè)務類樣式文件命名規(guī)范自定義的樣式統(tǒng)一定義在一個文件內，文件命名為：項目名稱-style.css。4.1.3、css樣式文件命名須知1) 、以上所有的css樣式文件命名必須是小寫字母，不允許中文、大寫字母及其他特殊字符等。如果有樣式版本共存或更新需要保留老版本樣式，請在樣式文件名后面加上“-版本號”，最新版本樣式文件除外，同樣版本號只允許是數(shù)字或小寫字母。2) 、以上css文件命名制定的規(guī)范只適用普遍的情況，特殊情況下請開發(fā)人員根據(jù)實際情況自行命名，但必須遵行1)的規(guī)定。4.2、css樣式文件存放目錄規(guī)

18、范項目文件存放目錄將在后面說明，此處只針對css樣式文件存放規(guī)定。1) 、字體樣式文件存放文件夾：/font/，包括字體的源文件。2) 、引用的樣式保持原來的目錄結構，如果有多個引用的樣式則按功能新建文件夾來分別存放。3) 、其他樣式文件不用單獨新建文件夾。4.3、css樣式定義規(guī)范4.3.1、css樣式內容頂部注釋規(guī)范1) 、請使用utf-8編碼。2) 、申明css定義的內容概述或目的，申明編寫的人員、更新日期。3) 、請謹慎使用import url()引入其他css樣式文件。4.3.2、css樣式內容注釋規(guī)范1) 、模塊注釋必須單獨寫在一行，簡要說明模塊的功能。2) 、單行注釋可以寫在單獨

19、一行，也可以寫在行尾，注釋中的每一行長度不超過30個漢字，或者60個英文字符。3) 、多行注釋必須寫在單獨行內，即/*后換行寫注釋，*/單獨寫一行。4) 、用于標注修改、待辦等信息的注釋以單行注釋為基準。5) 、對一個代碼區(qū)塊注釋（可選），將樣式語句分區(qū)塊并在新行中對其注釋。4.3.3、css樣式定義規(guī)范1) 、使用有意義的或通用的id和class命名：id和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。反映元素的使用目的是首選；使用通用名稱代表該元素不表特定意義，與其同級元素無異，通常是用于輔助命名；使用功能性或通用的名稱可以更適用于文檔或模版變化的情況。2)

20、、id和class命名越簡短越好，只要足夠表達涵義。這樣既有助于理解，也能提高代碼效率。3) 、常用命名（多記多查英文單詞）：page、wrap、layout、header(head)、footer(foot、ft)、 content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、 title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。4) 、類型選擇器避免同時使用標簽、id和class作為定位一個元素選擇器，可以使用class層級來代替。 5) 、規(guī)則命名中

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

22、ter側欄sidebar欄目column內容content/container內容content/container外圍布局wrapper左右中l(wèi)eft right center2) 、導航命名結構命名結構命名導航nav主導航mainbav子導航subnav頂導航topnav邊導航sidebar左導航leftsidebar右導航rightsidebar菜單menu子菜單submenu標題/摘要title/summary3) 、功能命名結構命名結構命名標志logo廣告banner登陸login登錄條loginbar注冊regsiter搜索search功能區(qū)shop標題title加入joinus狀

23、態(tài)status按鈕btn滾動scroll標簽頁tab文章列表list提示信息msg當前的current小技巧tips圖標icon注釋note指南guild服務service熱點hot新聞news下載download投票vote合作伙伴partner友情鏈接link版權copyright以上樣式定義須符合css樣式定義規(guī)范。4.3.5、css樣式常用class的命名1) 、顏色：單獨定義顏色時使用顏色的名稱，復合顏色用中劃線連接。如：.blue或.blue-green。2) 、字體大?。簡为毝x時使用font-字號；如：.font-12。3) 、對齊樣式：使用對齊目標的英文名稱。如：.left。

24、4) 、其他樣式：功能縮寫-當前的作用區(qū)域；如果有多層級，則下一層級定義為：上一級的樣式名-目標區(qū)塊命名；在嵌入其他門戶網(wǎng)站中的應用，如果門戶網(wǎng)站沒有特別規(guī)定，為了避免樣式?jīng)_突必須為每一個樣式加上前綴，前綴可以按實際情況來設置。4.4、css樣式書寫規(guī)范4.4.1、css樣式排版規(guī)范1) 、使用一次tab鍵或者4個空格作為縮進。2) 、規(guī)則可以寫成單行，或者多行，但是整個文件內的規(guī)則排版必須統(tǒng)一。3) 、對于可以發(fā)布的網(wǎng)站樣式建議進行壓縮，直接使用網(wǎng)上的css格式化工具進行壓縮。4.4.2、css樣式書寫風格規(guī)范1) 、如果是在html頁面中定義的css樣式，則必須寫成單行，不建議在html頁

25、面中定義css樣式。2) 、每一條規(guī)則的大括號 前后加空格，每一條規(guī)則結束的大括號 前加空格。3) 、屬性名冒號之前不加空格，冒號之后加空格。4) 、每一個屬性值后必須添加分號; 并且分號后空格。5) 、多個selector共用一個樣式集，10個以內的selector必須寫成多行形式，10個以上的selector寫成一行。6) 、多行書寫時每一條規(guī)則結束的大括號 必須與規(guī)則選擇器的第一個字符對齊。4.4.3、css樣式屬性定義順序規(guī)范1) 、顯示屬性：display/list-style/position/float/clear 。2) 、自身屬性（盒模型）：width/height/marg

26、in/padding/border。3) 、背景：background；行高：line-height。4) 文本屬性：color/font/text-decoration/text-align/text-indent/ white-space。5) 、其他：cursor/z-index/zoom/overflow。6) 、CSS3屬性：transform/transition/animation/box-shadow/border-radius。7) 、使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照 -webkit- / -moz- / -ms- / -o-的順序進行添加，標準屬性寫在最

27、后。8) 、屬性定義順序規(guī)范不作嚴格要求，但在使用css3時最好加上前綴。4.4.4、css樣式其他規(guī)范1) 、使用單引號，不允許使用雙引號。2) 、每個聲明結束都應該帶一個分號，不管是不是最后一個聲明。3) 、除16進制顏色和字體設置外，CSS文件中的所有的代碼都應該小寫。4) 、選擇器應該在滿足功能的基礎上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設置。5) 、background、font、margin、padding、border等可以縮寫的屬性，盡量使用縮寫形式。6) 、在css中謹慎使用*選擇符。7) 、除非必須，否則，一般有class或id的，不需要再寫上元素

28、對應的tag。8) 、0后面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px。9) 、如果是16進制表示顏色，則顏色取值字母應該大寫；如果可以，顏色盡量用三位字符表示，例如#AABBCC寫成#ABC。10) 、如果沒有邊框時，不要寫成border:0，應該寫成border:none。11) 、在保持代碼解耦的前提下，盡量合并重復的樣式。12) 、除了重置瀏覽器默認樣式外，禁止直接為html tag添加css樣式設置。 4.4.5、css樣式 Hack的使用 Css hack僅僅是為了兼容瀏覽器對css的解析而設置，請不要使用瀏覽器檢測和CSS Hacks作為解決瀏覽器解析差異的

29、首選方式，但應被視為最后的手段。允許使用hack只會帶來更多的hack，你越是使用它，你越是會依賴它。4.4.6、字體定義規(guī)范1) 、為了防止文件合并及編碼轉換時造成問題，建議將樣式中文字體名字改成對應的英文名字，如：黑體(SimHei) 、宋體(SimSun)、微軟雅黑 (Microsoft Yahei，幾個單詞中間有空格組成的必須加引號)，詳細介紹參詳附件。2) 、字體粗細采用具體數(shù)值，粗體bold寫為700，正常normal寫為400。3) 、font-size必須以px或pt為單位，推薦用px（注：pt為打印版字體大小設置），不允許使用small/medium/large/x-larg

30、e/xx-large等不確定的值。4) 、為了對font-family取值進行統(tǒng)一，更好的支持各個操作系統(tǒng)上各個瀏覽器的兼容性，font-family不允許在業(yè)務代碼中隨意設置。4.4.7、css樣式檢測寫好一份css樣式文件之后，如果不完全確定定義是否符合W3C標準，可借助在線檢測工具來檢測。常用的測試工具：W3C CSS validator、CSS Lint等不限制。4.4.8、注意事項1) 、不要輕易改動全站級CSS和通用CSS庫。改動后，要經(jīng)過全面測試。2) 、避免在CSS中使用expression，避免使用filter，盡量不要在CSS中使用!important。3) 、避免過小的背景圖片平鋪，允許使用1px

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論