跨瀏覽器開發經驗總結（一） HTML標記

2020-03-24 19:08:35

字體：大中小

來源：轉載

供稿：網友

為頁面添加DOCTYPE
由于不同瀏覽器對標簽,樣式表的解釋不盡相同,所以需要為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 > form name= testForm
div > 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 是不被支持的。
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML IMG標簽的屬性是有哪些？了解IMG標簽的用法

下一篇：10個html實體入門教程推薦