規範說明
此為前端開發團隊遵循和約定的程式碼書寫規範，意在提升程式碼的規範性和可維護性。
基本準則
符合web標準, 語義化html, 結構表現行為分離, 相容性優良. 頁面性能方面, 程式碼要求簡潔明了有序, 盡可能的減小伺服器負載, 保證最快的解析速度。
總規範
1.忽略（Omit）協定：如background: url(http://www.google.com/images/example); 應該寫background: url(//www.google.com/images/example);以方便http與https協議切換，除非必須使用某個協議
2.書寫時利用IDE實現層次分明的縮排。 tab鍵用四個空格代替。
因為在不同系統的編輯工具對tab解析不一樣，windows下的tab鍵是佔四個空格的位置，而在linux下會變成佔八個空格的位置（除非你自己設定了tab鍵所佔的位置長度）。
如sublime text，在這個工具中可以對tab鍵進行設定。
3.標籤屬性使用小寫
4.尾部不要留有空格，以防diff
5.使用UTF-8 (no BOM)，文件中也加入<meta charset=”utf-8″>
6.檔案命名統一使用小寫”.js”，同時推薦”-”而不是”_”
7.TODO(contact) 以及TODO: action item，不要使用@@
HTML 細化規範
1.使用html5的規範<!DOCTYPE html>
2.<img>標籤預設預設格式：<img src="xxx.png" alt="預設時文字" /> 避免src="" 問題
3.<a>標籤預設格式：<a href="###" title="連結名稱">xxx</> 註：target="_blank" 依需求決定
4.<a>標籤預留連結佔位符使用###，請參閱：a標籤佔位符問題
5.書寫連結地址時, 必須避免重定向，例如：href=”http://itaolun.com/”, 即須在URL地址後面加上“/”
6.所有標籤需符合XHTML標準閉合
7.一律統一標籤結尾斜線的書寫形式：<br /> <hr /> 注意之間空格
8.避免使用已過時標籤，如：<b> <u> <i> 而用<strong> <em>等代替
9.使用data-xxx來新增自訂數據，如：<input data-xxx="yyy"/>
10.避免使用style="xxx:xxx;"的內聯樣式表特殊符號使用參考HTML 符號實體
11.必須為含有描述性表單元素(input, textarea)加上label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>必須寫成:< p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>
CSS 細化規範
1. 每個樣式屬性後加上";"
方便壓縮工具"斷句"。
2. Class命名，採用” - “[減號連接符] 對class中的字母分隔：
用"-"隔開比使用駝峰是更清晰。
產品線-產品-模組-子模組，命名的時候也可以使用這種方式
ID: 小駝峰式命名法如：
firstName topBoxList footerCopyright
3. 空格的使用，以下規則執行：
.hotel-content {
font-weight: bold;
}選擇器與{ 之前要有空格屬性名的: 後面要有空格屬性名的: 前（禁止）加空格一個原因是美觀，其次IE 6存在一個bug， 戳bug
4. （推薦）屬性的書寫順序, 舉例:
.hotel-content {
/* 定位*/
display: block;
position: absolute;
left: 0;
top: 0;
/* 盒子模型*/
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid black;
/ *其他* /
color: #efefef;
}定位相關, 常見的有：display position left top float 等盒子模型相關, 常見的有：width height margin padding border 等其他屬性
依照這樣的順序書寫可見提升瀏覽器渲染dom的效能簡單舉個例子，網頁中的圖片，如果沒有設定width和height，在圖片載入之前，他所佔的空間為0，但是當他載入完畢之後，那塊為0的空間突然被撐開了，這樣會導致，他下面的元素重新排列和渲染，造成重繪（repaint）和回流（reflow）。我們在寫css的時候，把元素的定位放在前頭，首先讓瀏覽器知道該元素是在文本流內還是外，具體在頁面的哪個部位，接著讓瀏覽器知道他們的寬度和高度，border等這些佔用空間的屬性，其他的屬性都是在這個固定的區域內渲染的，差不多就是這個意思吧~
推薦文章：
Poll Results: How do you order your CSS properties?
http://www.mozilla.org/css/base/content.css
5. （建議）當編寫針對特定html結構的樣式時，使用元素名稱+ 類別名
/* 所有的nav都是針對ul所寫的*/
ul.nav {
.....
} ".a div"和".a div.b"，為什麼後者好？如果需求有所變化，在".a"下有多加了一個div，試問，開始的樣式是不是會影響後來的div啊~
6. （不建議）ie使用filter,（ 禁止）使用expression
這裡主要是效率問題，應該格外注意，要少用燒CPU的東西~
7. CSS註解以「/* */」表示，單行註解時，被註解物件與前後註解符各保留一個空格，且單獨佔一行；多行註解時，開始註解符號和結束註解符各佔一行。例如：
/* 註CSS */
/*
table {
border-collapse: collapse;
}
*/JS細化規範
1.換行
每行程式碼應少於120個字符，多於這個數量時，可以考慮換行，“.”或“+”這類操作符應放在行尾，換行後的代碼必須在換行前多一層縮進。
如果函數或方法中的參數較長，則要進行適當的劃分。
禁止在return關鍵字及要傳回的表達式之間換行。例如：
// 實際上是回傳的是undefined，不是1
function test() {
return
1;
} 2.程式碼行
禁止把多個片語句寫在一行中，即一行只寫一條語句。
if、for、do、while、switch、case、default、break、continue等語句自佔一行。
if、for、do、while等所有的迴圈體和判斷體的執行語句部分都需要用"{}"括起來，禁止省略花括號。例如：
// 錯誤的if (i < 5) i += 1;
// 正確的if (i < 5) {
i += 1
} 3.對齊<br />程式碼區塊的分界符{}，「{」跟隨在上一行，並且前邊有一空格隔開，「}」應獨佔一行並且位於同一列，同時與引用它們的語句左對齊。
在函數體的開始、類別的定義以及if、for、do、while、switch、case語句中的程式都要採用如上的縮排方式。
4.空格
關鍵字之後必須有空格，以突出關鍵字。
函數名稱、方法名稱與左括號「(」之間不能保留空格，例如：
// 錯誤的function getInfo () {
// code
}
// 正確的function getInfo() {
// code
}在宣告函數表達式時，function與左括號「(」之間無法保留空格，例如：
// 錯誤的var user = function () {
// code
}
// 正確的var user = function() {
// code
}逗號後面加空格。
賦值運算子、比較運算子、算術運算子、邏輯運算子、位元域運算子，如「=」、「+=」 「>=」、「<=」、「+」、「*」、「% 」、「&&」、「||」等二元運算子的前後應加空格。
"!"、"~"、"++"、"--"、"&"（地址運算子）等單目運算子前後不加空格。
"."、"[]"前後不加空格。
5.空行
在每個類別宣告之後、每個函數定義結束之後都要加空行。
在一個函數體內，邏揖上密切相關的語句之間不加空行，其它地方應加空行分隔。
6.使用嚴格的條件判斷符。用===代替==，用!==代替!=
7.避免額外的逗號。如：var arr = [1,2,3,]
8.語句必須都有分號結尾，除了for，function，if，switch，try，while。
9.左花括號置於行末，右花括號置於行首。
10.下面型別的物件不建議用new建構：new Number，new String，new Boolean，new Object(用{}取代)，new Array(用[]代替)。
11.陣列成員間的「,」後面需要保留一個空格。
12.禁止在js/json中使用javascript保留關鍵字詞命名，在IE中容易造成錯誤。關鍵字（break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while 、with），關鍵字（abstract、boolean、byte、char、class、con st、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、 volatile）。
13.建議使用“+”作為換行連接符，而不是使用“”。
14.提示訊息禁止使用概括籠統的語言描述，應該簡潔明了，看到信息立即能定位到錯誤，如提示用戶信息報錯用“該用戶不存在”，而不是用“後台返回數據有誤”、“網路超時」。