1：通用規(guī)范
tab鍵用兩個(gè)空格代替
因?yàn)樵诓煌到y(tǒng)的編輯工具對(duì)tab解析不一樣，windows下的tab鍵是占四個(gè)空格的位置荐糜，而在linux下會(huì)變成占八個(gè)空格的位置（除非你? 自己設(shè)定了tab鍵所占的位置長(zhǎng)度）。
每個(gè)樣式屬性或者每句代碼后加 ";"
方便壓縮工具"斷句"蛔趴。
HTML規(guī)范
HTML5 doctype
為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明嚣崭，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
:::html
2：字符編碼
通過(guò)明確聲明字符編碼宾尚，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式丙笋。這樣做的好處是谢澈，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（約定一致采用UTF-8編碼）御板。
:::html
3：文檔模板
:::htmlSample page頁(yè)頭主體頁(yè)尾// 你的代碼
4：IE 兼容模式
IE 支持通過(guò)特定的 標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的 IE 版本锥忿。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode怠肋，從而通知 IE 采用其所支持的最新的模式敬鬓。
:::html
5：元素
html5元素
section 表示文檔中的節(jié)、區(qū)段笙各，可以和h1-h6一起來(lái)顯示文檔結(jié)構(gòu)
article 表示一塊比較獨(dú)立的內(nèi)容或者主題內(nèi)容钉答，塊級(jí)元素，比如blog的內(nèi)容杈抢，報(bào)紙的文章
aside 表示article以外的內(nèi)容数尿，而且應(yīng)該和article有一定的關(guān)系，塊級(jí)元素
hgroup 表示一個(gè)文檔惶楼、區(qū)段(section)的標(biāo)題組合
header 表示頁(yè)眉,頁(yè)頭
footer 表示頁(yè)腳
nav 表示導(dǎo)航內(nèi)容
figure 表示以相對(duì)獨(dú)立的或外引的元素右蹦，如img video
figcaption 表示 figure內(nèi)容的標(biāo)題
:::html
文檔主標(biāo)題
文檔副標(biāo)題
ExampleExample image6：結(jié)構(gòu)性元素
p 表示段落。只能包含內(nèi)聯(lián)元素鲫懒，不能包含塊級(jí)元素;
div 本身無(wú)特殊含義嫩实，可用于布局。幾乎可以包含任何元素;
br 表示換行符;
hr 表示水平分割線;
h1-h6 表示標(biāo)題窥岩。其中 h1 用于表示當(dāng)前頁(yè)面最重要的內(nèi)容的標(biāo)題;
blockquote 表示引用甲献，可以包含多個(gè)段落。請(qǐng)勿純粹為了縮進(jìn)而使用 blockquote颂翼，大部分瀏覽器默認(rèn)將 blockquote 渲染為帶有左右縮進(jìn);
pre 表示一段格式化好的文本;
7：頭部元素
title 每個(gè)頁(yè)面必須有且僅有一個(gè) title 元素;
base 可用場(chǎng)景：首頁(yè)晃洒、頻道等大部分鏈接都為新窗口打開(kāi)的頁(yè)面;
link link 用于引入 css 資源時(shí)，可省去 media(默認(rèn)為all) 和 type(默認(rèn)為text/css) 屬性;
style type 默認(rèn)為 text/css，可以省去;
script type 屬性可以省去; 不贊成使用lang屬性; 不要使用古老的這種hack腳本, 它用于阻止第一代瀏覽器（Netscape 1和Mosaic）將腳本顯示成文字;
noscript 在用戶代理不支持 JavaScript 的情況下提供說(shuō)明;
8：文本元素
a a 存在 href 屬性時(shí)表示鏈接，無(wú) href 屬性但有 name 屬性表示錨點(diǎn);
em,strong em 表示句意強(qiáng)調(diào)壤追，加與不加會(huì)引起語(yǔ)義變化瘾腰，可用于表示不同的心情或語(yǔ)調(diào); strong 表示重要性強(qiáng)調(diào)，可用于局部或全局灸芳，strong強(qiáng)調(diào)的是重要性，不會(huì)改變句意;
abbr 表示縮寫;
sub,sup 主要用于數(shù)學(xué)和化學(xué)公式，sup還可用于腳注;
span 本身無(wú)特殊含義;
ins,del 分別表示從文檔中增加(插入)和刪除
9：媒體元素
img 請(qǐng)勿將img元素作為定位布局的工具镊尺，不要用他顯示空白圖片; 必要時(shí)給img元素增加alt屬性;
object 可以用來(lái)插入Flash;
10：列表元素
dl 表示關(guān)聯(lián)列表，dd是對(duì)dt的解釋; dt和dd的對(duì)應(yīng)關(guān)系比較隨意：一個(gè)dt對(duì)應(yīng)多個(gè)dd并思、多個(gè)dt對(duì)應(yīng)一個(gè)dd庐氮、多個(gè)dt對(duì)應(yīng)多個(gè)dd，都合法; 可用于名詞/單詞解釋宋彼、日程列表弄砍、站點(diǎn)目錄;
ul 表示無(wú)序列表;
ol 表示有序列表, 可用于排行榜等;
li 表示列表項(xiàng)仙畦，必須是ul/ol的子元素;
11：表單元素
推薦使用 button 代替 input，但必須聲明 type;
表單元素的 name 不能設(shè)定為 action, enctype, method, novalidate, target, submit 會(huì)導(dǎo)致表單提交混亂
12：屬性順序
HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列音婶，確保代碼的易讀性慨畸。
class
id、name
data-*
src桃熄、for先口、type、href
title瞳收、alt
aria-*碉京、role
class用于標(biāo)識(shí)高度可復(fù)用組件，因此應(yīng)該排在首位螟深。id 用于標(biāo)識(shí)具體組件谐宙，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁(yè)面內(nèi)的書簽）界弧，因此排在第二位凡蜻。如：
:::html Example link
13：文件和目錄命名約定
一律小寫，必須是英文單詞或者漢語(yǔ)拼音垢箕，以英語(yǔ)單詞優(yōu)先划栓，多個(gè)單詞以連字符 ( - ) 連接。只能出現(xiàn)小寫引文字母条获，數(shù)字和連字符忠荞。
很多瀏覽器會(huì)將含有這些詞的作為廣告攔截： ad、ads帅掘、adv委煤、banner、sponsor修档、gg碧绞、guangg、guanggao等 頁(yè)面中盡量避免采用以上詞匯來(lái)命名吱窝。
該命令規(guī)范適用于所有前端維護(hù)的內(nèi)容和相關(guān)目錄讥邻。(html, css, js, png, gif, jpg, ico)。
14：空格/標(biāo)簽/注釋
用兩個(gè)空格來(lái)代替制表符（tab） —— 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法院峡；
嵌套元素應(yīng)當(dāng)縮進(jìn)一次 —— 即兩個(gè)空格兴使；
對(duì)于屬性的定義，確保全部使用雙引號(hào)撕予，絕不要使用單引號(hào)鲫惶；
不要省略可選的結(jié)束標(biāo)簽蜈首，如：,实抡；
習(xí)慣性書寫注釋欠母，方便日后維護(hù)；
15：文件編碼約定
所有文件統(tǒng)一采用UTF-8無(wú)BOM編碼吆寨。換行格式為 unix 格式赏淌。
16：id和class命名約定
id 和 class 的命名基本原則:內(nèi)容優(yōu)先，表現(xiàn)為輔啄清。首先根據(jù)內(nèi)容來(lái)命名六水，如:#header,#footer,.main-nav.如根據(jù)內(nèi)容無(wú)法找到合適的命名，可以再結(jié)合表現(xiàn)進(jìn)行命名辣卒，如：col-main,col-sub,col-extra,blue-box
id 和 class 的名稱一律小寫掷贾，多個(gè)單詞以連字符連接，如：main-wrap
id 和 class 的名稱只能出現(xiàn)荣茫，小寫字母想帅，數(shù)字和連字符( - )(js鉤子除外)
id 和 class 的名稱盡量使用英文單詞命名,如確實(shí)找不到合適的單詞，可以使用拼音啡莉，如：zhidao-com
在不影響語(yǔ)意的情況下港准，id 和 class 的名稱 可以適當(dāng)使用縮寫，如:col,nav,hd,bd,fd(縮寫只用來(lái)表示結(jié)構(gòu)咧欣，不允許寫任何樣式)浅缸。不要自造縮寫。
class 對(duì)于選中命名.selected;對(duì)于hover魄咕，支持偽類使用:hover衩椒，不支持的使用.hover，隱藏使用.hide蚕礼。
id 和 class 的選擇烟具，如果只使用一次，使用id,如果使用多次使用class奠蹬，如果需要和js交互朝聋，使用id,如果需要交互并且頁(yè)面中有大量重復(fù)，請(qǐng)參見(jiàn)下一條囤躁。
對(duì)于作為js鉤子的 id 和 class 命名規(guī)則為以”J_“開(kāi)頭(J,象形鉤子的形狀)冀痕，后面加上原應(yīng)有的命名，在使用class的時(shí)候需要放在最前面狸演。如:class="J_tab-content some-mod-content"言蛇。（注意：鉤子，不允許在css中定義任何的樣式效果）
很多瀏覽器會(huì)將含有這些詞的作為廣告攔截：ad宵距、ads腊尚、adv、banner满哪、sponsor婿斥、gg劝篷、guangg、guanggao等 頁(yè)面中盡量避免采用以上詞匯來(lái)命名民宿。
17：文件引用
頁(yè)面中不允許出現(xiàn)css內(nèi)容(包括行內(nèi)樣式和style)
每個(gè)頁(yè)面中至多包括3個(gè)css文件娇妓，1個(gè) 產(chǎn)品級(jí) 1個(gè)模塊級(jí) 1個(gè)頁(yè)面級(jí)別
18：選擇器
命名比較短的詞，或者縮寫的不允許直接定義樣式活鹰，如：.title,.hd,.bd,.body.必須用上級(jí)節(jié)點(diǎn)進(jìn)行限定,如：.recommend-mod .title
19：通用結(jié)構(gòu)
頁(yè)面中的塊采用如下結(jié)構(gòu)
:::html Tilte contents footer
沒(méi)有內(nèi)容的部分可以省略哈恰，其中用來(lái)表示結(jié)構(gòu)的 mod hd bd ft 不允許直接定義樣式（避免嵌套帶來(lái)樣式問(wèn)題）,需要定義樣式的時(shí)候需要另外增加class以控制樣式如：
:::html? ? ? Tilte ? contents? footer
當(dāng)2個(gè)以上的結(jié)構(gòu)不存在的時(shí)候可以不是采用此結(jié)構(gòu)，如志群，沒(méi)有hd和ft,bd也可以省略
20：多選擇器規(guī)則之間換行
當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行
/推薦的寫法/
a.btn,
input.btn,
input[type="button"] {
......
}
z-index
自己寫的z-index的值不能超過(guò) 100 (通用組的除外)
頁(yè)面中的元素內(nèi)容的z-index不能超過(guò)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記錄,使用時(shí)請(qǐng)避開(kāi)和靈活使用
z-index使用者類型
<10page-content頁(yè)面級(jí)別
>10, <99page-popup頁(yè)面級(jí)別
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 合并
每個(gè)樣式屬性后加 ";"
禁止將樣式寫為單行
如
.hotel-content {margin: 10px; background-color: #efefef;}
單行顯示不好注釋，不好備注讲衫，這應(yīng)該是壓縮工具的活兒~
禁止使用行內(nèi)（inline）樣式
禁止使用"*"來(lái)選擇元素
/*別這樣寫*/
* {
margin: 0;
padding: 0;
}
這樣寫是沒(méi)有必要的缕棵，一些元素在瀏覽器中默認(rèn)有margin或padding值，但是只是部分元素涉兽，沒(méi)有必要將所有元素的margin招驴、padding值都置為0。
帶前綴的屬性
當(dāng)使用特定瀏覽器帶有前綴的屬性時(shí)枷畏，通過(guò)縮進(jìn)的方式别厘，讓每個(gè)屬性的值在垂直方向?qū)R，這樣便于多行編輯拥诡。如：
.selector{-webkit-box-shadow:01px2pxrgba(0,0,0,.15);box-shadow:01px2pxrgba(0,0,0,.15);}
2122：優(yōu)化css選擇器
css選擇器是從右邊到左邊進(jìn)行匹配的触趴。如：
#headera{color:#444;}
瀏覽器會(huì)檢查整個(gè)文檔中的所有鏈接，然后瀏覽器并不僅僅檢查每個(gè)鏈接的父元素渴肉，還要遍歷文檔樹去查找id為header的祖先元素冗懦，如果被評(píng)估的鏈接不是 header 的后代，那么瀏覽器就要向上一級(jí)遍歷知道文檔的根節(jié)點(diǎn)仇祭。針對(duì)此問(wèn)題披蕉，有以下幾個(gè)解決方法：
22.避免使用通配規(guī)則
除了傳統(tǒng)意義的通配選擇符之外還包括相鄰兄弟選擇符, 子選擇符, 后代選擇符和屬性選擇符。推薦id、class和標(biāo)簽選擇符没讲。
不要限定id選擇符
頁(yè)面中指定一個(gè)id只能對(duì)應(yīng)一個(gè)元素承冰，所以沒(méi)有必要添加額外添加限定符，如：div#header食零，應(yīng)該簡(jiǎn)化為：#header（提權(quán)的除外）。
不要限定類選擇器
不要用具體的標(biāo)簽限定類選擇符寂屏，而是根據(jù)實(shí)際情況對(duì)類名進(jìn)行擴(kuò)展贰谣。例如：ul.recommend，改成.recommend-list或者.list-recommend迁霎。
讓規(guī)則越具體越好
盡量不要使用ul li a這樣長(zhǎng)的選擇符吱抚，最好使用.list-anchor之類的選擇符。
避免使用后代選擇符
通常處理后代選擇符開(kāi)銷最高考廉，使用字選擇符更高效秘豹，最好使用下一條代替。
避免使用標(biāo)簽子選擇符
如果有如：#header > li > a昌粤，這樣基于子標(biāo)簽的自選擇符既绕，那么應(yīng)該使用一個(gè)class來(lái)關(guān)聯(lián)每個(gè)元素如：.header-anchor。盡量使用具體的類代替子選擇符涮坐。
前端規(guī)范之JavaScript
23.命名規(guī)范
文件命名可讀性強(qiáng)
文件夾凄贩、文件的命名與命名空間應(yīng)能代表代碼功能，可讀性強(qiáng)袱讹。
函數(shù)命名
駝峰命名方式
:::javascriptfunction funName() {}
常量
大寫
:::javascriptvarVARIABLENAME
變量
駝峰命名
:::javascriptvar variableName
24.編碼規(guī)則
排版縮進(jìn)
采用統(tǒng)一的縮進(jìn)方式排版代碼疲扎。縮進(jìn)為2個(gè)ASCII空格
:::javascriptIf(condition1 || condition2) {? action1;}elseif(condition3 && condition4) { action2;}elseif(condition5? ? ? && condition6? ? ? && condition7? ? ? && condition8) { action2;}else{defaultaction;}
關(guān)鍵詞捷雕、條件括弧后面使用空格椒丧；運(yùn)算操作符號(hào)兩側(cè)使用空格；語(yǔ)句分割符‘,’后面使用空格
:::javascriptvar name[空格]=[空格]value;if[空格](a,[空格]b) {}
左大括號(hào)"{"可以居行尾救巷，也可寫在下行首（獨(dú)自一行）壶熏；右大括號(hào)"}"單獨(dú)占一行，居行首
:::javascriptif (a && b) {}
------------------------if (a && b) {}
句末必須用分號(hào)結(jié)尾
:::javascriptvar fn = function () {};//這里沒(méi)有分號(hào)的話浦译，腳本解析器會(huì)報(bào)錯(cuò)＞贸取！管怠！(function () {alert(1);})();
單行過(guò)長(zhǎng)應(yīng)在適當(dāng)位置予以換行,增強(qiáng)可讀性
if 語(yǔ)句括號(hào)中的條件若過(guò)多過(guò)長(zhǎng)淆衷，應(yīng)予以折行；折行后渤弛，||祝拯、&& 等符號(hào)應(yīng)與 “(” 后的第一個(gè)字母縱向?qū)R
:::javascriptif (condition1&& condition2|| condition3) {}
if、while、for佳头、do語(yǔ)句的執(zhí)行體總是用"{"和"}"括起來(lái)鹰贵，即使在其結(jié)構(gòu)體內(nèi)只有一條語(yǔ)句
:::javascriptif (s==100) {alert('shit!');}
語(yǔ)法意義相互獨(dú)立的代碼將用空行分隔
:::javascripta++; b++;? //！？导巍碉输！避免同一行書寫兩個(gè)表達(dá)式if (a > b) {value = a;? //行間不用空行間隔}var variableName = value;? //與上一代碼行使用空行間隔
25.注釋規(guī)范
文件注釋
文件注釋要標(biāo)明作者、文件版本亭珍、創(chuàng)建/修改時(shí)間敷钾、重大版本修改記錄
函數(shù)描述
文件版本、創(chuàng)建或者修改時(shí)間肄梨、功能阻荒、作者
:::javascript/** *@fileImage.js *@description功能詳細(xì)描述 */
函數(shù)或者類等都要添加頭描述
:::javascript/** * 簡(jiǎn)述 * * 功能詳細(xì)描述 * *@param arg1 參數(shù)1 *@param arg2 參數(shù)2，默認(rèn)為0 *@return 看xxx是否成功 */functionfooFunction(arg1, arg2){ }
操作注釋
單行注釋,寫在代碼上面
多行注釋
:::javascript/**注釋操作說(shuō)明*/
for( var i = 0; i < obj.lenght; i++) {
}
注釋標(biāo)簽參考
標(biāo)簽描述
@addon把一個(gè)函數(shù)標(biāo)記為另一個(gè)函數(shù)的擴(kuò)張众羡，另一個(gè)函數(shù)的定義不在源文件中侨赡。
@argument用大括號(hào)中的自變量類型描述一個(gè)自變量。
@author函數(shù)/類作者的姓名粱侣。
@base如果類是繼承得來(lái)羊壹，定義提供的類名稱。
@class用來(lái)給一個(gè)類提供描述齐婴，不能用于構(gòu)造器的文檔中舶掖。
@constructor描述一個(gè)類的構(gòu)造器。
@deprecated表示函數(shù)/類已被忽略尔店。
@exception描述函數(shù)/類產(chǎn)生的一個(gè)錯(cuò)誤眨攘。
@exec
@extends表示派生出當(dāng)前類的另一個(gè)類。
@fileoverview表示文檔塊將用于描述當(dāng)前文件嚣州。這個(gè)標(biāo)簽應(yīng)該放在其它任何標(biāo)簽之前鲫售。
@final指出函數(shù)/類。
@ignore讓jsdoc忽視隨后的代碼该肴。
@link類似于@link標(biāo)簽情竹，用于連接許多其它頁(yè)面。
@member定義隨后的函數(shù)為提供的類名稱的一個(gè)成員匀哄。
@param用大括號(hào)中的參數(shù)類型描述一個(gè)參數(shù)秦效。
@private表示函數(shù)/類為私有，不應(yīng)包含在生成的文檔中涎嚼。
@requires表示需要另一個(gè)函數(shù)/類阱州。
@return描述一個(gè)函數(shù)的返回值。
@returns描述一個(gè)函數(shù)的返回值法梯。
@see連接到另一個(gè)函數(shù)/類苔货。
@throws描述函數(shù)/類可能產(chǎn)生的錯(cuò)誤犀概。
@type指定函數(shù)/成員的返回類型。
@version函數(shù)/類的版本號(hào)夜惭。
26.條件判斷的陷阱
在if判斷中姻灶，使用===作比較,避免掉入==造成的陷阱
在條件判斷時(shí)，這樣的一些值表示false：null诈茧，undefined产喉，字符串''，數(shù)字0敢会，NaN
而在==時(shí)曾沈，則會(huì)有一些讓人難以理解的陷阱,如：
(function(){varundefined;undefined==null;//true1==true;//true2==true;//false0==false;//true0=='';//trueNaN==NaN;//false[]==false;//true[]==![];//true})();
對(duì)于不同類型的==判斷，有這樣一些規(guī)則走触，順序自上而下：
1.undefined與null相等
2.一個(gè)是number一個(gè)是string時(shí)，會(huì)嘗試將string轉(zhuǎn)換為number
3.嘗試將boolean轉(zhuǎn)換為number疤苹，0或1
4.嘗試將Object轉(zhuǎn)換成number或string互广，取決于另外一個(gè)對(duì)比量的類型
所以，對(duì)于0卧土、空字符串的判斷惫皱，建議使用===。===會(huì)先判斷兩邊的值類型尤莺，類型不匹配時(shí)為false旅敷。
27.簡(jiǎn)單類型轉(zhuǎn)換
number to string的轉(zhuǎn)換，建議使用1 + ''或String(1)颤霎，不使用new String(1)或1.toString()的方式媳谁。
string to number的轉(zhuǎn)換，建議使用parseInt友酱，必須顯式指定第二個(gè)參數(shù)的進(jìn)制晴音。下面的例子展示了不指定進(jìn)制的風(fēng)險(xiǎn)：
parseInt('08');// 0parseInt('08',10);//8
float to integer的轉(zhuǎn)換，建議使用Math.floor/Math.round/Math.ceil方法缔杉，不使用parseInt锤躁。
28.字符串拼接
字符串拼接，應(yīng)使用數(shù)組保存字符串片段或详，使用時(shí)調(diào)用join方法系羞。避免使用+或+=的方式拼接較長(zhǎng)的字符串，每個(gè)字符串都會(huì)使用一個(gè)小的內(nèi)存片段霸琴，過(guò)多的內(nèi)存片段會(huì)影響性能椒振。如:
不好的拼接方式，+=varstr='';for(var i =0, len =list.length; i < len; i++) {str+='
29.獲取元素
獲取單個(gè)元素
通常杠人，我們使用document.getElementById來(lái)獲取dom元素，避免使用document.all。document.getElementById是標(biāo)準(zhǔn)方法嗡善，兼容所有瀏覽器
ie瀏覽器會(huì)混淆元素的id和name屬性辑莫，document.getElementById可能獲得不期望的元素。在對(duì)元素的id與name屬性的命名需要非常小心罩引，應(yīng)使用不同的命名法各吨。下面是一個(gè)name與id沖突的例子：
