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

下載本文檔

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

文檔簡介

前端開發(fā)設計規(guī)范 目錄前端開發(fā)設計規(guī)范 1一、HTML使用規(guī)范 11.1、頁面文件命名規(guī)范 11.2、頁面head部分書寫規(guī)范 11.3、HTML元素開發(fā)規(guī)范 21.3.1、HTML元素書寫規(guī)范 21.3.2、HTML元素命名規(guī)范 3二、WEB頁面開發(fā)規(guī)范 42.1、錯誤跳轉頁面的處理 42.2、提示信息的處理 42.3、頁面的返回 42.4、提交前數(shù)據的判斷驗證 42.5、刪除操作 52.6、頁面中java代碼的使用 52.7、網站頁面布局規(guī)范 52.7.1、前臺頁面尺寸 52.7.2、標準網頁廣告圖標規(guī)格（參考） 62.7.3、頁面字體 62.7.4、字體顏色 7三、javaScript開發(fā)規(guī)范 73.1、javaScript文件命名規(guī)范： 73.2、javaScript開發(fā)規(guī)范 73.2.1、javaScript書寫規(guī)范 73.2.2、javaScript命名規(guī)范 8四、css樣式規(guī)范 94.1、css樣式文件命名規(guī)范 94.1.1、通用樣式文件命名規(guī)范： 94.1.2、業(yè)務類樣式文件命名規(guī)范 104.1.3、css樣式文件命名須知 104.2、css樣式文件存放目錄規(guī)范 104.3、css樣式定義規(guī)范 114.3.1、css樣式內容頂部注釋規(guī)范 114.3.2、css樣式內容注釋規(guī)范 114.3.3、css樣式定義規(guī)范 124.3.4、css樣式常用id的命名 134.3.5、css樣式常用class的命名 144.4、css樣式書寫規(guī)范 154.4.1、css樣式排版規(guī)范 154.4.2、css樣式書寫風格規(guī)范 154.4.3、css樣式屬性定義順序規(guī)范 164.4.4、css樣式其他規(guī)范 164.4.5、css樣式Hack的使用 174.4.6、字體定義規(guī)范 184.4.7、css樣式檢測 184.4.8、注意事項 184.5、css樣式引用規(guī)范 194.6、媒體內容命名規(guī)范 19五、項目文件存放規(guī)范 19六、前端開發(fā)規(guī)則 20一、HTML使用規(guī)范1.1、頁面文獻命名規(guī)范命名格式為：項目名縮寫_所屬功效_所屬功效子項_....jsp/html…，文獻命名下劃線不能超出三個，命名盡量使用簡短的能明確表明文獻用途的英文或者英文簡寫。1.2、頁面head部分書寫規(guī)范、JSP頁面：需要在頁面的最開始部分增加下列語句：、HTML頁面：需要在頁面的最開始部分增加下列語句：、HTML5頁面：頁面添加編碼格式可簡寫為：、響應式的網頁添加以下語句：、title元素：普通網頁必須添加title元素，若為框架頁面，則能夠不寫。title統(tǒng)一使用中文，title內容要簡潔明了，不能超出20個字。、外部js的引用：頁面加載時需要用到的js文獻寫在head中，引用時不用寫language屬性，HTML5能夠省略type屬性，如。、外部CSS文獻的引用：必須使用link方式引入，HTML5能夠省略type屬性，CSS文獻引入要放在js文獻前。1.3、HTML元素開發(fā)規(guī)范1.3.1、HTML元素書寫規(guī)范、代碼的構造要保持完整性，單個標簽必須要關閉，如：<div></div>，<br/>等。、子元素要比父元素縮進兩個字符。、body中的全部內容不能直接書寫在<body></body>標簽中，需要在body中嵌入一層div，全部的元素需要寫在改div中。、除非必要，全部標簽元素的樣式都需要使用CSS文獻來定義。、img元素：全部展示用圖片都要使用alt屬性添加能簡要描述圖片的文字闡明，如首頁的廣告圖片等，必須含有width和height屬性。、全部Form都要指定action屬性，但屬性值需要則填寫，不需要則留空，method屬性統(tǒng)一使用POST；全部form表單都要在提交前對輸入的數(shù)據邁進行驗證，驗證使用jQueryvalidate插件，書寫規(guī)范以下：、全部不可更改的input元素都要設立readonly屬性。、按功效模塊添加簡樸明了的注釋，在功效模塊的開始標明模塊開始，結束時標明模塊結束，注釋單獨占一行；模塊之間留行間隔便于查看代碼。、已過時的元素標簽使用CSS樣式來替代，已過時的標簽屬性嚴禁使用，使用CSS樣式定義來實現(xiàn)。1.3.2、HTML元素命名規(guī)范涉及到跟服務端交互的元素，元素命名應當與服務端程序中定義的對應變量名相似，或使用對象名.變量名的形式。頁面上使用到的不涉及與服務端交互的HTML元素其id和name需統(tǒng)一，全部命名使用元素標簽的縮寫_后綴方式,后綴命名使用小駝峰命名法即第一種單詞全部使用小寫，其它單詞首字母大寫，常見元素命名規(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)一頁面，全部錯誤信息全部使用中文錯誤信息，標點符號使用中文半角符號。頁面設計與項目功效相匹配，做到簡潔和諧。2.2、提示信息的解決成功提示信息能夠使用彈窗或跳轉統(tǒng)一成功頁面的方式，成功頁面的風格與網站總體風格相似，格式以下："成功："+提示信息+"！"。2.3、頁面的返回全部需要返回上一頁的時候使用history.back();不使用history.go(-1)。2.4、提交前數(shù)據的判斷驗證、全部由顧客輸入的數(shù)據在提交前都要進行驗證。、驗證方式使用jQueryvalidate插件，需要驗證的項：長度驗證：默認長度為數(shù)據庫中數(shù)據的最大長度，中文占兩個字符，英文占一種字符。為空驗證：全部不允許為空的輸入內容為空時不允許提交。其它驗證：需要根據輸入內容的不同設定適宜的驗證，如Email格式與否對的，身份證號格式與否對的等。、驗證后發(fā)現(xiàn)錯誤，需要提示明確的錯誤信息。錯誤提示信息樣式：字體顏色#ff3366，文字前面加紅色感慨號小圖標。、可輸入表單需要含有輸入內容的提示信息，可使用placeholder屬性來定義或者自定義，顏色必須使用灰色，字體比網站使用字體小。2.5、刪除操作全部涉及刪除的操作，需要顧客進行確認之后才干進行操作。2.6、頁面中java代碼的使用頁面中不允許使用<%%>的方式嵌入java代碼。2.7、網站頁面布局規(guī)范2.7.1、前臺頁面尺寸、800*600下，網頁寬度保持在778以內，就不會出現(xiàn)水平滾動條，高度則視版面和內容決定，1024*768下，網頁寬度保持在1002以內，不會出現(xiàn)水平滾動條，高度同樣視版面內容決定。、根據第一條原則，規(guī)定網頁的尺寸為width=960px,height=600px。、頁面長度原則上不超出3屏（可根據實際狀況設定），寬度不超出1屏。、全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31px。、每個非首頁靜態(tài)頁面含圖片字節(jié)不超出60K，全尺寸banner不超出14K。2.7.2、原則網頁廣告圖標規(guī)格（參考）、120*120，合用于產品或新聞照片展示。、120*60，重要用于做LOGO使用。、120*90，重要應用于產品演示或大型LOGO。、125*125，適于體現(xiàn)照片效果的圖像廣告。、234*60，合用于框架或左右形式主頁的廣告鏈接。、392*72，重要用于有較多圖片展示的廣告條，用于頁眉或頁腳。、468*60，應用最為廣泛的廣告條尺寸，用于頁眉或頁腳。、88*31，重要用于網頁鏈接，或網站小型LOGO。2.7.3、頁面字體正文內容中文統(tǒng)一使用宋體（可根據需要設定），大小為12px，標題使用14px加粗，不建議使用13px字，英文字體使用Arial和Helvetica/Univers。2.7.4、字體顏色、正文使用灰黑色#333333。、超鏈接能夠使用藍色#1f376d或#425c9e，也能夠根據整體頁面布局進行調節(jié)，整個網站的文字超鏈接樣式要統(tǒng)一。三、javaScript開發(fā)規(guī)范3.1、javaScript文獻命名規(guī)范：、可通用的javaScript文獻：項目名稱縮寫-文獻作用.js。、其它javaScript文獻：所屬功效-文獻作用.js。3.2、javaScript開發(fā)規(guī)范3.2.1、javaScript書寫規(guī)范、javaScript代碼都需要寫在javaScript文獻中，在頁面中進行調用，調用代碼除頁面加載時需要用到的外全都寫在頁面最低端。、如驗證用javaScript代碼等，每個頁面不同且比較短的，能夠寫在頁面的最底端，從最后一種外部javaScript引入命令后開始。、腳本變量開發(fā)規(guī)范：變量的使用盡量縮小到小的作用域。如循環(huán)使用。、盡量避免使用全局變量。、每一句語句都要以分號“；”結束。、函數(shù)程序體縮進四個空格，Tab鍵為4個空格，以Tab鍵作為縮進單位。、函數(shù)名與“（”之間不應當有空格，“）”與“{”之間加空格。、函數(shù)體之間應當加空行。、如果代碼本身是清晰的，則只需要在函數(shù)定義前，添加簡樸注釋闡明該函數(shù)的作用，若代碼本身比較復雜，可在個別語句后添加簡潔明了的注釋。3.2.2、javaScript命名規(guī)范、常量以及全局變量名必須全部使用大寫字母。、不要再命名中使用“$”和“\”等特殊字符，不要把“_”作為變量名的第一種字符和最后一種字符。、變量名必須使用其類型的縮寫字符串開始。多個類型的縮寫字符串以下：變量類型縮寫變量類型縮寫整型變量int長整型變量lng浮點型變量flt雙精度變量dbl對象變量obj字符串變量strDate類型變量dtm數(shù)組ary臨時變量tmp、變量名必須采用故意義的單詞命名，如：strUserName、lngArrayIndex，以及不要出現(xiàn)數(shù)字編號命名，如：value1，value2…、如果變量名過長能夠使用單詞縮寫，除了被廣泛理解的單詞縮寫以外，全部使用單詞縮寫的變量名必須在定義時給出注釋，如：、參數(shù)變量命名必須加前綴：p_。、function命名規(guī)范：使用動詞+名詞的方式，并且命名需要明確指出其作用，動詞前綴必須是同函數(shù)功效有關的完整動詞，如getUserId（），用來取顧客Id。、全部命名使用小駝峰命名法：第一種單詞全部使用小寫，其它單詞首字母大寫，如：myClassName。四、css樣式規(guī)范4.1、css樣式文獻命名規(guī)范4.1.1、通用樣式文獻命名規(guī)范：、整個項目通用的css布局樣式文獻命名為：layout.css。如：通過于整個網站中使用的div、h1、img等的定義文獻。、對引用的開源css樣式重定義的文獻命名為：開源的css樣式文獻名-reset.css如：bootstrap.css為引用的css樣式文獻，現(xiàn)在對它的.btn重新定義樣式內容，這類樣式的文獻名命名為：開源的css樣式文獻名-reset.css。一種項目建議最多使用一種css框架。、外部引用的字體css樣式文獻命名為：font-加引用的字體名字.css，若有多個字體引用則使用：font-style.css。、自定義的響應式布局樣式命名為：項目名稱縮寫–responsive.css。、跨項目通用功效定義的css樣式文獻命名為：實現(xiàn)的功效.css。、為IE瀏覽器做兼容解決的樣式命名為：ie-版本號.css。4.1.2、業(yè)務類樣式文獻命名規(guī)范自定義的樣式統(tǒng)一定義在一種文獻內，文獻命名為：項目名稱-style.css。4.1.3、css樣式文獻命名須知、以上全部的css樣式文獻命名必須是小寫字母，不允許中文、大寫字母及其它特殊字符等。如果有樣式版本共存或更新需要保存老版本樣式，請在樣式文獻名背面加上“-版本號”，最新版本樣式文獻除外，同樣版本號只允許是數(shù)字或小寫字母。、以上css文獻命名制訂的規(guī)范只合用普遍的狀況，特殊狀況下請開發(fā)人員根據實際狀況自行命名，但必須遵行1)的規(guī)定。4.2、css樣式文獻寄存目錄規(guī)范項目文獻寄存目錄將在背面闡明，此處只針對css樣式文獻寄存規(guī)定。、字體樣式文獻寄存文獻夾：/font/，涉及字體的源文獻。、引用的樣式保持原來的目錄構造，如果有多個引用的樣式則按功效新建文獻夾來分別寄存。、其它樣式文獻不用單獨新建文獻夾。4.3、css樣式定義規(guī)范4.3.1、css樣式內容頂部注釋規(guī)范、請使用utf-8編碼。、聲明css定義的內容概述或目的，聲明編寫的人員、更新日期。、請謹慎使用@importurl(……)引入其它css樣式文獻。4.3.2、css樣式內容注釋規(guī)范、模塊注釋必須單獨寫在一行，簡要闡明模塊的功效。、單行注釋能夠寫在單獨一行，也能夠寫在行尾，注釋中的每一行長度不超出30個中文，或者60個英文字符。、多行注釋必須寫在單獨行內，即/*后換行寫注釋，*/單獨寫一行。、用于標注修改、待辦等信息的注釋以單行注釋為基準。、對一種代碼區(qū)塊注釋（可選），將樣式語句分區(qū)塊并在新行中對其注釋。4.3.3、css樣式定義規(guī)范、使用故意義的或通用的id和class命名：id和class的命名應反映該元素的功效或使用通用名稱，而不要用抽象的艱澀的命名。反映元素的使用目的是首選；使用通用名稱代表該元素不表特定意義，與其同級元素無異，普通是用于輔助命名；使用功效性或通用的名稱能夠更合用于文檔或模版變化的狀況。、id和class命名越簡短越好，只要足夠體現(xiàn)涵義。這樣現(xiàn)有助于理解，也能提高代碼效率。、慣用命名（多記多查英文單詞）：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等。、類型選擇器避免同時使用標簽、id和class作為定位一種元素選擇器，能夠使用class層級來替代。、規(guī)則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或下劃線。、命名避免使用中文拼音，應當采用更簡要有語義的英文單詞進行組合。、命名注意縮寫，但是不能盲目縮寫，具體請參見慣用的CSS命名規(guī)則。、不允許通過1、2、3等序號進行命名，避免class與id重名。、id用于標記模塊或頁面的某一種父容器區(qū)域，名稱必須唯一，不要隨意新建id。、class用于標記某一種類型的對象，命名必須言簡意賅，盡量提高代碼模塊的復用，樣式盡量用組合的方式。4.3.4、css樣式慣用id的命名、頁面構造命名構造命名構造命名容器container頁頭header頁面主體main頁尾footer側欄sidebar欄目column內容content/container內容content/container外圍布局wrapper左右中l(wèi)eftrightcenter、導航命名構造命名構造命名導航nav主導航mainbav子導航subnav頂導航topnav邊導航sidebar左導航leftsidebar右導航rightsidebar菜單menu子菜單submenu標題/摘要title/summary、功效命名構造命名構造命名標志logo廣告banner登陸login登錄條loginbar注冊regsiter搜索search功效區(qū)shop標題title加入joinus狀態(tài)status按鈕btn滾動scroll標簽頁tab文章列表list提示信息msg現(xiàn)在的current小技巧tips圖標icon注釋note指南guild服務service熱點hot新聞news下載download投票vote合作伙伴partner友情鏈接link版權copyright以上樣式定義須符合css樣式定義規(guī)范。4.3.5、css樣式慣用class的命名、顏色：單獨定義顏色時使用顏色的名稱，復合顏色用中劃線連接。如：.blue或.blue-green。、字體大?。簡为毝x時使用font-字號；如：.font-12。、對齊樣式：使用對齊目的的英文名稱。如：.left。、其它樣式：功效縮寫-現(xiàn)在的作用區(qū)域；如果有多層級，則下一層級定義為：上一級的樣式名-目的區(qū)塊命名；在嵌入其它門戶網站中的應用，如果門戶網站沒有特別規(guī)定，為了避免樣式沖突必須為每一種樣式加上前綴，前綴能夠按實際狀況來設立。4.4、css樣式書寫規(guī)范4.4.1、css樣式排版規(guī)范、使用一次tab鍵或者4個空格作為縮進。、規(guī)則能夠寫成單行，或者多行，但是整個文獻內的規(guī)則排版必須統(tǒng)一。、對于能夠公布的網站樣式建議進行壓縮，直接使用網上的css格式化工具進行壓縮。4.4.2、css樣式書寫風格規(guī)范、如果是在html頁面中定義的css樣式，則必須寫成單行，不建議在html頁面中定義css樣式。、每一條規(guī)則的大括號{前后加空格，每一條規(guī)則結束的大括號}前加空格。、屬性名冒號之前不加空格，冒號之后加空格。、每一種屬性值后必須添加分號;并且分號后空格。、多個selector共用一種樣式集，10個以內的selector必須寫成多行形式，10個以上的selector寫成一行。、多行書寫時每一條規(guī)則結束的大括號}必須與規(guī)則選擇器的第一種字符對齊。4.4.3、css樣式屬性定義次序規(guī)范、顯示屬性：display/list-style/position/float/clear…。、本身屬性（盒模型）：width/height/margin/padding/border。、背景：background；行高：line-height。文本屬性：color/font/text-decoration/text-align/text-indent/white-space。、其它：cursor/z-index/zoom/overflow。、CSS3屬性：transform/transition/animation/box-shadow/border-radius。、使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照-webkit-/-moz-/-ms-/-o-的次序進行添加，原則屬性寫在最后。、屬性定義次序規(guī)范不作嚴格規(guī)定，但在使用css3時最佳加上前綴。4.4.4、css樣式其它規(guī)范、使用單引號，不允許使用雙引號。、每個聲明結束都應當帶一種分號，不管是不是最后一種聲明。、除16進制顏色和字體設立外，CSS文獻中的全部的代碼都應當小寫。、選擇器應當在滿足功效的基礎上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設立。、background、font、margin、padding、border等能夠縮寫的屬性，盡量使用縮寫形式。、在css中謹慎使用*選擇符。、除非必須，否則，普通有class或id的，不需要再寫上元素對應的tag。、0背面不需要單位，例如0px能夠省略成0，0.8px能夠省略成.8px。、如果是16進制表達顏色，則顏色取值字母應當大寫；如果能夠，顏色盡量用三位字符表達，例如#AABBCC寫成#ABC。、如果沒有邊框時，不要寫成border:0，應當寫成border:none。、在保持代碼解耦的前提下，盡量合并重復的樣式。、除了重置瀏覽器默認樣式外，嚴禁直接為htmltag添加css樣式設立。4.4.5、css樣式Hack的使用Csshack僅僅是為了兼容瀏覽器對css的解析而設立，請不要使用瀏覽器檢測和CSSHacks作為解決瀏覽器解析差別的首選方式，但應被視為最后的手段。允許使用hack只會帶來更多的hack，你越是使用它，你越是會依賴它。4.4.6、字體定義規(guī)范、為了避免文獻合并及編碼轉換時造成問題，建議將樣式中文字體名字改成對應的英文名字，如：黑體(SimHei)、宋體(SimSun)、微軟雅黑(MicrosoftYahei，幾個單詞中間有空格構成的必須加引號)，具體介紹參詳附件。、字體粗細采用品體數(shù)值，粗體bold寫為700，正常normal寫為400。、font-size必須以px或pt為單位，推薦用px（注：pt為打印版字體大小設立），不允許使用small/medium/large/x-large/xx-large等不擬定的值。、為了對font-family取值進行統(tǒng)一，更加好的支持各個操作系統(tǒng)上各個瀏覽器的兼容性，font-family不允許在業(yè)務代碼中隨意設立。4.4.7、css樣式檢測寫好一份css樣式文獻之后，如果不完全擬定定義與否符合W3C原則，可借助在線檢測工具來檢測。慣用的測試工具：W3CCSSvalidator、CSSLint等不限制。4.4.8、注意事項、不要容易改動全站級CSS和通用CSS庫。改動后，要通過全方面測試。、避免在CSS中使用expression，避免使用filter，盡量不要在CS

溫馨提示

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

最新文檔

評論

0/150

提交評論