Web 前端開發(fā)規(guī)范手冊
《Web 前端開發(fā)規(guī)范手冊》由會員分享，可在線閱讀，更多相關(guān)《Web 前端開發(fā)規(guī)范手冊（10頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。
1、入門級的親們，好好背背這手冊成嗎 一、規(guī)范目的 Web?前端開發(fā)規(guī)范手冊 1.1?概述?.....................................................................................................................................?1 二、文件規(guī)范 2.1?文件命名規(guī)則..................................................................................................
2、.......................1 2.2?文件存放位置..........................................................................................................................2 2.3 css?書寫規(guī)范..........................................................................................................................3 2.
3、4 html?書寫規(guī)范.........................................................................................................................7 2.5 JavaScript?書寫規(guī)范.............................................................................................................11 2.6?圖片規(guī)范.........................
4、..........................................................................................................12 2.7?注釋規(guī)范...................................................................................................................................13 2.8 css?瀏覽器兼容..................................
5、.....................................................................................13 一、規(guī)范目的 1.1?概述 為提高團(tuán)隊(duì)協(xié)作效率,?便于后臺人員添加功能及前端后期優(yōu)化維護(hù),?輸出高質(zhì)量的文檔,?特制訂此文檔.?本規(guī)范文檔一經(jīng)確認(rèn),?前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺頁面開發(fā).?本文檔如有不對或者不合適的地方請及時(shí)提出,?經(jīng)討論決定后可以更改此文檔. 二、文件規(guī)范 2.1?文件命名規(guī)則 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合,其中不得包含漢字、空格和特殊字符;命名原則的指導(dǎo)思想一
6、是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義,二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時(shí),同一種大類的文件能夠排列在一起,以便我們查找、修改、替換、計(jì)算負(fù)載量等等操作。 a. HTML?的命名原則 引文件統(tǒng)一使用?index.htm index.html index.asp?文件名(小寫) 各子頁命名的原則首先應(yīng)該以欄目名的英語翻譯取單一單詞為名稱。例如: 關(guān)于我們?\ aboutus 信息反饋?\ feedback 產(chǎn) 品?\ product如果欄目名稱多而復(fù)雜并不好以英文單詞命名,則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示;每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的?
7、html?文件,文件名統(tǒng)一用?index.htm index.html index.asp; b.?圖片的命名原則 圖片的名稱分為頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質(zhì)例如:廣告、標(biāo)志、菜單、按鈕等等。 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名:?banner 標(biāo)志性的圖片取名為:?logo 在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button在頁面上某一個(gè)位置連續(xù)出現(xiàn),性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶??menu 裝飾用的照片我們?nèi)∶??pic 不帶鏈接表示標(biāo)題的圖片我們?nèi)∶??title 范 例 :?banner_sohu.gif banne
8、r_sina.gif menu_aboutus.gif menu_job.gif title_news.giflogo_police.gif logo_national.gif pic_people.jpg鼠標(biāo)感應(yīng)效果圖片命名規(guī)范為"圖片名+_+on/off"。 例如:menu1_on.gif menu1_off.gif c. javascript?的命名原則 例如:廣告條的?javascript?文件名為?ad.js?彈出窗口的?javascript?文件名為?pop.js d.?動(dòng)態(tài)語言文件命名原則以性質(zhì)_描述,描述可以有多個(gè)單詞,用“_”隔開,性質(zhì)一般是該頁面得概要。范例:reg
9、ister_form.asp register_post.asp topic_lock.asp 2.2?文件存放位置規(guī)范 _Root cn?存放中文?HTML?文件en?存放英文?HTML?文件flash?存放?Flash?文件images?存放圖片文件imagestudio?存放?PSD?源文件flashstudio?存放?flash?源文件inc?存放include?文件library?存放?DW?庫文件media?存放多媒體文件project?存放工程項(xiàng)目資料temp?存放客戶原始資料js?存放?JavaScript?腳本 css?存放?CSS?文件 2.3 CSS?書寫
10、規(guī)范基本原則: CSS?樣式可細(xì)分為?3?類:自定義樣式、重新定義?HTML?樣式、鏈接狀態(tài)樣式。 1.?樣式為設(shè)計(jì)師自定義的新?CSS?樣式,影響被使用本樣式的區(qū)域,用于完成網(wǎng)頁中局部的樣式設(shè)定。樣式名 “.”+“相應(yīng)樣式效果描述的單詞或縮寫”例:“?.shadow”文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例:“?.no12?” 、“?.no12-24?” 2.?義?HTML?樣式為設(shè)計(jì)師重新定義已有的?HTML?標(biāo)簽樣式,影響全部的被設(shè)定標(biāo)簽樣式,用于統(tǒng)一網(wǎng)頁中某一標(biāo)簽的樣式定義。樣式名“HTML?標(biāo)簽”例:hr { border: 1px dotted #3333
11、33 } 3.?態(tài)樣式為設(shè)計(jì)師對鏈接不同狀態(tài)設(shè)定特殊樣式,影響被使用本樣式區(qū)域中的鏈接。該樣式寫法有2種:a.nav:link?nav.a:link?第一種只能修飾標(biāo)簽中;第二種可以修飾所有包含有標(biāo)簽的其他標(biāo)簽。 頁面內(nèi)的樣式加載必須用鏈接方式 注意細(xì)則: 1.?協(xié)作開發(fā)及分工: i?會根據(jù)各個(gè)模塊,?同時(shí)根據(jù)頁面相似程序,?事先寫好大體框架文件,?分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為;?共用?css?文件?base.css?由?i?書寫,?協(xié)作開發(fā)
12、過程中,?每個(gè)頁面請務(wù)必都要引入,?此文件包含?reset?及頭部底部樣式,?此文件不可隨意修改; 2. class?與?id?的使用: id?是唯一的并是父級的, class?是可以重復(fù)的并是子級的,?所以?id?僅使用在大的模塊上, class?可用在重復(fù)使用率高及子級中; id?原則上都是由我分發(fā)框架文件時(shí)命名的,?為?JavaScript?預(yù)留鉤子的除外; 3. 為?JavaScript?預(yù)留鉤子的命名,?請以?js_?起始,?比如: js_hide, js_show; 4. class?與?id?命名:?大的框架命名比如?header/footer/wrapper/left/r
13、ight?之類的在?2?中由?i?統(tǒng)一命名.其他 樣式名稱由 小寫英文?&?數(shù)字?& _?來組合命名,?如?i_comment, fontred, width200;?避免使用中文拼音,盡量使用簡易的單詞組合;?總之,?命名要語義化,?簡明化. 5. a, b, c, d, id="mainnav">
14、要,?若有不明白請及時(shí)與?i?溝通):通過從屬寫法規(guī)避,?示例見?d; 取父級元素?id/class?命名部分命名,?示例見?d;重復(fù)使用率高的命名,?請以自己代號加下劃線起始,?比如?i_clear; a,b?兩條,?適用于在?2?中已建好框架的頁面,?如,?要在?2?中已建好框架的頁面代碼
15、->其他屬性.?此條可根據(jù)自身習(xí)慣書寫,?但盡量保證同類屬性寫在一起.?屬性列舉:?布局定位屬性主要包括: margin、padding、float(包括clear)、position(相應(yīng)的?top,right,bottom,left)、display、visibility、overflow?等;自身屬性主要包括: width& height & background & border;?文本屬性主要包括:font、color、text-align、text-decoration、text-indent 等;其他屬性包括: list-style(列表樣式)、vertical-vlign、c
16、ursor、z-index(層疊順序)?、zoom?等.我所列出的這些屬性只是最常用到的,?并不代表全部; 7. 書寫代碼前,?考慮并提高樣式重復(fù)使用率; 8. 充分利用?html?自身屬性及樣式繼承原理減少代碼量,?比如:
- 這兒是標(biāo)題列表2010-09-15
17、亂碼; 10. 背景圖片請盡可能使用sprite技術(shù),減小http請求,考慮到多人協(xié)作開發(fā),sprite按模塊制作; 11. 使用?table?標(biāo)簽時(shí)(盡量避免使用?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;bord
18、er-collapse:collapse;} table th, table td{padding:0;} , base.css?文件中我會初始化表格樣式)
12.?杜絕使用
19、=crop,src=’img/bg.png’); 14.?避免兼容性屬性的使用,比如text-shadow||css3的相關(guān)屬性; 15.?減少使用影響性能的屬性,比如position:absolute||float; 16.?必須為大區(qū)塊樣式添加注釋,?小區(qū)塊適量注釋; 17.?代碼縮進(jìn)與格式:建議單行書寫,可根據(jù)自身習(xí)慣,后期優(yōu)化i會統(tǒng)一處理; 命名規(guī)則: 頭:header 內(nèi)容:content/container 尾:footer 導(dǎo)航:nav 側(cè)欄:sidebar 欄目:column頁面外圍控制整體布局寬度:wrapper左右中:left right center
20、登錄條:loginbar 標(biāo)志:logo 廣告:banner 頁面主體:main 熱點(diǎn):hot 新聞:news 下載:download 子導(dǎo)航:subnav 菜單:menu 子菜單:submenu搜索:search友情鏈接:friendlink頁腳:footer版權(quán):copyright滾動(dòng):scroll內(nèi)容:content標(biāo)簽頁:tab文章列表:list提示信息:msg小技巧:tips欄目標(biāo)題:title加入:joinus指南:guild服務(wù):service注冊:regsiter狀態(tài):status投票:vote合作伙伴:partner (二)注釋的寫法:/* Footer
21、*/內(nèi)容區(qū) /* End Footer */ (三)id?的命名: (1)頁面結(jié)構(gòu) 容器: container 頁頭:header內(nèi)容:content/container頁面主體:main 頁尾:footer 導(dǎo)航:nav 側(cè)欄:sidebar 欄目:column頁面外圍控制整體布局寬度:wrapper左右中:left right center (2)導(dǎo)航 導(dǎo)航:nav主導(dǎo)航:mainbav子導(dǎo)航:subnav頂導(dǎo)航:topnav邊導(dǎo)航:sidebar左導(dǎo)航:leftsidebar右導(dǎo)航:rightsidebar 菜單:menu子菜單:submenu標(biāo)題: title
22、 摘要: summary (3)功能標(biāo)志:logo廣告:banner登陸:login登錄條:loginbar注冊:regsiter搜索:search功能區(qū):shop標(biāo)題:title加入:joinus狀態(tài):status按鈕:btn滾動(dòng):scroll標(biāo)簽頁:tab文章列表:list提示信息:msg當(dāng)前的: current小技巧:tips 圖標(biāo): icon注釋:note指南:guild服務(wù):service熱點(diǎn):hot新聞:news下載:download投票:vote合作伙伴:partner友情鏈接:link版權(quán):copyright\ 基本樣式: /* CSS Document */ bod
23、y {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0;margin:0;} table,td,tr,th{font-size:12px;} li{list-style-type:none;} img{vertical-align:top;border:0;} ol,ul {list-style:none;
24、} h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}address,cite,code,em,th {font-weight:normal; font-style:normal;}.fB{font-weight:bold;} .f12px{font-size:12px;} .f14px{font-size:14px;} .left{float:left;} .right{float:right;} a {color:#2b2b2b; text-decoration:none;} a:visited {text-deco
25、ration:none;} a:hover {color:#ba2636;text-decoration:underline;}a:active {color:#ba2636;} 重定義的最先,偽類其次,自定義最后,便于自己和他人閱讀! 不同瀏覽器上字號保持一致,字號建議用點(diǎn)數(shù)?pt?和像素?px?來定義,pt?一般使用中文宋體的?9pt?和?11pt,px?一般使用中文宋體?12px?和?14.7px?這是經(jīng)過優(yōu)化的字號,黑體字或者宋體字加粗時(shí),一般選用?11pt?和14.7px?的字號比較合適。中英文混排時(shí),我們盡可能的將英文和數(shù)字定義為?verdana?和?arial?兩種字體。
26、 2.4 html?書寫規(guī)范 1.?網(wǎng)頁制作細(xì)節(jié)?---- head?區(qū)代碼規(guī)范 head?區(qū)是指?HTML?代碼的
和之間的內(nèi)容。必須加入的標(biāo)簽 a)?公司版權(quán)注釋?b)?網(wǎng)頁顯示字符集 簡體中文: 繁體中文: 英 語: c)?網(wǎng)頁制作者信息 4. d) ?網(wǎng)站簡介 5. e) ?搜索關(guān)鍵字 6. f) ?網(wǎng)頁的?css?規(guī)范 7. g) ?網(wǎng)頁標(biāo)題 可以選擇加入的標(biāo)簽 a)?設(shè)定網(wǎng)頁的到期時(shí)間。一旦網(wǎng)頁過期,必須到服務(wù)器上重新調(diào)閱。27、TA HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">b)?禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容。 c)?用來防止別人在框架里調(diào)用你的頁面。 d)?自動(dòng)跳轉(zhuǎn)。
28、QUIV="Content-Type" CONTENT="text/html; charset=utf-8">
29、ref="../css/style.css" rel="stylesheet" type="text/css">
30、夾圖標(biāo)? 7. g) ?所有的?javascript?的調(diào)用盡量采取外部調(diào)用. h)?附
標(biāo)簽: 標(biāo)簽不屬于?head?區(qū),這里強(qiáng)調(diào)一下,為了保證瀏覽器的兼容性,必須設(shè)置頁面背景31、?
?來人工干預(yù)分段。
4.不同語種的文字之間應(yīng)該有一個(gè)半角空格,但避頭的符號之前和避尾的符號之后除外,漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn),英文字母和數(shù)字周圍的括號應(yīng)該使用半角括號。
5.?請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個(gè)的 也盡量少使用
32、全角空格(英文字符集下,全角空格會變成亂碼),空白應(yīng)該盡量使用?text-indent, padding, margin, hspace, vspace以及透明的?gif?圖片來實(shí)現(xiàn)。 6.?行距建議用百分比來定義,常用的兩個(gè)行距的值是?line-height:120%/150%. 7.?排版中我們經(jīng)常會遇到需要進(jìn)行首行縮進(jìn)的處理,不要使用 或者全角空格來達(dá)到效果,規(guī)范的做法是在樣式表中定義?p { text-indent: 2em; }?然后給每一段加上?
標(biāo)記,注意,一般情況下,請不要省略
?結(jié)束標(biāo)記 。 3.?網(wǎng)頁制作細(xì)節(jié)?----?鏈接 1.?網(wǎng)站中的鏈接路徑全部采用33、相對路徑,一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名,如我們不必這樣:?而應(yīng)該這樣:,所有內(nèi)頁指向首頁的鏈接寫成 2.?在瀏覽器里,當(dāng)我們點(diǎn)擊空鏈接時(shí),它會自動(dòng)將當(dāng)前頁面重置到首端,從而影響用戶正常的閱讀內(nèi)容,我們用代碼“javascript:void(null)”代替原來的“#”標(biāo)記 4.?網(wǎng)頁制作細(xì)節(jié)?----?表格 1px?表格?style="border-collapse: collapse" 實(shí)例如下:
| ?縮進(jìn)兩個(gè)半角空格, | ?中如果還有嵌套的表格,
|
8.?網(wǎng)頁制作細(xì)節(jié)?----?緩存
網(wǎng)頁不會被緩存
HTM網(wǎng)頁
ASP網(wǎng)頁
Response.Expires = -1Response.ExpiresAbsolute = Now() - 1Response.cachecontrol = "no-cache"
9.?網(wǎng)頁制作細(xì)節(jié)?----?瀏覽器兼容性
創(chuàng)建站點(diǎn)時(shí),應(yīng)該明白訪問者可能使用各種?Web?瀏覽器。在已知的其他設(shè)計(jì)限制下,盡可能將站點(diǎn)設(shè)計(jì)為具有最大的瀏覽器兼容性。
目前使用的?Web?瀏覽器有二十多種,大多數(shù)已發(fā)行了多個(gè)版本。即使您只針對使用?Netscape Navigator和?Mic
