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

2019-10-26 17:25: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 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屬性