通用規(guī)范
tab鍵用兩個空格代替
因為在不同系統(tǒng)的編輯工具對tab解析不一樣掐松，windows下的tab鍵是占四個空格的位置众旗，而在linux下會變成占八個空格的位置（除非你 自己設(shè)定了tab鍵所占的位置長度）罢杉。
每個樣式屬性或者每句代碼后加 ";"
方便壓縮工具"斷句"。
HTML規(guī)范
HTML5 doctype
為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明贡歧，這樣能夠確保在每個瀏覽器中擁有一致的展現(xiàn)滩租。
:::html
字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式利朵。這樣做的好處是律想，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（約定一致采用UTF-8編碼）绍弟。
:::html
文檔模板
:::htmlSample page頁頭主體頁尾// 你的代碼
IE 兼容模式
IE 支持通過特定的 標簽來確定繪制當前頁面所應(yīng)該采用的 IE 版本技即。除非有強烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
:::html
元素
html5元素
section 表示文檔中的節(jié)辅愿、區(qū)段谤祖，可以和h1-h6一起來顯示文檔結(jié)構(gòu)
article 表示一塊比較獨立的內(nèi)容或者主題內(nèi)容，塊級元素，比如blog的內(nèi)容，報紙的文章
aside 表示article以外的內(nèi)容，而且應(yīng)該和article有一定的關(guān)系埃难，塊級元素
hgroup 表示一個文檔、區(qū)段(section)的標題組合
header 表示頁眉,頁頭
footer 表示頁腳
nav 表示導航內(nèi)容
figure 表示以相對獨立的或外引的元素涤久，如img video
figcaption 表示 figure內(nèi)容的標題
:::html
文檔主標題
文檔副標題
ExampleExample image結(jié)構(gòu)性元素
p 表示段落涡尘。只能包含內(nèi)聯(lián)元素，不能包含塊級元素;
div 本身無特殊含義响迂，可用于布局考抄。幾乎可以包含任何元素;
br 表示換行符;
hr 表示水平分割線;
h1-h6 表示標題。其中 h1 用于表示當前頁面最重要的內(nèi)容的標題;
blockquote 表示引用蔗彤，可以包含多個段落川梅。請勿純粹為了縮進而使用 blockquote疯兼，大部分瀏覽器默認將 blockquote 渲染為帶有左右縮進;
pre 表示一段格式化好的文本;
頭部元素
title 每個頁面必須有且僅有一個 title 元素;
base 可用場景：首頁、頻道等大部分鏈接都為新窗口打開的頁面;
link link 用于引入 css 資源時贫途，可省去 media(默認為all) 和 type(默認為text/css) 屬性;
style type 默認為 text/css吧彪，可以省去;
script type 屬性可以省去; 不贊成使用lang屬性; 不要使用古老的這種hack腳本, 它用于阻止第一代瀏覽器（Netscape 1和Mosaic）將腳本顯示成文字;
noscript 在用戶代理不支持 JavaScript 的情況下提供說明;
文本元素
a a 存在 href 屬性時表示鏈接，無 href 屬性但有 name 屬性表示錨點;
em,strong em 表示句意強調(diào)丢早，加與不加會引起語義變化姨裸，可用于表示不同的心情或語調(diào); strong 表示重要性強調(diào)，可用于局部或全局怨酝，strong強調(diào)的是重要性傀缩，不會改變句意;
abbr 表示縮寫;
sub,sup 主要用于數(shù)學和化學公式，sup還可用于腳注;
span 本身無特殊含義;
ins,del 分別表示從文檔中增加(插入)和刪除
媒體元素
img 請勿將img元素作為定位布局的工具凫碌，不要用他顯示空白圖片; 必要時給img元素增加alt屬性;
object 可以用來插入Flash;
列表元素
dl 表示關(guān)聯(lián)列表扑毡，dd是對dt的解釋; dt和dd的對應(yīng)關(guān)系比較隨意：一個dt對應(yīng)多個dd、多個dt對應(yīng)一個dd盛险、多個dt對應(yīng)多個dd，都合法; 可用于名詞/單詞解釋勋又、日程列表苦掘、站點目錄;
ul 表示無序列表;
ol 表示有序列表, 可用于排行榜等;
li 表示列表項，必須是ul/ol的子元素;
表單元素
推薦使用 button 代替 input楔壤，但必須聲明 type;
表單元素的 name 不能設(shè)定為 action, enctype, method, novalidate, target, submit 會導致表單提交混亂
屬性順序
HTML 屬性應(yīng)當按照以下給出的順序依次排列鹤啡，確保代碼的易讀性。
class
id蹲嚣、name
data-*
src递瑰、for、type隙畜、href
title抖部、alt
aria-*、role
class用于標識高度可復用組件议惰，因此應(yīng)該排在首位慎颗。id 用于標識具體組件，應(yīng)當謹慎使用（例如言询，頁面內(nèi)的書簽）俯萎，因此排在第二位。如：
:::html Example link
文件和目錄命名約定
一律小寫运杭，必須是英文單詞或者漢語拼音夫啊，以英語單詞優(yōu)先，多個單詞以連字符 ( - ) 連接辆憔。只能出現(xiàn)小寫引文字母撇眯，數(shù)字和連字符谆趾。
很多瀏覽器會將含有這些詞的作為廣告攔截： ad、ads叛本、adv沪蓬、banner、sponsor来候、gg跷叉、guangg、guanggao等 頁面中盡量避免采用以上詞匯來命名营搅。
該命令規(guī)范適用于所有前端維護的內(nèi)容和相關(guān)目錄云挟。(html, css, js, png, gif, jpg, ico)。
空格/標簽/注釋
用兩個空格來代替制表符（tab） —— 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法转质；
嵌套元素應(yīng)當縮進一次 —— 即兩個空格园欣；
對于屬性的定義，確保全部使用雙引號休蟹，絕不要使用單引號沸枯；
不要省略可選的結(jié)束標簽，如：,赂弓；
習慣性書寫注釋绑榴，方便日后維護；
文件編碼約定
所有文件統(tǒng)一采用UTF-8無BOM編碼盈魁。換行格式為 unix 格式翔怎。
id和class命名約定
id 和 class 的命名基本原則:內(nèi)容優(yōu)先，表現(xiàn)為輔杨耙。首先根據(jù)內(nèi)容來命名赤套，如:#header,#footer,.main-nav.如根據(jù)內(nèi)容無法找到合適的命名，可以再結(jié)合表現(xiàn)進行命名珊膜，如：col-main,col-sub,col-extra,blue-box
id 和 class 的名稱一律小寫容握，多個單詞以連字符連接，如：main-wrap
id 和 class 的名稱只能出現(xiàn)辅搬，小寫字母唯沮，數(shù)字和連字符( - )(js鉤子除外)
id 和 class 的名稱盡量使用英文單詞命名,如確實找不到合適的單詞，可以使用拼音堪遂，如：zhidao-com
在不影響語意的情況下介蛉，id 和 class 的名稱 可以適當使用縮寫，如:col,nav,hd,bd,fd(縮寫只用來表示結(jié)構(gòu)溶褪，不允許寫任何樣式)币旧。不要自造縮寫。
class 對于選中命名.selected;對于hover猿妈，支持偽類使用:hover吹菱，不支持的使用.hover巍虫，隱藏使用.hide。
id 和 class 的選擇鳍刷，如果只使用一次占遥，使用id,如果使用多次使用class，如果需要和js交互输瓜，使用id,如果需要交互并且頁面中有大量重復瓦胎，請參見下一條。
對于作為js鉤子的 id 和 class 命名規(guī)則為以”J_“開頭(J,象形鉤子的形狀)尤揣，后面加上原應(yīng)有的命名搔啊，在使用class的時候需要放在最前面。如:class="J_tab-content some-mod-content"北戏。（注意：鉤子负芋，不允許在css中定義任何的樣式效果）
很多瀏覽器會將含有這些詞的作為廣告攔截：ad、ads嗜愈、adv旧蛾、banner、sponsor芝硬、gg蚜点、guangg、guanggao等 頁面中盡量避免采用以上詞匯來命名拌阴。
文件引用
頁面中不允許出現(xiàn)css內(nèi)容(包括行內(nèi)樣式和style)
每個頁面中至多包括3個css文件，1個 產(chǎn)品級 1個模塊級 1個頁面級別
選擇器
命名比較短的詞奶镶，或者縮寫的不允許直接定義樣式迟赃，如：.title,.hd,.bd,.body.必須用上級節(jié)點進行限定,如：.recommend-mod .title
通用結(jié)構(gòu)
頁面中的塊采用如下結(jié)構(gòu)
:::html Tilte contents footer
沒有內(nèi)容的部分可以省略，其中用來表示結(jié)構(gòu)的 mod hd bd ft 不允許直接定義樣式（避免嵌套帶來樣式問題）,需要定義樣式的時候需要另外增加class以控制樣式如：
:::html? ? ? Tilte ? contents? footer
當2個以上的結(jié)構(gòu)不存在的時候可以不是采用此結(jié)構(gòu)厂镇，如纤壁，沒有hd和ft,bd也可以省略
多選擇器規(guī)則之間換行
當樣式針對多個選擇器時每個選擇器占一行
/推薦的寫法/
a.btn,
input.btn,
input[type="button"] {
......
}
z-index
自己寫的z-index的值不能超過 100 (通用組的除外)
頁面中的元素內(nèi)容的z-index不能超過10(popup poptip除外)，需要按照內(nèi)容定義1 2 3 4不允許直接使用如1000捺信，9999
popup poptip的z-index需要按照內(nèi)容使用 99以下酌媒，10以上的值（11,12,13，也可以小于10）迄靠，不允許直接使用1000秒咨，9999之類大值
現(xiàn)在通用z-index記錄,使用時請避開和靈活使用
z-index使用者類型
<10page-content頁面級別
>10, <99page-popup頁面級別
20usercard用戶名片common通用
MSG氣泡消息common通用
Dialog-Covercommon通用
Dialogcommon通用
css規(guī)范
css屬性順序
顯示屬性；
元素位置掌挚；
元素屬性雨席；
元素內(nèi)容屬性；
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;}
單行顯示不好注釋吠式，不好備注陡厘，這應(yīng)該是壓縮工具的活兒~
禁止使用行內(nèi)（inline）樣式
禁止使用"*"來選擇元素
/*別這樣寫*/
* {
margin: 0;
padding: 0;
}
這樣寫是沒有必要的抽米，一些元素在瀏覽器中默認有margin或padding值，但是只是部分元素糙置，沒有必要將所有元素的margin云茸、padding值都置為0。
帶前綴的屬性
當使用特定瀏覽器帶有前綴的屬性時谤饭，通過縮進的方式标捺，讓每個屬性的值在垂直方向?qū)R，這樣便于多行編輯网持。如：
.selector{-webkit-box-shadow:01px2pxrgba(0,0,0,.15);box-shadow:01px2pxrgba(0,0,0,.15);}
優(yōu)化css選擇器
css選擇器是從右邊到左邊進行匹配的宜岛。如：
#headera{color:#444;}
瀏覽器會檢查整個文檔中的所有鏈接，然后瀏覽器并不僅僅檢查每個鏈接的父元素功舀，還要遍歷文檔樹去查找id為header的祖先元素萍倡，如果被評估的鏈接不是 header 的后代，那么瀏覽器就要向上一級遍歷知道文檔的根節(jié)點辟汰。針對此問題列敲，有以下幾個解決方法：
避免使用通配規(guī)則
除了傳統(tǒng)意義的通配選擇符之外還包括相鄰兄弟選擇符, 子選擇符, 后代選擇符和屬性選擇符。推薦id帖汞、class和標簽選擇符戴而。
不要限定id選擇符
頁面中指定一個id只能對應(yīng)一個元素，所以沒有必要添加額外添加限定符翩蘸，如：div#header所意，應(yīng)該簡化為：#header（提權(quán)的除外）。
不要限定類選擇器
不要用具體的標簽限定類選擇符催首，而是根據(jù)實際情況對類名進行擴展扶踊。例如：ul.recommend，改成.recommend-list或者.list-recommend郎任。
讓規(guī)則越具體越好
盡量不要使用ul li a這樣長的選擇符秧耗，最好使用.list-anchor之類的選擇符。
避免使用后代選擇符
通常處理后代選擇符開銷最高舶治，使用字選擇符更高效分井，最好使用下一條代替。
避免使用標簽子選擇符
如果有如：#header > li > a霉猛，這樣基于子標簽的自選擇符尺锚，那么應(yīng)該使用一個class來關(guān)聯(lián)每個元素如：.header-anchor。盡量使用具體的類代替子選擇符韩脏。
前端規(guī)范之JavaScript
命名規(guī)范
文件命名可讀性強
文件夾缩麸、文件的命名與命名空間應(yīng)能代表代碼功能，可讀性強。
函數(shù)命名
駝峰命名方式
:::javascriptfunction funName() {}
常量
大寫
:::javascriptvarVARIABLENAME
變量
駝峰命名
:::javascriptvar variableName
編碼規(guī)則
排版縮進
采用統(tǒng)一的縮進方式排版代碼杭朱≡淖校縮進為2個ASCII空格
:::javascriptIf(condition1 || condition2) {action1;} else if (condition3 && condition4) {action2;} else if (condition5&& condition6&& condition7&& condition8) {action2;} else {default action;}
關(guān)鍵詞、條件括弧后面使用空格弧械；運算操作符號兩側(cè)使用空格八酒；語句分割符‘,’后面使用空格
:::javascriptvar name[空格]=[空格]value;if[空格](a,[空格]b) {}
左大括號"{"可以居行尾，也可寫在下行首（獨自一行）刃唐；右大括號"}"單獨占一行羞迷，居行首
:::javascriptif (a && b) {}
------------------------if (a && b) {}
句末必須用分號結(jié)尾
:::javascriptvar fn = function () {};//這里沒有分號的話，腳本解析器會報錯；ⅰＯ挝汀！(function () {alert(1);})();
單行過長應(yīng)在適當位置予以換行,增強可讀性
if 語句括號中的條件若過多過長抖甘，應(yīng)予以折行热鞍；折行后，||衔彻、&& 等符號應(yīng)與 “(” 后的第一個字母縱向?qū)R
:::javascriptif (condition1&& condition2|| condition3) {}
if薇宠、while、for艰额、do語句的執(zhí)行體總是用"{"和"}"括起來澄港，即使在其結(jié)構(gòu)體內(nèi)只有一條語句
:::javascriptif (s==100) {alert('shit!');}
語法意義相互獨立的代碼將用空行分隔
:::javascripta++; b++;? //！１凇回梧！避免同一行書寫兩個表達式if (a > b) {value = a;? //行間不用空行間隔}var variableName = value;? //與上一代碼行使用空行間隔
注釋規(guī)范
文件注釋
文件注釋要標明作者、文件版本祖搓、創(chuàng)建/修改時間漂辐、重大版本修改記錄
函數(shù)描述
文件版本、創(chuàng)建或者修改時間棕硫、功能、作者
:::javascript/** *@fileImage.js *@description功能詳細描述 */
函數(shù)或者類等都要添加頭描述
:::javascript/** * 簡述 * * 功能詳細描述 * *@param arg1 參數(shù)1 *@param arg2 參數(shù)2袒啼，默認為0 *@return 看xxx是否成功 */functionfooFunction(arg1, arg2){ }
操作注釋
單行注釋,寫在代碼上面
多行注釋
:::javascript/**注釋操作說明*/
for( var i = 0; i < obj.lenght; i++) {
}
注釋標簽參考
標簽描述
@addon把一個函數(shù)標記為另一個函數(shù)的擴張哈扮，另一個函數(shù)的定義不在源文件中。
@argument用大括號中的自變量類型描述一個自變量蚓再。
@author函數(shù)/類作者的姓名滑肉。
@base如果類是繼承得來，定義提供的類名稱摘仅。
@class用來給一個類提供描述靶庙，不能用于構(gòu)造器的文檔中。
@constructor描述一個類的構(gòu)造器娃属。
@deprecated表示函數(shù)/類已被忽略六荒。
@exception描述函數(shù)/類產(chǎn)生的一個錯誤护姆。
@exec
@extends表示派生出當前類的另一個類。
@fileoverview表示文檔塊將用于描述當前文件掏击。這個標簽應(yīng)該放在其它任何標簽之前卵皂。
@final指出函數(shù)/類。
@ignore讓jsdoc忽視隨后的代碼砚亭。
@link類似于@link標簽灯变，用于連接許多其它頁面。
@member定義隨后的函數(shù)為提供的類名稱的一個成員捅膘。
@param用大括號中的參數(shù)類型描述一個參數(shù)添祸。
@private表示函數(shù)/類為私有，不應(yīng)包含在生成的文檔中寻仗。
@requires表示需要另一個函數(shù)/類刃泌。
@return描述一個函數(shù)的返回值。
@returns描述一個函數(shù)的返回值愧沟。
@see連接到另一個函數(shù)/類蔬咬。
@throws描述函數(shù)/類可能產(chǎn)生的錯誤。
@type指定函數(shù)/成員的返回類型沐寺。
@version函數(shù)/類的版本號林艘。
條件判斷的陷阱
在if判斷中，使用===作比較,避免掉入==造成的陷阱
在條件判斷時混坞，這樣的一些值表示false：null狐援，undefined，字符串''究孕，數(shù)字0啥酱，NaN
而在==時，則會有一些讓人難以理解的陷阱,如：
(function(){varundefined;undefined==null;// true1==true;//true2==true;// false0==false;// true0=='';// trueNaN==NaN;// false[] ==false;// true[] == ![];// true})();
對于不同類型的==判斷厨诸，有這樣一些規(guī)則镶殷，順序自上而下：
1.undefined與null相等
2.一個是number一個是string時，會嘗試將string轉(zhuǎn)換為number
3.嘗試將boolean轉(zhuǎn)換為number微酬，0或1
4.嘗試將Object轉(zhuǎn)換成number或string绘趋，取決于另外一個對比量的類型
所以，對于0颗管、空字符串的判斷陷遮，建議使用===。===會先判斷兩邊的值類型垦江，類型不匹配時為false帽馋。
簡單類型轉(zhuǎn)換
number to string的轉(zhuǎn)換，建議使用1 + ''或String(1)，不使用new String(1)或1.toString()的方式绽族。
string to number的轉(zhuǎn)換姨涡，建議使用parseInt，必須顯式指定第二個參數(shù)的進制项秉。下面的例子展示了不指定進制的風險：
parseInt('08');// 0parseInt('08',10);//8
float to integer的轉(zhuǎn)換绣溜，建議使用Math.floor/Math.round/Math.ceil方法，不使用parseInt娄蔼。
字符串拼接
字符串拼接怖喻，應(yīng)使用數(shù)組保存字符串片段，使用時調(diào)用join方法岁诉。避免使用+或+=的方式拼接較長的字符串锚沸，每個字符串都會使用一個小的內(nèi)存片段，過多的內(nèi)存片段會影響性能涕癣。如:
不好的拼接方式哗蜈，+=varstr='';for(var i =0, len =list.length; i < len; i++) {str+='
獲取元素
獲取單個元素
通常坠韩，我們使用document.getElementById來獲取dom元素距潘，避免使用document.all。document.getElementById是標準方法只搁，兼容所有瀏覽器
ie瀏覽器會混淆元素的id和name屬性音比，document.getElementById可能獲得不期望的元素。在對元素的id與name屬性的命名需要非常小心氢惋，應(yīng)使用不同的命名法洞翩。下面是一個name與id沖突的例子：
