web前端開發規範

麥子學院何虎老師的開發web前端開發規範課程筆記

web前端開發規範的意義

1、提高團隊的協作能力 
2、提高程式碼的複用利用率 
3、可以寫出質量更高，效率更好的程式碼 
4、為後期維護提供更好的支援

規範

1、命名規則 
2、檔案存放位置規範 
3、css書寫規範 
4、html程式碼書寫規範 
5、JavaScript書寫及實用規範 
6、圖片規範 
7、註釋規範 
8、相容性規範 
9、開發測試約定及實用工具規範

1、html 的命名規則

1、檔名稱命名規則 
統一用小寫英文字母、數字、和下劃線組合，不得包含漢字（轉義問題）空格（）和特殊字元（）。 
原則： 
方便理解 
方便查詢 
2、索引檔案命名原則 
3、各子頁面命名原則 
統一用翻譯的英文名稱 
統一用拼音命名 
注意：不要用英語拼音混用

2、圖片 的命名規則

常規命名： 
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名：banner 
標誌性的圖片取名為：logo 
在頁面上位置不固定並且帶有連線的小圖片我們取名為button 
在頁面上一個位置連續出現，性質相同的連線欄目的圖片我們取名為：menu 
裝飾用的照片我們取名;pic  
不帶連線表示標題的圖片我們取名：title

3、指令碼檔案 的命名規則

一般使用指令碼功能的英文小寫縮寫命名： 
實際模組： 
例如： 
廣告條的JavaScript檔名為ad.js 
彈出視窗的JavaScript檔名為pop.js 
共用模組： 
js檔名;英文命名，字尾js，共用common,js 
外部資源： 
jQuery.min.js 
jquery.date.js 
動態語言檔案命名原則：見名知意 
以性質描述，描述可以有多個單詞，用“”隔開，性質一般是該頁面的概要 
register_form.aspx 
register_post.aspx 
topic_lock.aspx

4、檔案存放位置規範

資料夾說明： 
flash存放flash檔案 
images存放圖片檔案‘ 
Inc存放include檔案 
library存放DW庫檔案 
media存放多媒體檔案 
script存放JavaScript指令碼 
css存放css檔案

5、css的3中基本型別

css 
css指層疊樣式表 
樣式通常儲存在樣式表中 
把樣式新增到html4.0中，是為了解決內容表現分離的問題 
外部樣式表可以極大的提高工作效率 
外部樣式表通常儲存在css檔案中 
多個樣式定義可層疊為一

1、重新定義html樣式 
影響全部的被設定標籤樣式 
用於統一網頁中某一標籤的樣式定義 
2、連結狀態樣式 
連結狀態樣式為設計師對連結不同狀態設定特殊樣式，影響被使用樣本區域中的連結 
a.nav:link(中間無空格) 、.nav a:link  
第一種只能修飾所有包含有<a>標籤  
第二種可以修飾所有包含有<a>標籤的其他標籤 
3、自定義樣式 
樣式為設計師自定義的新css樣式，影響被使用本樣式的區域，用於完成網頁中區域性的樣式設定。 
樣式名：”.” + “相應樣式效果描述的單詞或縮寫”例如：”.shadow” 
文字樣式名 “.no”+”字號”+”行距”+”顏色縮寫” 例如：”.no12 ” “.no12_24 “

6、class與ID的使用規範

