前端代碼標準最佳實踐：HTML篇

看見就非常 2012-08-31

展開全文

前端代碼標準最佳實踐：HTML篇

Web前端代碼中，HTML是根本，CSS和JavaScript也是圍繞著既有的HTML結(jié)構(gòu)來構(gòu)建，所以良好的HTML代碼結(jié)構(gòu)，除了提高了HTML代碼的可讀性，可維護性和執(zhí)行性能之外，也可以讓相對應(yīng)的CSS和JavaScript代碼更好的構(gòu)建。距前面兩篇探討JavaScript（前端代碼標準最佳實踐：JavaScript篇）和CSS（前端代碼標準最佳實踐：CSS篇）之后，我們今天來探討Web前端HTML的一些最佳實踐。

（1）HTML代碼的基本規(guī)范

1. HTML的命名和格式

任何代碼的混亂都是從命名和格式的混亂開始的，所以一定要有統(tǒng)一和規(guī)范的命名和格式，以下是一些基本的規(guī)范。

HTML代碼所有的標簽名和屬性應(yīng)該都為小寫，雖然HTML代碼是大小寫不敏感的，但是W3c的規(guī)范建議為小寫；屬性值應(yīng)該用雙引號包括。

給所有的關(guān)鍵元素定義元素的id和class，便于和CSS，JavaScript的交互；id名稱中的關(guān)鍵詞用下劃線（_）連接，class的關(guān)鍵詞用中劃線（-）連接，根據(jù)實際的意義和Dom樹的層級關(guān)系定義合適的名稱。

HTML代碼的層級縮進為4個空格；值為空的元素定義應(yīng)該單獨占用一行；包含子元素的元素的起始標簽和閉合標簽分別單獨占用一行。

例子：

<div id="info_container" class="info-container">
    <div class="container-top"></div>
    <article>
         ...
    </article>
    <div class="container-bottom"></div>
</div>

2 CSS代碼和HTML代碼分離

樣式可以直接寫在標簽的style屬性里面，也可以寫在頁面head區(qū)域的style標簽里面，這兩種方式都是不好的方式，尤其第一種方式。應(yīng)該把樣式單獨寫到css樣式文件中，方便代碼的重用和維護。

3. 寫標準的HTML代碼

所有的HTML標簽應(yīng)該正確閉合；所有的元素定義都要有起始和閉合標簽，即使元素的值為空，除了如下這些標簽，如下的標簽是可以自閉合：<br/><hr/><input/><img/>等。

停止規(guī)范不支持的標簽，如下的標簽規(guī)范已經(jīng)不推薦使用，盡管瀏覽器可以正確的解析：<center><font><s><strike><u><menu>等。

停止使用規(guī)范不支持的屬性，如下的屬性已經(jīng)不推薦使用：body的background屬性，某些標簽的align屬性，td和th上的nowrap屬性，某些標簽的width和height屬性等。其實這些規(guī)范不推薦的標簽和屬性都是一些影響外觀的標簽和屬性，都可以通過CSS樣式來設(shè)置。

應(yīng)該經(jīng)常驗證代碼的標準性，可以使用w3c提供的驗證工具:Unicorn。

（2）高可讀性的HTML代碼

1. 合適的地方用合適的標簽

HTML代碼不是純粹為了讓瀏覽器展現(xiàn)，也需要良好的可讀性，方便代碼的檢查和維護，更重要的是各種搜索引擎也能更好地識別頁面內(nèi)容，所以要寫有語義的HTML代碼，即經(jīng)常提到的HTML標簽語義化。

div和span是兩個典型的沒有任何語義的標簽，所以使用這兩個標簽之前先確認，是否有更具有語義的標簽可以代替。

<h1>~<h6>

h1到h6是作為標題的，h1是最高級別的標題，網(wǎng)頁中顯示標題的地方應(yīng)該使用這些標題標簽。

<em>和<strong>

這兩個標簽的語義是強調(diào)和重點強調(diào)，代替了沒有任何語義的標簽<i>和<b>。

<table>

table標簽最早是經(jīng)常用于布局，至今還有大量的頁面是由table來布局的，table布局遭到了前端工程師們的一致唾棄，使得很多新手不敢使用這個標簽了，這里要強調(diào)的是table的語義是表格，如果需要列出一些統(tǒng)計數(shù)據(jù)等，table標簽是首選。

