今天無意間看到了Google的HTML/CSS編碼規(guī)范，發(fā)現(xiàn)了不少自己很容易忽略的問題，特意仔細(xì)看了看，將其整理翻譯出來分享給大家。Google規(guī)范的原文鏈接大家可以訪問：http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
1.協(xié)議頭：
建議在指向圖片或其他媒體文件、樣式表和腳本的URL地址中省略http：https:協(xié)議部分，除非已知相應(yīng)文件不能同時(shí)兼容2個(gè)協(xié)議。
注：這個(gè)倒是真正平日不注意的，只要是絕對(duì)地址，http：總是帶著。如果仔細(xì)想一想，還真有道理。
2.縮進(jìn)：每次縮進(jìn)使用雙空格
不要使用tab制表符或制表符加空格的混合方式縮進(jìn)
3.大小寫：只使用小寫
所有的代碼都應(yīng)是小寫的，包括元素名稱、屬性，屬性值(除非text或CDATA的內(nèi)容)、選擇器、css屬性、屬性值(字符串除外)
4.尾隨空格
尾隨空格是不必要的，容易搞復(fù)雜diff文件。這個(gè)絕對(duì)是經(jīng)驗(yàn)教訓(xùn)的總結(jié)!!!
5.編碼格式：使用UTF-8
請(qǐng)確保您的編輯器使用的字符編碼??為UTF-8，沒有字節(jié)順序標(biāo)記。在html模板或文檔中通過 來
定義編碼格式。關(guān)于編碼格式參考 Character Sets & Encodings in XHTML, HTML and CSS
6.注釋
根據(jù)需要解釋代碼，這個(gè)就不多說了，團(tuán)隊(duì)開發(fā)這個(gè)非常重要，盡管很多時(shí)候大家不愿意遵守，但確實(shí)重要!!!
7.TODO待定項(xiàng)
尚未實(shí)現(xiàn)的或待定的內(nèi)容一定要標(biāo)識(shí)強(qiáng)調(diào)出來，利用TODO辨識(shí)，而非其他諸如@@來強(qiáng)調(diào)。
在todo項(xiàng)中如果有必要列明聯(lián)系人，比如負(fù)責(zé)人
在TODO后追加一個(gè)冒號(hào)作為行動(dòng)內(nèi)容，例如 TODO：為美瑞網(wǎng)增加html5模板
8.文檔類型：使用
HTML5使用.HTML(text/html)類型文件相對(duì)XHTML(alication/xhtml+xml)文件，在瀏覽器及框架支持上和優(yōu)化空間上都要好很多。
9.HTML 合法性驗(yàn)證
合法的使用HTML，并利用w3c的工具(W3C HTML validator)進(jìn)行檢查。唯一例外就是因?yàn)樾阅茉蛐枰獕嚎s文件大小。
原文如下：Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size. 但這個(gè)確實(shí)很難想象，省略標(biāo)簽節(jié)省的文件大小能有多少字節(jié)？但帶來的問題可是風(fēng)險(xiǎn)居高哦!
10.語義性
根據(jù)目的來合理使用HTML，這點(diǎn)對(duì)于HTML5而言尤為重要。下面例子可以對(duì)比，能實(shí)現(xiàn)同樣的結(jié)果，但效率和可讀性卻有很大差別。
對(duì)于HTML5而言，例如header、footer、nav、section等跟div能實(shí)現(xiàn)的功能基本類似，但是語義性上有著天壤之別。
11.多媒體后備：為多媒體提供備選內(nèi)容
這個(gè)屬于老生長(zhǎng)談的內(nèi)容，典型就是為img添加alt內(nèi)容。
12.關(guān)注點(diǎn)分離
這點(diǎn)很重要，嚴(yán)格遵守將組織結(jié)構(gòu)(markup)、表現(xiàn)樣式(style)和行為動(dòng)作(script)分開處理的原則，并且盡量使三者之間的關(guān)聯(lián)度降到最小。這主要是基于維護(hù)性的考慮，通常，更新style文件或腳本文件比更改HTML文件的代價(jià)要小很多，試想一下，對(duì)于一個(gè)有超過10萬頁(yè)面的網(wǎng)站進(jìn)行局部顏色調(diào)整，是每個(gè)html文件修改容易還是修改一個(gè)style文件容易？
可選Tags：省略可選的標(biāo)簽
13.實(shí)體引用
假定開發(fā)團(tuán)隊(duì)內(nèi)，文件和編輯器都是使用同樣的編碼格式(UTF-8)，則沒有必要使用實(shí)體引用的方式，例如—，”, or ? 除非一些HTML中具有特定含義的字符，如”<”,或不可見字符如空格
14.Type屬性：省略
將樣式表和腳本中的Type省略，除非你不是用的css或javascript，在HTML5中，該值默認(rèn)是text/css和text/javascript
15.block，list或table元素
針對(duì)每個(gè)block，list或table元素另起一行，并在每個(gè)子元素前縮進(jìn)。這樣可讀性好，例如：
對(duì)于使用HTML5的朋友，可以參考。當(dāng)然，不同團(tuán)隊(duì)還會(huì)整理出適合自己的代碼規(guī)范，上述應(yīng)該來說屬于比較基本的規(guī)則內(nèi)容。
