為頁面添加DOCTYPE
由于不同瀏覽器對標(biāo)簽,樣式表的解釋不盡相同,所以需要為html文件定義一個標(biāo)準(zhǔn)的文檔類型,使不同瀏覽器盡量按照一個統(tǒng)一的html標(biāo)準(zhǔn)來解析渲染頁面。
!DOCTYPE 聲明指定文檔遵從的 DTD,如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
標(biāo)準(zhǔn)HTML標(biāo)簽的正確使用
盡量使用div+css布局,不用table做布局。
使用table做布局容易造成代碼冗余,相對<div></div>編寫來說,代碼繁多。并且,table需要將元素都下載后進(jìn)行顯示,相應(yīng)的網(wǎng)頁打開速度也較慢。
應(yīng)該使用標(biāo)準(zhǔn)化的頁面結(jié)構(gòu):DIV+CSS。這種布局方式代碼簡潔,頁面瀏覽速度較快,頁面布局靈活,改版時只需改CSS樣式即可實現(xiàn)頁面重新布局,而不用改動程序,從而降低了網(wǎng)站改版的成本。
注意標(biāo)簽的閉合關(guān)系,尤其是在form標(biāo)簽中嵌套div等其他標(biāo)簽時。
有的時候頁面上會出現(xiàn)多余的空白,即使重新設(shè)置了margin也無法避免,這個時候有可能是頁面元素標(biāo)簽閉合出現(xiàn)了不配對的情況,如:
<div class=”outer”>
<form name=”testForm”>
<div class=”inner”>
<input name=”title” type=”text” />
</form>
</div>
</div>
定義table時使用tbody元素,以保證包括IE在內(nèi)的所有瀏覽器可正確使用
即使table沒有顯示定義tbody元素,瀏覽器也會認(rèn)為tr節(jié)點的父節(jié)點是一個自動添加的默認(rèn)tbody節(jié)點.為了避免使用javascript操縱tr節(jié)點時可能產(chǎn)生的誤會, 還是手動添加一個比較好,如:
<table id=”myTable”>
<tbody id=”myTableBody”>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
注意標(biāo)簽及屬性的大小寫
有的時候,有些綁定在元素上的事件在IE瀏覽器下響應(yīng),在safari或其他瀏覽器下卻不響應(yīng)。這時候需要檢查事件綁定方式的正確性,高級事件的綁定需要區(qū)別IE和其他瀏覽器寫兩套javascript,而簡單事件模型需要注意一下綁定事件名的大小寫。如:
<input type=”text” name=”keywordSearch” onFocus=”clearValue()” >
這里應(yīng)該用小寫的onfocus,并且顯示的添加標(biāo)簽閉合符號才是規(guī)范的寫法。
<input type=”text” name=”keywordSearch” onfocus=”clearValue()” />
注意標(biāo)簽的屬性值設(shè)置
<script>標(biāo)簽的language和type屬性
<script>標(biāo)簽的language屬性是用來定義腳本語言版本的,正確的賦值應(yīng)該形如<script>用來告訴瀏覽器(主要是IE)使用1.2版本的javascript語法來解釋;而type屬性才是用來定義腳本類型的,是w3c的標(biāo)準(zhǔn)屬性,并且使用小寫屬性才是符合標(biāo)準(zhǔn)的做法。如果不是特別情況下需要告訴瀏覽器按照較低版本的javascrip語言進(jìn)行解釋的話(目前大多數(shù)瀏覽器支持的javascript版本是1.5),一般不需要定義language屬性,但是type屬性是需要定義的。所以應(yīng)該把代碼中的
<SCRIPT Language="JavaScript">改為<script>
<a>標(biāo)簽的alt和title屬性
雖然alt和title這兩個屬性的值在IE下都會以tool tip的方式在鼠標(biāo)懸停時顯示,但是二者還是有區(qū)別的。alt是圖片沒有顯示出來的時候的替代顯示,而title才是鼠標(biāo)放到上面時的提示。
<input>標(biāo)簽的checked、readonly屬性
在早期版本的HTML中,并沒有強制規(guī)定所有的屬性都應(yīng)該賦值,在表示一個選中的復(fù)選框時,<input checked > 這樣的寫法是被認(rèn)可的。但是根據(jù)XHTML的標(biāo)準(zhǔn),這樣的文法并不是一個嚴(yán)格的XML格式,應(yīng)該注意對屬性的賦值和標(biāo)簽的閉合,以順應(yīng)HTML標(biāo)準(zhǔn)發(fā)展的趨勢,寫成這樣:
<input checked="checked" />
<input readonly="readonly" />
<option>標(biāo)簽的select ed屬性
與上一條相同的理由,<select>選項中<option>標(biāo)簽的selected屬性也應(yīng)該賦值:
< option selected="selected" />
<img>標(biāo)簽的 align="absmiddle" 屬性
根據(jù)XHTML的標(biāo)準(zhǔn),HTML標(biāo)簽應(yīng)該專注于內(nèi)容的表示,而不是樣式的控制,樣式應(yīng)該交給CSS調(diào)整。所以廢棄了一些舊的標(biāo)簽和屬性,比如<em>標(biāo)簽和<i>標(biāo)簽都會讓標(biāo)簽內(nèi)容中文字以斜體顯示,但是<i>標(biāo)簽這種單純以樣式命名的標(biāo)簽已經(jīng)屬于廢棄的標(biāo)準(zhǔn)了,取而代之的是表示emphasis(強調(diào))含義的<em>標(biāo)簽。同理,<img>標(biāo)簽的和align="absmiddle" 屬性表示該圖片和相鄰文字垂直居中對齊,這也是表示樣式的屬性,應(yīng)該使用CSS而不是這個屬性來控制圖片的對齊樣式,避免兩處樣式控制的相互影響。
<iframe>標(biāo)簽的frameborder屬性
在使用iframe時,IE中或許只要設(shè)置border=“0”就可以不顯示iframe的邊框了,但是標(biāo)準(zhǔn)的控制frame窗口邊框的屬性是frameborder,應(yīng)該設(shè)置frameborder=“0”才能在IE之外的其他瀏覽器中同樣隱藏frame的邊框:
<iframe frameborder="0" />
<table>標(biāo)簽的cellpadding屬性
這個屬性同<img>標(biāo)簽的 align屬性一樣,也是一個僭越了HTML自身表示內(nèi)容的職責(zé)而控制樣式的一個屬性,它規(guī)定的是單元之間的空間。從實用角度出發(fā),最好不要規(guī)定 cellpadding,而是使用 CSS 來控制單元格的內(nèi)邊距。
<td>標(biāo)簽的nowrap屬性
nowrap是表示內(nèi)容不自動換行的屬性,但是同上面的屬性一樣,這是一個控制樣式的屬性。在 HTML 4.01 中,<td>標(biāo)簽的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被贊成使用的。在 XHTML 1.0 Strict DTD 中,<td>標(biāo)簽的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被支持的。