web前端開發(fā)規(guī)范_第1頁
web前端開發(fā)規(guī)范_第2頁
web前端開發(fā)規(guī)范_第3頁
web前端開發(fā)規(guī)范_第4頁
web前端開發(fā)規(guī)范_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

web前端開發(fā)規(guī)范一、規(guī)范目的概 1二、文件規(guī)范文件命名規(guī) 1文件存放位 2html?書寫規(guī) 2css?書寫規(guī) 7二、文件規(guī)范JavaScript?書寫規(guī) 注釋規(guī) css?瀏覽器兼 一、規(guī)范目的概述為提高團(tuán)隊(duì)協(xié)作效率,便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù),輸出高質(zhì)量的文檔,特制訂此文檔.本規(guī)范文檔一經(jīng)確認(rèn),前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺(tái)頁面開發(fā).本文檔如有不對(duì)或者不合適的地方請(qǐng)及時(shí)提出,經(jīng)討論決定后可以更改此文檔.文件命名規(guī)則文件夾和文件名一律全部用小寫英文單詞，禁止出現(xiàn)簡(jiǎn)拼、拼音、數(shù)字、無意義的命名，英文單詞盡量使用一個(gè)進(jìn)行描述，簡(jiǎn)潔易懂；多個(gè)單詞用駝峰命名法。文件存放位置cn?存放中文?HTML?文件en?存放英文?HTML?文件flash?存放?Flash?文件images?存放圖片文件imagestudio?存放?PSD?源文件flashstudio?存放?flash?源文件library?存放?DW?庫文件media?存放多媒體文件project?存放工程項(xiàng)目資料temp?存放客戶原始資料js?存放?JavaScript?腳本css?存放?CSS?文件html?書寫規(guī)范●為每個(gè)HTML頁面的第一行添加標(biāo)準(zhǔn)模式(standardmode)的聲明，確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。<!<!DOCTYPEhtml><<metacharset="UTF-8"><HEAD>中添加信息。<<metaname="author"content="">●●屬性應(yīng)當(dāng)按照以下給出的順序依次排列，來確保代碼的易讀性。ClasClassdata-*title、alt避免使用中文拼音盡量簡(jiǎn)易并要求語義化。CLASSCLASS-->nHeadTitle-->CLASS遵循小駝峰命名法(littlecamel-case)IDID-->n_head_title-->ID遵循名稱+_NAME-->N_Head_Title-->NAME屬性命名遵循首個(gè)字母大寫+_<divclass="nHeadTitle"id="n_head_title"name="N_Head_Title"></div><<inputtype="text"name="test"><divid="test"></div><buttononclick="alert('test').tagName)"></button><<-->>-->空格-->●含有描述性表單元素(INPUT，TEXTAREA)添加LABEL。<<labelfor="test">測(cè)試</label><inputtype="text"id="test"/>考慮是否存在已有的合適標(biāo)簽可替換，如果沒有,可使用須以“data-”為前綴來添加自定義屬性，避免使用其他命名方式?！癖M可能減少<DIV>嵌套?！駮鴮戞溄拥刂窌r(shí)避免重定向。hrefhref=""●●eader{/*顯示屬性*/display||visibilitylist-stylepositiontop||right||bottom||leftz-indexclearfloat/*自身屬性*/widthmax-width||min-widthheightmax-height||min-heightoverflow||clipmarginpaddingoutlineborder●background/*文本屬性*/colornttext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorcontent兼容多個(gè)瀏覽器時(shí)，將標(biāo)準(zhǔn)屬性寫在底部。-moz-border-radius:15px;/*Firefox*/-webkit-border-radius:15px;/*Safari和Chrome*/dd,.bd,.td{};ecommendecommend-mod.hd多選擇器規(guī)則之間換行，即當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行。,,,input[type="button"]{…};##headera{color:#444;};/*CSS選擇器是從右邊到左邊進(jìn)行匹配*/瀏覽器將檢查整個(gè)文檔中的所有鏈接和每個(gè)鏈接的父元素，并遍歷文檔樹去查找ID為header的祖先元素，如果找不到header將追溯到文檔的根節(jié)點(diǎn)，解決方法避免使用通配規(guī)則和相鄰兄弟選擇符、子選擇符,、后代選擇符、屬性選擇符等選避免使用通配規(guī)則和相鄰兄弟選擇符、子選擇符,、后代選擇符、屬性選擇符等選擇器不要限定類選擇器，如(提權(quán)的除外不要限定類選擇器，如(提權(quán)的除外)不要使用ullia這樣長(zhǎng)的選擇符避免使用標(biāo)簽子選擇符，如#header>li>azindexzindex(通用組的除外)，頁面中的元素內(nèi)容的z-index不能超過10(提示框等模塊除外但維持在150以下)，不允許直接使用(999~9999)之間大值。propertyproperty:value;/*所有瀏覽器*/+property:value;/*IE7*/_property:value;/*IE6*/*property:value;/*IE6/7*/property:value\9;/*IE6/7/8/9，即所有IE瀏覽器*/*htmlselector{…};/*IE6*/*:first-child+htmlselector{…};/*IE7*/html>bodyselector{…};/*非IE6*/@-moz-documenturl-prefix(){…};/*firefox*/@mediaalland(-webkit-min-device-pixel-ratio:0){…};/*safsaf3+/chrome1+*/@mediaalland(-webkit-min-device-pixel-ratio:10000),notalland(-webkit-min-device-pixel-ratio:0){…};/*opera*/@mediascreenand(max-device-width:480px){…};/*iPhone/mobilewebkit*/bodybody>*{…};ul>li>a{…};#footer>h3{…};ul#top_blue_nav{…};#searbara{…};/*反面示例*/。不不要在標(biāo)簽上直接寫樣式避免使用行內(nèi)(inline)樣式避免使用“*”設(shè)置{margin:0;padding:0;}positionposition:absolute;float:left;●eplaceeplace('{PREV_NUM}',prev).replace('{NEXT_NUM}',next).replace('{CURRENT_NUM}',current).replace('{TOTAL_NUM}',;(('{TABLE}',da['results']).replace('{PREV_NUM}',prev).replace('{NEXT_NUM}',next).replace('{CURRENT_NUM}',current).replace('{TOTAL_NUM}',;如果模塊代碼中，使用其它全局變量想跳過JSLint的檢查，可以在該文件中加入/*global*/聲明?！?/*globalalert:true,console:true,top:true,setTimeout:true*/使用嚴(yán)格的條件判斷符。用===代替==，用!==代替!=，避免掉入==造成的陷阱在條件判斷時(shí)，這樣的一些值表示false。nulnull字符串''NaN在==時(shí)，則會(huì)有一些讓人難以理解的陷阱。((function(){varundefined;undefined==null;●●F2.IE6能識(shí)別*,但不能識(shí)別!important;IE6在樣式前面加_3.IE7能識(shí)別*,也能識(shí)別!important;能識(shí)別\9例如:background:red\9;5.firefox?不能識(shí)別*,但能識(shí)別!important;和firefox的區(qū)別:background:orange;*background:blue;意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍(lán)色.background:green!important;background:blue;意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍(lán)色(2).CSSHack?的順序3.IE7和FF的區(qū)別:background:orange;*background:green;意思指的是:火狐瀏覽器的背景顏色是橙色,而?IE7的背景顏色是綠色4.FF,IE7,IE6的區(qū)別:background:orange;*background:green!important;*background:blue;意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而?IE6瀏覽器的顏色是藍(lán)色.二、實(shí)踐建議(1).開發(fā)平臺(tái)的選擇在Firefox上編寫CSS,同時(shí)兼容其他瀏覽器的.這樣做肯定會(huì)比在IE做好再到別xHackIE以外的瀏覽器幾乎都不會(huì)有問題,所以可以暫時(shí)忽略,順序如下:Firefox->IE6->IE7->其他(3).Hack的方法說到方法有兩種,一種是在不同文件中處理,另一種則是在同一個(gè)文件中處理.其實(shí)作用是相同的,只是出發(fā)點(diǎn)不一樣而已.同一文件中處理.Firefox瀏覽器中顯示紅色。IE7認(rèn)!important,也認(rèn)*+

溫馨提示

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

評(píng)論

0/150

提交評(píng)論