1：通用規范
tab鍵用兩個空格代替
因為在不同系統的編輯工具對tab解析不一樣，windows下的tab鍵是占四個空格的位置，而在linux下會變成占八個空格的位置（除非你? 自己設定了tab鍵所占的位置長度）。
每個樣式屬性或者每句代碼后加 ";"
方便壓縮工具"斷句"。
HTML規范
HTML5 doctype
為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。
:::html
2：字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（約定一致采用UTF-8編碼）。
:::html
3：文檔模板
:::htmlSample page頁頭主體頁尾// 你的代碼
4：IE 兼容模式
IE 支持通過特定的 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
:::html
5：元素
html5元素
section 表示文檔中的節、區段，可以和h1-h6一起來顯示文檔結構
article 表示一塊比較獨立的內容或者主題內容，塊級元素，比如blog的內容，報紙的文章
aside 表示article以外的內容，而且應該和article有一定的關系，塊級元素
hgroup 表示一個文檔、區段(section)的標題組合
header 表示頁眉,頁頭
footer 表示頁腳
nav 表示導航內容
figure 表示以相對獨立的或外引的元素，如img video
figcaption 表示 figure內容的標題
:::html
文檔主標題
文檔副標題
ExampleExample image6：結構性元素
p 表示段落。只能包含內聯元素，不能包含塊級元素;
div 本身無特殊含義，可用于布局。幾乎可以包含任何元素;
br 表示換行符;
hr 表示水平分割線;
h1-h6 表示標題。其中 h1 用于表示當前頁面最重要的內容的標題;
blockquote 表示引用，可以包含多個段落。請勿純粹為了縮進而使用 blockquote，大部分瀏覽器默認將 blockquote 渲染為帶有左右縮進;
pre 表示一段格式化好的文本;
7：頭部元素
title 每個頁面必須有且僅有一個 title 元素;
base 可用場景：首頁、頻道等大部分鏈接都為新窗口打開的頁面;
link link 用于引入 css 資源時，可省去 media(默認為all) 和 type(默認為text/css) 屬性;
style type 默認為 text/css，可以省去;
script type 屬性可以省去; 不贊成使用lang屬性; 不要使用古老的這種hack腳本, 它用于阻止第一代瀏覽器（Netscape 1和Mosaic）將腳本顯示成文字;
noscript 在用戶代理不支持 JavaScript 的情況下提供說明;
8：文本元素
a a 存在 href 屬性時表示鏈接，無 href 屬性但有 name 屬性表示錨點;
em,strong em 表示句意強調，加與不加會引起語義變化，可用于表示不同的心情或語調; strong 表示重要性強調，可用于局部或全局，strong強調的是重要性，不會改變句意;
abbr 表示縮寫;
sub,sup 主要用于數學和化學公式，sup還可用于腳注;
span 本身無特殊含義;
ins,del 分別表示從文檔中增加(插入)和刪除
9：媒體元素
img 請勿將img元素作為定位布局的工具，不要用他顯示空白圖片; 必要時給img元素增加alt屬性;
object 可以用來插入Flash;
10：列表元素
dl 表示關聯列表，dd是對dt的解釋; dt和dd的對應關系比較隨意：一個dt對應多個dd、多個dt對應一個dd、多個dt對應多個dd，都合法; 可用于名詞/單詞解釋、日程列表、站點目錄;
ul 表示無序列表;
ol 表示有序列表, 可用于排行榜等;
li 表示列表項，必須是ul/ol的子元素;
11：表單元素
推薦使用 button 代替 input，但必須聲明 type;
表單元素的 name 不能設定為 action, enctype, method, novalidate, target, submit 會導致表單提交混亂
12：屬性順序
HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
class
id、name
data-*
src、for、type、href
title、alt
aria-*、role
class用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。如：
:::html Example link
13：文件和目錄命名約定
一律小寫，必須是英文單詞或者漢語拼音，以英語單詞優先，多個單詞以連字符 ( - ) 連接。只能出現小寫引文字母，數字和連字符。
很多瀏覽器會將含有這些詞的作為廣告攔截： ad、ads、adv、banner、sponsor、gg、guangg、guanggao等 頁面中盡量避免采用以上詞匯來命名。
該命令規范適用于所有前端維護的內容和相關目錄。(html, css, js, png, gif, jpg, ico)。
14：空格/標簽/注釋
用兩個空格來代替制表符（tab） —— 這是唯一能保證在所有環境下獲得一致展現的方法；
嵌套元素應當縮進一次 —— 即兩個空格；
對于屬性的定義，確保全部使用雙引號，絕不要使用單引號；
不要省略可選的結束標簽，如：,；
習慣性書寫注釋，方便日后維護；
15：文件編碼約定
所有文件統一采用UTF-8無BOM編碼。換行格式為 unix 格式。
16：id和class命名約定
id 和 class 的命名基本原則:內容優先，表現為輔。首先根據內容來命名，如:#header,#footer,.main-nav.如根據內容無法找到合適的命名，可以再結合表現進行命名，如：col-main,col-sub,col-extra,blue-box
id 和 class 的名稱一律小寫，多個單詞以連字符連接，如：main-wrap
id 和 class 的名稱只能出現，小寫字母，數字和連字符( - )(js鉤子除外)
id 和 class 的名稱盡量使用英文單詞命名,如確實找不到合適的單詞，可以使用拼音，如：zhidao-com
在不影響語意的情況下，id 和 class 的名稱 可以適當使用縮寫，如:col,nav,hd,bd,fd(縮寫只用來表示結構，不允許寫任何樣式)。不要自造縮寫。
class 對于選中命名.selected;對于hover，支持偽類使用:hover，不支持的使用.hover，隱藏使用.hide。
id 和 class 的選擇，如果只使用一次，使用id,如果使用多次使用class，如果需要和js交互，使用id,如果需要交互并且頁面中有大量重復，請參見下一條。
對于作為js鉤子的 id 和 class 命名規則為以”J_“開頭(J,象形鉤子的形狀)，后面加上原應有的命名，在使用class的時候需要放在最前面。如:class="J_tab-content some-mod-content"。（注意：鉤子，不允許在css中定義任何的樣式效果）
很多瀏覽器會將含有這些詞的作為廣告攔截：ad、ads、adv、banner、sponsor、gg、guangg、guanggao等 頁面中盡量避免采用以上詞匯來命名。
17：文件引用
頁面中不允許出現css內容(包括行內樣式和style)
每個頁面中至多包括3個css文件，1個 產品級 1個模塊級 1個頁面級別
18：選擇器
命名比較短的詞，或者縮寫的不允許直接定義樣式，如：.title,.hd,.bd,.body.必須用上級節點進行限定,如：.recommend-mod .title
19：通用結構
頁面中的塊采用如下結構
:::html Tilte contents footer
沒有內容的部分可以省略，其中用來表示結構的 mod hd bd ft 不允許直接定義樣式（避免嵌套帶來樣式問題）,需要定義樣式的時候需要另外增加class以控制樣式如：
:::html? ? ? Tilte ? contents? footer
當2個以上的結構不存在的時候可以不是采用此結構，如，沒有hd和ft,bd也可以省略
20：多選擇器規則之間換行
當樣式針對多個選擇器時每個選擇器占一行
/推薦的寫法/
a.btn,
input.btn,
input[type="button"] {
......
}
z-index
自己寫的z-index的值不能超過 100 (通用組的除外)
頁面中的元素內容的z-index不能超過10(popup poptip除外)，需要按照內容定義1 2 3 4不允許直接使用如1000，9999
popup poptip的z-index需要按照內容使用 99以下，10以上的值（11,12,13，也可以小于10），不允許直接使用1000，9999之類大值
現在通用z-index記錄,使用時請避開和靈活使用
z-index使用者類型
<10page-content頁面級別
>10, <99page-popup頁面級別
20usercard用戶名片common通用
MSG氣泡消息common通用
Dialog-Covercommon通用
Dialogcommon通用
css規范
css屬性順序
顯示屬性；
元素位置；
元素屬性；
元素內容屬性；
css書寫順序：
:::html例子:.header{/* 顯示屬性 */display|| visibilitylist-stylepositiontop|| right || bottom || leftz-indexclearfloat/* 自身屬性 */widthmax-width|| min-widthheightmax-height|| min-heightoverflow|| clipmarginpaddingoutlineborderbackground/* 文本屬性 */colorfonttext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorcontent}
css寫法
小圖片（必須）sprite 合并
每個樣式屬性后加 ";"
禁止將樣式寫為單行
如
.hotel-content {margin: 10px; background-color: #efefef;}
單行顯示不好注釋，不好備注，這應該是壓縮工具的活兒~
禁止使用行內（inline）樣式
禁止使用"*"來選擇元素
/*別這樣寫*/
* {
margin: 0;
padding: 0;
}
這樣寫是沒有必要的，一些元素在瀏覽器中默認有margin或padding值，但是只是部分元素，沒有必要將所有元素的margin、padding值都置為0。
帶前綴的屬性
當使用特定瀏覽器帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。如：
.selector{-webkit-box-shadow:01px2pxrgba(0,0,0,.15);box-shadow:01px2pxrgba(0,0,0,.15);}
2122：優化css選擇器
css選擇器是從右邊到左邊進行匹配的。如：
#headera{color:#444;}
瀏覽器會檢查整個文檔中的所有鏈接，然后瀏覽器并不僅僅檢查每個鏈接的父元素，還要遍歷文檔樹去查找id為header的祖先元素，如果被評估的鏈接不是 header 的后代，那么瀏覽器就要向上一級遍歷知道文檔的根節點。針對此問題，有以下幾個解決方法：
22.避免使用通配規則
除了傳統意義的通配選擇符之外還包括相鄰兄弟選擇符, 子選擇符, 后代選擇符和屬性選擇符。推薦id、class和標簽選擇符。
不要限定id選擇符
頁面中指定一個id只能對應一個元素，所以沒有必要添加額外添加限定符，如：div#header，應該簡化為：#header（提權的除外）。
不要限定類選擇器
不要用具體的標簽限定類選擇符，而是根據實際情況對類名進行擴展。例如：ul.recommend，改成.recommend-list或者.list-recommend。
讓規則越具體越好
盡量不要使用ul li a這樣長的選擇符，最好使用.list-anchor之類的選擇符。
避免使用后代選擇符
通常處理后代選擇符開銷最高，使用字選擇符更高效，最好使用下一條代替。
避免使用標簽子選擇符
如果有如：#header > li > a，這樣基于子標簽的自選擇符，那么應該使用一個class來關聯每個元素如：.header-anchor。盡量使用具體的類代替子選擇符。
前端規范之JavaScript
23.命名規范
文件命名可讀性強
文件夾、文件的命名與命名空間應能代表代碼功能，可讀性強。
函數命名
駝峰命名方式
:::javascriptfunction funName() {}
常量
大寫
:::javascriptvarVARIABLENAME
變量
駝峰命名
:::javascriptvar variableName
24.編碼規則
排版縮進
采用統一的縮進方式排版代碼。縮進為2個ASCII空格
:::javascriptIf(condition1 || condition2) {? action1;}elseif(condition3 && condition4) { action2;}elseif(condition5? ? ? && condition6? ? ? && condition7? ? ? && condition8) { action2;}else{defaultaction;}
關鍵詞、條件括弧后面使用空格；運算操作符號兩側使用空格；語句分割符‘,’后面使用空格
:::javascriptvar name[空格]=[空格]value;if[空格](a,[空格]b) {}
左大括號"{"可以居行尾，也可寫在下行首（獨自一行）；右大括號"}"單獨占一行，居行首
:::javascriptif (a && b) {}
------------------------if (a && b) {}
句末必須用分號結尾
:::javascriptvar fn = function () {};//這里沒有分號的話，腳本解析器會報錯！！！(function () {alert(1);})();
單行過長應在適當位置予以換行,增強可讀性
if 語句括號中的條件若過多過長，應予以折行；折行后，||、&& 等符號應與 “(” 后的第一個字母縱向對齊
:::javascriptif (condition1&& condition2|| condition3) {}
if、while、for、do語句的執行體總是用"{"和"}"括起來，即使在其結構體內只有一條語句
:::javascriptif (s==100) {alert('shit!');}
語法意義相互獨立的代碼將用空行分隔
:::javascripta++; b++;? //！！！避免同一行書寫兩個表達式if (a > b) {value = a;? //行間不用空行間隔}var variableName = value;? //與上一代碼行使用空行間隔
25.注釋規范
文件注釋
文件注釋要標明作者、文件版本、創建/修改時間、重大版本修改記錄
函數描述
文件版本、創建或者修改時間、功能、作者
:::javascript/** *@fileImage.js *@description功能詳細描述 */
函數或者類等都要添加頭描述
:::javascript/** * 簡述 * * 功能詳細描述 * *@param arg1 參數1 *@param arg2 參數2，默認為0 *@return 看xxx是否成功 */functionfooFunction(arg1, arg2){ }
操作注釋
單行注釋,寫在代碼上面
多行注釋
:::javascript/**注釋操作說明*/
for( var i = 0; i < obj.lenght; i++) {
}
注釋標簽參考
標簽描述
@addon把一個函數標記為另一個函數的擴張，另一個函數的定義不在源文件中。
@argument用大括號中的自變量類型描述一個自變量。
@author函數/類作者的姓名。
@base如果類是繼承得來，定義提供的類名稱。
@class用來給一個類提供描述，不能用于構造器的文檔中。
@constructor描述一個類的構造器。
@deprecated表示函數/類已被忽略。
@exception描述函數/類產生的一個錯誤。
@exec
@extends表示派生出當前類的另一個類。
@fileoverview表示文檔塊將用于描述當前文件。這個標簽應該放在其它任何標簽之前。
@final指出函數/類。
@ignore讓jsdoc忽視隨后的代碼。
@link類似于@link標簽，用于連接許多其它頁面。
@member定義隨后的函數為提供的類名稱的一個成員。
@param用大括號中的參數類型描述一個參數。
@private表示函數/類為私有，不應包含在生成的文檔中。
@requires表示需要另一個函數/類。
@return描述一個函數的返回值。
@returns描述一個函數的返回值。
@see連接到另一個函數/類。
@throws描述函數/類可能產生的錯誤。
@type指定函數/成員的返回類型。
@version函數/類的版本號。
26.條件判斷的陷阱
在if判斷中，使用===作比較,避免掉入==造成的陷阱
在條件判斷時，這樣的一些值表示false：null，undefined，字符串''，數字0，NaN
而在==時，則會有一些讓人難以理解的陷阱,如：
(function(){varundefined;undefined==null;//true1==true;//true2==true;//false0==false;//true0=='';//trueNaN==NaN;//false[]==false;//true[]==![];//true})();
對于不同類型的==判斷，有這樣一些規則，順序自上而下：
1.undefined與null相等
2.一個是number一個是string時，會嘗試將string轉換為number
3.嘗試將boolean轉換為number，0或1
4.嘗試將Object轉換成number或string，取決于另外一個對比量的類型
所以，對于0、空字符串的判斷，建議使用===。===會先判斷兩邊的值類型，類型不匹配時為false。
27.簡單類型轉換
number to string的轉換，建議使用1 + ''或String(1)，不使用new String(1)或1.toString()的方式。
string to number的轉換，建議使用parseInt，必須顯式指定第二個參數的進制。下面的例子展示了不指定進制的風險：
parseInt('08');// 0parseInt('08',10);//8
float to integer的轉換，建議使用Math.floor/Math.round/Math.ceil方法，不使用parseInt。
28.字符串拼接
字符串拼接，應使用數組保存字符串片段，使用時調用join方法。避免使用+或+=的方式拼接較長的字符串，每個字符串都會使用一個小的內存片段，過多的內存片段會影響性能。如:
不好的拼接方式，+=varstr='';for(var i =0, len =list.length; i < len; i++) {str+='
29.獲取元素
獲取單個元素
通常，我們使用document.getElementById來獲取dom元素，避免使用document.all。document.getElementById是標準方法，兼容所有瀏覽器
ie瀏覽器會混淆元素的id和name屬性，document.getElementById可能獲得不期望的元素。在對元素的id與name屬性的命名需要非常小心，應使用不同的命名法。下面是一個name與id沖突的例子：
