前端開發學習指南
這篇文章很長，但的確是一篇非常乾的乾貨，講訴了 HTML、JavaScript、CSS、jQuery使用的一些規範與建議，前端的同學可以認真閱讀此文，並比較自己平時的一些習慣，看是否有改進的地方……
HTML
咋地了, DOCTYPE?
不定義DOCTYPE是一種可以被判死刑的罪行。 以前你可能用的是下面的DOCTYPE，不過你要知道現在已經有更簡潔清晰的程式碼取而代之了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
理想的狀況是用HTML5 DOCTYPE，所有現代的瀏覽器都支援它，即使是不支援HTML5的瀏覽器，例如IE6,IE7，也會由此轉入標準模式。 參見來源。
<!DOCTYPE html>
編寫合法且語義清晰的標記
用整潔、語義清晰的HTML編寫網站程式碼是我們一直孜孜以求的。有時我們會發現前人配置頁面的方式限制了我們，或者有時我們編寫的是HTML格式的email模板。但永遠不要偏離HTML的規範，即使是為了解決特定瀏覽器相容性的bug。
所有的標題應該從<h2>開始分層級建立，文欄位落應該總是放在<p>標籤裡，諸如此類。如果你編寫的HTML的語義清晰，產生的頁面會更整潔、簡練，而且易於被搜尋引擎爬蟲解析。這是你能做到的最簡單的SEO修補方式。
來看看下面的段落，你覺得哪個更整潔？是這個？
<span class="sectionHeading">A Heading</span>
<br /> <br />
Lorem ipsum dolor sit amet. ...
<br /> <br />
還是這個？
<h2>A Heading</h2>
<p>
Lorem ipsum dolor sit amet. ...
</p>
滑鼠中鍵點選的應變方式
現代web應用最令人鬱悶的可用性缺陷之一是超連結功能的變種。 一些看起來像是超連結的元素可能是通過Javascript對映的單擊功能，這就破壞了滑鼠中鍵點選（在新的tab中開啟連結頁面）的功能。即使它們能在新的標籤頁開啟，它們只帶有一個#
深刻詮釋了該問題的一個現代熱門網站的例子就是Twitter。在它的整個應用裡，滑鼠中鍵點選使用者名稱或頭像會得到完全不同的結果。
<!-- 舊的方式，破壞網頁語義 -->
<a href="#"></a>
<!-- 如果滑鼠點選不能產生一個頁面，那就不是超連結 -->
<span class="link" role="link"></span>
另一個替代方案是使用#引導的路徑，它會把普通的url對映為#引導的連結，然後通過AJAX來獲取頁面片段。提供此功能的庫應該能夠在滑鼠中鍵點選的時候正常顯示頁面，或者在左鍵點選時把該頁面內容載入到指定的區域。不過這樣也要慎重行事，有很多人都認為#連結正在破壞web應用。
用Microformats格式表示聯絡人資訊
Microformat是一種便於機器讀取聯絡人資訊的方式。hCard類（不是vCard）用來定義元素裡包含的內容型別。這些內容會被瀏覽器提取並突出顯示。
<span class="tel">
<span class="type">home</span>:
<span class="value">+1.415.555.1212</span>
</span>
如果你曾經瀏覽採用此格式的網頁，你會注意到類似skype的程式可以輕鬆檢測到網頁上的哪些數字是電話號碼。在iOS裝置上的Safari瀏覽器也可以做到類似的事情。
有關Microformat的更多資訊請參閱http://microformats.org/wiki/hcard
圖片需要設 'Alt' 文字
<img>標籤需要alt文字，以便檢查並滿足可讀性的要求。 在alt屬性中的文字必須能夠說明圖片顯示的內容或要達到的效果，除非該圖片不重要。
如果圖片只是一個列表中的著重號或者其他無關緊要的圖示，最好是給alt屬性一個空字串，但還是留著它。這樣螢幕閱讀器會忽略它，而不是把"著重號"連讀20次。
<img src="dog.gif" alt="Fido and I at the park!" />
<!-- 很好，描述清晰 -->
<img src="bullet.gif" alt="bullet" />
<!-- 不好，顯得多餘 -->
<img src="bullet.gif" alt="" />
<!-- 好 -->
只對表格資料用table標籤
table標籤永遠只應該用在表格資料的展示上。唯一的例外是當編寫HTML格式的郵件時，這種情況下可能table是某些坑爹的郵件客戶端唯一支援的樣式了。
為了可讀性，表格頭永遠要使用<th>元素。同時切記要設定cellpadding,cellspacing和border的值為0， 因為這些樣式由CSS來控制更容易確保一致性。
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>
Cell Header
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell Item
</td>
</tr>
</tbody>
</table>
使用 jQuery 和 jQuery UI Widgets
jQuery 和 jQuery UI 被做成儘可能在不同瀏覽器上表現出幾乎相同的外觀和功能。 jQuery UI 被設計為符合 WAI WCAG 2.0 及 WAI ARIA， 因此採用該框架可以避免在你的站點上執行的外掛或指令碼的所有不確定性。
JavaScript
程式碼留空和格式
任何關於程式碼格式、留空和大括號位置的討論都會引起激烈辯論。對此，我想最簡單的規則就是，除非你願意把整個程式碼檔案重新格式化，不然還是尊重並保持已有程式碼檔案的格式。這意味著如果你看到一個JS檔案裡的大括號沒有換行寫，那你的程式碼也要繼續保持大括號不換行。如果你的程式碼沒有和程式碼檔案裡的其他部分保持一致，那麼你的程式碼就不應該通過程式碼審查流程。
一致的程式碼格式讓程式碼更加易讀，同時也意味著程式碼容易用查詢/替換命令進行修改。謝天謝地，我們自己形成的程式設計習慣和jQuery正式推薦的方式非常相似。細微的差異也是有的，不過，那些是個人問題或者我們覺得沒法維護的一些東西。 參閱jQuery核心樣式指南
字元間距
// 不好
if(blah==="foo"){
foo("bar");
}
// 好 :)
if (blah === "foo") {
foo("bar");
}
大括號不換行
// 不好
if (foo)
{
bar();
}
// 好 :)
if (foo) {
bar();
}