區別： 
ID在頁面中有且只能有一個。所以使用ID表示的css樣式只能表示一個元素的樣式 
class在一個頁面中可以有多個，也就是說定義一個css樣式後，可以有多個元素引用這個class 
書寫方式： 
id的書寫樣式：#title{font-size:18px;color:#333;} 
class的書寫方式：.title{font-size:18px;color:#333;} 
命名注意： 
1、大的框架比如說header/footer/wrapper/left/right之類的由設計框架之人統一命名。 
其他樣式名稱由小寫英文&數字&_來命名，避免使用中文拼音，儘量使用簡易的單片語合； 
總之，命名要語義化，簡明化。

7、css的命名規範

意義： 
規範的命名有助於提升團隊開發效率 
規範的命名有助於後期產品的維護 
規範的命名有助於後期的二次開發 

8、head區域程式碼規範

必須加入的標籤： 
搜尋時候使用的關鍵字：

   <meta name="keywords"（關鍵字必須這麼寫） content="xxxx,xxxx,xxxx,xxxx"（裡面填寫搜尋關鍵字）>

• 1

css

 <link href=".../css/style.css" rel="stylesheet" type="text/css"></link>

• 1

網頁顯示字符集： 
簡體中文： 

<meta http-equiv="content" content="text/html;charset=gb2312"/> 

繁體中文： 

<meta http-equiv="content" content="text/html;charset=utf-8"> 

英語： 

<meta http-equiv="content" content="text/html;charset=utf-8"> 

網頁標題： 

<title> 河北工程大學孟佳 </title> 

可選加入的標籤： 
公司的版權註釋 

<!---the site is designed by maiziedu 09/2015 ---> 

網頁製作者資訊 

網站簡介

設定網頁的到期時間。網頁一旦過期，必須到伺服器上重新調閱 

<meta http-equiv="expires" content="wed,26 Fed 1997 08:21 GMT"> 

禁止瀏覽器從本地機的快取中調閱頁面內容

<meta http-equiv="pragma" content="no-cache">

• 1

用來防止別人在框架裡呼叫你的頁面

<meta http-equiv="window-target" content="_top">

• 1

自動跳轉 //例如註冊後跳轉

<meta http-equiv="Refresh" content="5" url=http://www.baidu.com">

• 1

網頁搜尋機器人嚮導。用來告訴機器人哪些頁面需要索引，哪些頁面不需要索引 //搜尋引擎 
收藏夾圖示 
所有的JavaScript的呼叫盡量採取外部呼叫

9、字型規範

在設定字型樣式時對於文字字號樣式和行間距應必須使用css樣式表。 
禁止在頁面中出現<font size=?>標記

字型大小： 
在網頁中應首選使用宋體。英文和數字首選使用verdana和Arial兩種字型。一般使用中文宋體的9pt和11pt或者12px和14.7px這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7的字號比較合適。 
為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請儘量不要使用
來人工干預分段 
不同語種的文字之間應該有一個半形空格，但避頭的符號之前和避尾的符號除外，漢字之間的標點要用全形標點，英文字母和數字周圍的括號應該使用半形括號。 
請不要在網頁中國連續出現多餘一個的也儘量少使用全形空格（英文字符集下，全形空格會變成亂碼），空白應儘量使用text-indent，pandding,margin，hspace,vspace以及透明的GIF圖片來實現。

行距建議用百分比來定義，常用的兩個行距值時line-height：120%/150% 
排版中我們經常會遇到需要進行首行縮排的處理，不要使用或者全形空格來達到效果，規範的做法是在樣式表中定義p{text-indent:2em;}然後給每一段加上一個<p> 
標記，注意，一般情況下，請不要省略</p>結束標記。

10、連線和表格使用規範

連結： 
1、網站中連結路徑全部採用相對路徑 
2、一般連結到某一目錄下的預設檔案的連線路徑不必寫全名 
例如：<a href="aboutus/index.html">而應該這樣：<a href="aboutus/"> 
3、在瀏覽器裡，當我們點選空連線時，他會自動將當前頁面重置到首端，從而影響使用者正常的閱讀內容，我們用程式碼 
“JavaScript：void(null)”代替原來的“#”標記 
表格： 
1、儘量避免表格巢狀過多 
後果會對瀏覽器載入延長時間，帶來不友好的使用者體驗 
2、在寫<table>互相巢狀時，嚴格按照的規範，對於單獨的一個<table>來說，<table><tr>對齊，<td>縮排兩個半形空格， 
<td>中如果還有巢狀的表格,<table>也縮排兩個半形空格。如果結束標記應該與<td>處於同一行，不要換行。

11、下載和瀏覽速度控制

意義： 
考慮下載速度，以及頁面瀏覽速度是web前端必須考慮的。頁面的瀏覽速度越快，使用者體驗效果越好。 
檔案下載可以通過a標籤的href指向路徑直接實現 
圖片下載則直接在網頁中展示。如何解決？asp.net輸出檔案流的形式可以直接下載，後臺實現。jsp 
下載例項：

 <h1>通過連線下載檔案</h1>
<a href="/day06/download/cors.zip">壓縮包</a>
<a href=''day06/download/1.png ''>圖片</a>
<h1>通過連線下載檔案</h1>
<a href="/day06/ServletDownLoad?filename=cors.zip">壓縮包</a>
<a href=''day06/ServletDownLoad?filename=1.png ''>圖片</a>

• 1
• 2
• 3
• 4
• 5
• 6

注意規範： 
1、首頁flash網頁大小應限定在200k以下，儘可能的使用向量圖形和action來減小動畫大小。 
2、非首頁靜態頁面含圖片大小應限定在70k左右，儘可能的使用背景顏色替換大塊同色圖片。 
能夠用背景色替代圖片儘量用背景色，儘量且小圖片進行平鋪

12、巢狀include和iframe

說明： 
頁面巢狀在另一個頁面中 
意義： 
如果多個頁面都需要這個模組，可以才有巢狀的方式，方便後期的維護也就是維護一個頁面，就可以同時改變多個頁面的效果 
include 
include是ssi（server side include） 
jsp <%@include file=”…/inc/index_top.jsp”%> 
htm <!--#include file="b.htm"> 
iframe 
在html中想達到巢狀的效果，可以使用iframe標籤

<iframe src="111" frameborder=0 border=0 width=300  height=300 src="b.htm"></iframe>

• 1

html與XHTML之間的差異在html4.1strictDTD和XHTML1.0strictDTD中，不支援iframe元素

13、巢狀Alt和Title

相同點： 
提示性語言標籤 
不同點： 
alt：一般是對圖片進行提示描述 
title：一般對文字標籤進行描述 
例項：

 <p title="給連結文字提示"> 文字</p>
<a href="#" title="給連結文字提示">文字</a>
<img src="圖片.gif" alt="給圖片提示">

• 1
• 2
• 3

14、瀏覽器快取使用注意

什麼是快取？ 
快取就是資料交換的緩衝區（稱作cache），當某一硬體要讀取資料時，首先會從快取中查到需要的資料，如果找到了就直接執行，找不到的話就從記憶體中找，由於快取的執行速度比記憶體快得多，故快取的作用就是幫助硬體更快的執行。 
快取的原理： 

快取的意義： 
可以提高瀏覽器瀏覽頁面的效率 
快取可能帶來哪些後果？ 
對於一些設計使用者重要信心的頁面如果被快取則很危險 
佔用大量硬碟資源 
設定網頁不被快取

<meta http-equiv="pragma" content="no-cache">

• 1

<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">

• 1

<meta http-equiv="expires" content="wed,26 Feb 1997 08:21:57 GMT ">//有效期 

• 1

15、瀏覽器相容性問題

什麼是瀏覽器的相容問題？ 
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一程式碼有不同的解析，造成頁面的顯示效果不統一的情況。 
問題1 
不同瀏覽器的標籤預設的外補丁和內補丁不同 
問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin和padding差異較大（自己會有距離要加樣式控制 ）。 
碰到頻率：100% 
解決方案：css裡 *{margin:0;padding:0;} 
備註：這個是最常見的也是最容易解決的一個瀏覽器的問題，幾乎所有的css檔案開頭都會用萬用字元*來設定各個外標籤的補丁是0 
問題2： 
瀏覽器相容性 問題二：塊屬性標籤float後，又有橫行margin情況下，在ie6顯示margin比設定的大 
問題症狀： 
常見症狀是ie6中後面的一塊被頂到下一行 
碰到頻率：90%(稍微複雜點都會碰到，float佈局最常見的瀏覽器相容性問題) 
解決方案： 
在float的標籤樣式控制中加入display：inline;將其轉化成行內屬性 
備註： 
我們最常用的就是div+css佈局，而div就是一個典型的塊屬性標籤，橫向佈局的時候我們通常都是用div float實現的，橫向的間距設定如果用margin實現，這就是一個必然會碰到的相容性 問題哦 
問題3： 
瀏覽器相容性 問題三： 
設定較小高度標籤（一般小於10px），在ie6.ie7，遨遊中高度超出自己設定高度 
為題症狀： 
ie6、7和遨遊裡這個標籤的高度不受控制，超出自己設定的高度。 
碰到頻率：60% 
解決方案： 
給超出高度的標籤設定 overflow：hidden；或者設定行高line-height小於你設定的高度 
備註： 
這種情況一般出現在我們設定小圓角背景的標籤裡。出現這個問題的原因是ie8之前的瀏覽器都會給標籤一個最小預設行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。 
問題4： 
瀏覽器相容性 問題四： 
水平元素居中問題 
1、FF：margin：0 auto //外間距上下為零左右自動 
IE：父級{text-align：center；} 
問題5： 
const問題 
const char 
var;//說明var這個變數現在變成只讀變數， 任何對var修改的語句都被編譯器視為錯誤，不能修改。 
說明：Firefox下可以使用const關鍵字或var關鍵字來定義常量； 
IE下，只能使用var關鍵字來定義常量。 
解決方法： 
統一使用var關鍵字來定義常量 
問題6： 
模態和非模態視窗問題 
說明：ie下可以通過showModalDialog和showModallessDialog開啟模態和非模態視窗； 
解決方法： 
直接使用window.open（pageURL，name，parameters）方式開啟新視窗。 
如果需要將子視窗中的引數傳遞迴父視窗，可以在子視窗中使用window.openner來訪 
例如： 
var parWin = window.opner; 
parWin.document.getElementById(”Aqing’).value=”Aqing”; 
問題7： 
float的延續性 
說明：在ie瀏覽器中，如果使用float設定元素浮動對齊。如果不關閉浮動，將會對後面的元素標籤延續浮動。 
解決方法;在設定float的元素後面加上clear：both，關閉浮動。

16、Banner和Logo

banner 
橫幅廣告(網路廣告的主要形式, 一般使用GIF格式的影象檔案,可以使用靜態圖形,也可用多幀影象拼接為動畫影象) 
推薦網站：http://www.zhaoxi.net/ 
logo 
為了便於INTERNET上資訊的傳播，一個統一的國際標準是需要的。實際上已經有了這樣的一整套標準。 
其中關於網站的LOGO，目前有三種規格： 
88*31 這是網際網路上最普遍的LOGO規格。 
120*60 這種規格用於一般大小的LOGO。  
120*90 這種規格用於大型LOGO。

17、JavaScript規範

書寫： 
書寫過程中,每行程式碼結束必須有分號; 原則上所有功能均根據XXX專案需求原生開發, 以避免網上down下來的程式碼造成的程式碼汙染(沉冗程式碼 || 與現有程式碼衝突 ||…); 
變數命名格式 
變數命名: 駝峰式命名. 原生JavaScript變數要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變數要求首字元為’_’, 其他與原生JavaScript規則相同, 如: _iTaoLun; 另,要求變數集中宣告,避免全域性變數. 
函式命名: 
首字母小寫駝峰式命名. 如iTaoLun(); 
JavaScript檔案 
JavaScript程式應獨立儲存在字尾名為.js的檔案中。應儘量減少在HTML 中的JavaScript程式碼，因為存在與HTML中的JavaScript程式碼會明顯增加檔案大小，且不能對其進行快取和壓縮。 
filename.js或JavaScript的程式碼應儘量放到body的後面。 這樣可以減少因為載入指令碼而造成其他頁面內容載入也被延遲的問題。 
縮排 
縮排的單位為四個空格。避免使用Tab鍵來縮排。 因為始終沒有個統一的Tab長短標準。雖然使用空格會增加檔案的大小， 但在區域網中幾乎可以忽略，且在最小化過程中也可被消除掉。 
函式宣告 
所有的函式在使用前進行宣告。內函式的宣告跟在var語句的後面. 這樣可以幫助判斷哪些變數是在函式範圍內的。 
變數宣告 
所有的變數必須在使用前通過var進行宣告。JavaScript並不強制必須這麼做， 但這麼做可以讓程式易於閱讀，且也容易發現那些沒宣告的變數(它們會被編譯成全域性變數)。 將var語句放在函式的首部。最好把每個變數的宣告語句單獨放到一行，並加上註釋說明。 
var　currentEntry;//當前選擇項 var　level;//縮排程度　 var size; // 表格大小 
儘量減少全域性變數的使用。不要讓區域性變數覆蓋全域性變數。 
{} 和[] 
使用{}代替new　Object()。使用[]代替new　Array()。這樣便於書寫且能提高一點執行效率。 
當成員名是一組有 序的數字時使用陣列來儲存資料。當成員名是無規律的字串或其他時使用物件來儲存資料。

1. event.srcElement問題 //找到觸發事件的源物件 
問題說明：I.E.下，even物件有srcElement屬性，但是沒有target屬性； Firefox下，even物件有target屬性，但是沒有srcElement屬性。 
解決方法：使用 var obj=event.target||window.event.srcElement; 
2.parentElement問題 
firefox與I.E.的父元素(parentElement)的區別 
IE：obj.parentElement 
firefox：obj.parentNode 
解決方法: 因為firefox與I.E.都支援DOM,因此使用obj.parentNode是不錯選擇.

18、圖片的使用規範

存放位置 
所有頁面元素類圖片均放入images資料夾, 測試用圖片放於img/demoimg資料夾 
格式 
圖片格式僅限於gif || png || jpg; 
命名 
命名全部用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字元；儘量用易懂的詞彙, 便於團隊其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif; 
效能 
運用css sprite技術集中小的背景圖或圖示, 減小頁面http請求,但注意,請務必在對應的spritepsd源圖中劃參考線, 並儲存至img/images目錄下.

CSSSprites 
在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。 
我們經常看到一個頁面上有很多小圖示，可是當我們用工具去開啟時卻發現 
 
這些小圖示其實在一張圖片上，這是怎麼實現的呢？ 
這當中用到了CSS Sprites切圖技術。 
CSS Sprites其實就是把網頁中一些圖示整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。 
優點：減少網頁http請求，提高頁面效能，降低伺服器負載；檔案命名減少麻煩。 
缺點：定位繁瑣，佈局固定，降低網頁彈性。 
 
Css Sprite使用方法： 
1、將用到的背景圖片壓縮為zip格式的壓縮包 
2、用Css圖片拼合生成器將其拼合成一張圖片，然後下載該圖片 
3、拼合完成後會生成相應的Css規則，該檔案定位了每個圖片的位置及圖片的寬度和高度 
4、在Css樣式中定位背景圖片，例如： 
例子：

ul.share li{float:left;}  
ul.share li a{display:block;width:25px;height:25px;text-indent:-9999px;}  
a.renren{background:url(../images/share.gif) 0 0 no-repeat;}  
a.kaixin{background:url(../images/share.gif) -25px 0 no-repeat;}  
a.sina{background:url(../images/share.gif) -50px 0 no-repeat;}  
a.douban{background:url(../images/share.gif) -75px 0 no-repeat;}  
a.googleBM{background:url(../images/share.gif) -100px 0 no-repeat;}  
<ul class="share">  
<li>分享到：</li>  
<li><a class="renren" href="/cuiying_2007/blog/ " title="">人人網</a></li>  
<li><a class="kaixin" href="/cuiying_2007/blog/ " title="">開心網</a></li>  
<li><a class="sina" href="/cuiying_2007/blog/ " title="">新浪微博</a></li>  
<li><a class="douban" href="/cuiying_2007/blog/ " title="">豆瓣</a></li>  
<li><a class="googleBM" href="/cuiying_2007/blog/ " title="">谷歌書籤</a></li>  
</ul>  

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

19、註釋規範

html註釋: 
註釋格式 , ‘–’只能在註釋的始末位置,不可置入註釋文字區域; 
Css註釋: 
註釋格式 /這兒是註釋/; 
javascript註釋: 
單行：單行註釋使用//這兒是單行註釋 , 
多行：多行註釋使用 /* 這兒有多行註釋 */;

20、瀏覽器相容性 CSS hack

css hack 
CSS hack的目的就是使你的CSS程式碼相容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本**的瀏覽器定製編寫不同的CSS效果。 
例項：** 
div{ 
background:green;/* forfirefox */ 
background:red;/*for IE6/(bothIE6&&IE7) 
} 
效果：我在IE6中看到是紅色的，在firefox中看到是綠色的。 
上面的css在firefox中，它是認識不了後面的那個帶星號的東西是什麼的， 於是將它過濾掉，不予理睬，解析得到的結果是:div{background:green}, 於是理所當然這個div的背景是綠色的。 在IE6中呢，它兩個background都能識別出來， 它解析得到的結果是:div{background:green;*background:red;} ,於是根據優先順序別，處在後面的red的優先順序高，於是當然這個div的背景顏色就是紅色的了。

區別不同瀏覽器，CSS hack寫法: 
區別IE6與FF：background:orange;*background:blue;  
區別IE6與IE7：background:green!important;background:blue;  
區別IE7與FF：background:orange;*background:green;  
區別FF，IE7，IE6：background:orange;*background:green;_background:blue; background:orange;*background:green!important;*background:blue;  
 
 

21 、開發中的其他開發規範總結

開發環境 
軟體版本的選擇：1.應選擇熱門的開發軟體2.選擇成熟的開發工具和技術 
開發文件的約束 
其他： 
1.開發過程中嚴格分工完成頁面，以提高css重用率，避免重複開發 
2.減小沉冗程式碼,書寫所有人都可以看的懂的程式碼. 簡潔易懂是一種美德.為使用者著想,為伺服器著想. 
如何才能成為前端開發高手？ 
1.要多練，不斷總結 
2.看到別人寫的好的程式碼要多研究研究 
3.要勤收集素材