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