<ul>，<ol>，<li>

<ul>是無序列表，<ol>是有序列表，所以網(wǎng)頁的導(dǎo)航菜單最合適用ul，而一些有序的列表，比如章節(jié)列表等，則應(yīng)該用ol標簽。

不好的例子：

<div class="title">文章標題</div>

<p>
正文內(nèi)容，<b>需要強調(diào)的內(nèi)容</b>
</p>

<div class="main-menu">
    <span>導(dǎo)航1</span>
    <span>導(dǎo)航2</span>
    <span>導(dǎo)航3</span>
</div>

規(guī)范的例子：

<h1>文章標題</h1>

<p>
正文內(nèi)容，<strong>需要強調(diào)的內(nèi)容</strong>
</p>

<ul class="main-menu">
    <li>導(dǎo)航1</li>
    <li>導(dǎo)航2</li>
    <li>導(dǎo)航3</li>
</ul>

2. 給頁面添加必要的meta

meta信息描述有關(guān)頁面的信息，放在頁面的head部分，用于搜索引擎更友好的識別。如下是常用的一些定義：

<meta name="author" content="John Doe">
<meta name="copyright" content="&copy; 1997 Acme Corp.">
<meta name="keywords" content="corporate,guidelines,cataloging">
<meta name="date" content="1994-11-06T08:49:37+00:00">

3. 不要省略某些標簽的屬性

<img>標簽的alt屬性的作用是當圖片不能正常顯示的時候的替換文字，<a>標簽的title屬性可作為說明信息，并且當鼠標hover時顯示為提示信息。

（3）高性能的HMTL代碼

1. CSS文件在前，JavaScript文件在后，JavaScript代碼放到頁面底部

JavaScript文件的下載和解析會阻塞頁面的加載，所以在head部分，CSS的引用寫在前面，而JavaScript文件的引用寫在后面；

另外script標簽有兩個屬性async和defer,defer設(shè)置為true,則意味著此JavaScript文件滯后執(zhí)行,不影響頁面HTML的渲染，async是HTML5中新引入的屬性，已經(jīng)得到了大多數(shù)現(xiàn)代瀏覽器的支持，此屬性設(shè)置為true意味著文件異步加載和執(zhí)行。兩個屬性的區(qū)別是async下載完成后就會執(zhí)行，而defer則會還是按照在頁面的的次序來執(zhí)行，所以下載和執(zhí)行不一定會連續(xù)?？梢愿鶕?jù)實際的項目情況設(shè)置這兩個屬性，提高頁面加載的速度。

2. 精簡HTML代碼

越精簡的HTML代碼，頁面的傳輸?shù)臅r間就會越短，頁面的渲染的時間也會更快,相應(yīng)的用戶體驗就會越好，所以很有必要精簡頁面加載的HTML代碼。

頁面的精簡主要從如下幾個地方入手：

刪除多余標簽

多余的標簽大多是為了方便布局而加入的，例如如下的代碼：

<div>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>

代碼中最外層的div標簽大部分情況下是沒有必要，其內(nèi)層的ul標簽可以完全擔當其作用，可以直接刪除此標簽，并適當調(diào)整ul的樣式。

動態(tài)加載和渲染非關(guān)鍵區(qū)域

在頁面中某些區(qū)域并不是用戶重點關(guān)注的區(qū)域，例如頁面的廣告，一些統(tǒng)計信息等，此類內(nèi)容可以等待頁面關(guān)鍵區(qū)域加載后通過javascript代碼動態(tài)加載和顯示。

3. 謹慎使用iframe

iframe有兩個缺點：1，iframe會阻塞主頁面的Onload事件；2，iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點。
如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。

總結(jié)

以上是一些常見的HTML開發(fā)過程中要注意的地方，其實有關(guān)HTML還有很多細節(jié)的技巧，需要我們在實踐中不斷的總結(jié)。本文的目的在于拋磚引玉，讓大家重視代碼的可讀性，可維護性，以及代碼的性能，在開發(fā)的過程中有意識地去考慮這些問題，養(yǎng)成良好的編碼習(xí)慣比熟悉某項開發(fā)技術(shù)更重要。