前端書(shū)寫(xiě)規(guī)范手冊(cè)

《前端書(shū)寫(xiě)規(guī)范手冊(cè)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、前端規(guī)范2015-9-18前端規(guī)范11.HTML11)語(yǔ)法12)HTML5doctype23)語(yǔ)言屬性34）IE兼容模式45）字符編碼56）引入CSS與javascript文件67）屬性順序78）布爾型屬性89）正確使用盒子模型92.CSS101）語(yǔ)法102）聲明順序113）媒體查詢的位置124）單行規(guī)則聲明135）簡(jiǎn)寫(xiě)規(guī)則146）注釋157）class命名168）選擇器171.HTML1)語(yǔ)法l用兩個(gè)空格來(lái)代替制表符（tab）--這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。l嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）。l對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)。l不要在

2、自閉合（self-closing）元素的尾部添加斜線--HTML5規(guī)范中明確說(shuō)明這是可選的。l不要省略可選的結(jié)束標(biāo)簽（closingtag）（例如，或）。Hello,world!2)02)HTML5doctype為每個(gè)HTML頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（st

3、andardmode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。192)語(yǔ)言屬性根據(jù)HTML5規(guī)范：為html根元素指定lang屬性，從而為文檔設(shè)置正確的語(yǔ)言。這將有助于語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等。194）IE兼容模式IE支持通過(guò)特定的標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的IE版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為edgemode，從而通知IE采用其所支持

4、的最新的模式。194）字符編碼通過(guò)明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式。這樣做的好處是，可以避免在HTML中使用字符實(shí)體標(biāo)記（characterentity），從而全部與文檔編碼一致（一般采用UTF-8編碼）。194）引入CSS與javascript文件l根據(jù)HTML5規(guī)范，在引入CSS和JavaScript文件時(shí)一般不需要指定type屬性，因?yàn)閠ext/css和text/java

5、script分別是它們的默認(rèn)值。l一般情況下CSS文件放在標(biāo)簽中；javascript放在底部。197）屬性順序HTML屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。lclasslid,nameldata-*l

6、src,for,type,hrefltitle,altlaria-*,roleclass用于標(biāo)識(shí)高度可復(fù)用組件，因此應(yīng)該排在首位。id用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁(yè)面內(nèi)的書(shū)簽），因此排在第二位。注：除非特殊情況，或UI插件需要，嚴(yán)禁在HTML標(biāo)簽中添加額外屬性：包括style、JS事件、標(biāo)簽自帶屬性（width,height,border,...)等。造成HTML代碼污染。Examplelink

7、t">198）布爾型屬性布爾（boolean）型屬性布爾型屬性可以在聲明時(shí)不賦值。XHTML規(guī)范要求為其賦值，但是HTML5規(guī)范不需要。1198）正確使用盒子模型編寫(xiě)HTML代碼時(shí)盡量減少不必要的父元素。并且根據(jù)功能組件