via:Github
通用規(guī)范
- 使用空格代替TAB辩诞,windows和Linux的Tab占位不同齿坷。
- CSS樣式屬性和 JavaScript代碼后邊添加分號
;
透硝,方便斷句,利于壓縮宪肖。 - 文件內(nèi)容編碼均統(tǒng)一為UTF-8表制。
- CSS、JAVASCRIPT中的非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用控乾,以避免編碼錯誤時亂碼顯示么介。
文件規(guī)范
- 文件名用英文單詞,多個單詞用駝峰命名法蜕衡。
- 一些瀏覽器會將含有這些詞的作為廣告攔截壤短,文件命名、ID慨仿、CLASS等所有命名避免以上詞匯久脯。
ad`、`ads`镶骗、`adv`桶现、`banner`、`sponsor`鼎姊、`gg`、`guangg`相赁、`guanggao
HTML書寫規(guī)范
- 為每個HTML頁面的第一行添加標(biāo)準(zhǔn)模式(standard mode)的聲明相寇,確保在每個瀏覽器中擁有一致的展現(xiàn)。
<!DOCTYPE html>
- 文檔類型聲明統(tǒng)一為HTML5聲明類型钮科,編碼統(tǒng)一為UTF-8唤衫。
<meta charset="UTF-8">
-
<HEAD>
中添加信息。
<meta name="author" content="smile@kang.cool">//作者
<meta name="description" content="hello">//網(wǎng)頁描述
<meta name="keywords" content="a,b,c">//關(guān)鍵字,“绵脯,”分隔
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">//設(shè)定網(wǎng)頁的到期時間佳励。一旦網(wǎng)頁過期,必須到服務(wù)器上重新調(diào)閱
<meta http-equiv="Pragma" content="no-cache">//禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容
<meta http-equiv="Window-target" content="_top">//用來防止別人在框架里調(diào)用你的頁面
<meta http-equiv="Refresh" content="5;URL=http://kahn1990.com/">//跳轉(zhuǎn)頁面蛆挫,5指時間停留5秒 網(wǎng)頁搜索機(jī)器人向?qū)г叱小S脕砀嬖V搜索機(jī)器人哪些頁面需要索引,哪些頁面不需要索引
<meta name="robots" content="none">//content的參數(shù)有all,none,index,noindex,follow,nofollow悴侵,默認(rèn)是all
<link rel="Shortcut Icon" href="favicon.ico">//收藏圖標(biāo)
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">//網(wǎng)頁不會被緩存
- IE支持通過特定<meta>標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的IE版本瞧剖。除非有強(qiáng)烈的特殊需求,否則最好是設(shè)置為edge mode ,從而通知IE采用其所支持的最新的模式抓于。
meta http-equiv="X-UA-Compatible" content="IE=Edge">
非特殊情況下CSS樣式文件外鏈至HEAD之間做粤,JAVASCRIPT文件外鏈至頁面底部。引入JAVASCRIPT庫文件捉撮,文件名須包含庫名稱及版本號及是否為壓縮版怕品。引入JAVASCRIPT插件, 文件名格式為庫名稱+.+插件名稱。
jQuery.cookie.js
HTML屬性應(yīng)當(dāng)按照以下給出的順序依次排列巾遭,來確保代碼的易讀性堵泽。
class
id 、 name
data-*
src恢总、for迎罗、 type、 href
title片仿、alt
aria-*纹安、 role
- 編碼均遵循XHTML標(biāo)準(zhǔn),標(biāo)簽砂豌、屬性厢岂、屬性命名由小寫英文、數(shù)字和_組成阳距,且所有標(biāo)簽必須閉合塔粒,屬性值必須用雙引號””,避免使用中文拼音盡量簡易并要求語義化筐摘。
CLASS --> nHeadTitle --> CLASS遵循小駝峰命名法(little camel-case)
ID --> n_head_title --> ID遵循名稱+_
NAME --> N_Head_Title --> NAME屬性命名遵循首個字母大寫+_
<div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>
- 當(dāng)JAVASCRIPT獲取單個元素時卒茬,通常使用
document.getElementById
來獲取dom元素,document.getElementById
兼容所有瀏覽器咖熟,但I(xiàn)E瀏覽器會混淆元素的ID和NAME屬性圃酵,所以要區(qū)分ID和NAME命名。
<input type="text" name="test">
<div id="test"></div>
<button onclick="alert(document.getElementById('test').tagName)"></button>
<!-- ie6下為INPUT -->
- 特殊符號應(yīng)使用轉(zhuǎn)意符馍管。
< --> <
> --> >
空格 -->
- 含有描述性表單元素(INPUT郭赐,TEXTAREA)添加LABEL。
<p>
<label for="test">測試</label>
<input type="text" id="test" />
</p>
- 多用無兼容性問題的HTML內(nèi)置標(biāo)簽确沸,比如SPAN捌锭、EM、STRONG罗捎、OPTGROUP观谦、LABEL等,需要自定義HTML標(biāo)簽屬性時,首先考慮是否存在已有的合適標(biāo)簽可替換宛逗,如果沒有坎匿,可使用須以“data-”為前綴來添加自定義屬性,避免使用其他命名方式。
- 語義化HTML替蔬。
- 盡可能減少
<DIV>
嵌套告私。 - 書寫鏈接地址時避免重定向。
//即在URL地址后面加“/”