跨瀏覽器開發經驗總結（一） HTML標籤 _HTML/Xhtml_網頁製作

为页面添加DOCTYPE
由于不同浏览器对标签,样式表的解释不尽相同,所以需要为html文件定义一个标准的文档类型,使不同浏览器尽量按照一个统一的html标准来解析渲染页面。

!DOCTYPE 声明指定文档遵从的 DTD，如：






标准HTML标签的正确使用
尽量使用div+css布局,不用table做布局。
使用table做布局容易造成代码冗余，相对

编写来说，代码繁多。并且，table需要将元素都下载后进行显示，相应的网页打开速度也较慢。

应该使用标准化的页面结构：DIV+CSS。这种布局方式代码简洁，页面浏览速度较快，页面布局灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。

注意标签的闭合关系,尤其是在form标签中嵌套div等其他标签时。
有的时候页面上会出现多余的空白，即使重新设置了margin也无法避免，这个时候有可能是页面元素标签闭合出现了不配对的情况，如：

定義table時使用tbody元素，以確保包括IE在內的所有瀏覽器可正確使用
即使table沒有顯示定義tbody元素,瀏覽器也會認為tr節點的父節點是一個自動添加的預設tbody節點.為了避免使用javascript操縱tr節點時可能產生的誤會, 還是手動添加一個比較好，如：









注意標籤及屬性的大小寫
有的時候，有些綁定在元素上的事件在IE瀏覽器下響應，在safari或其他瀏覽器下卻不響應。這時候需要檢查事件綁定方式的正確性，高階事件的綁定需要區別IE和其他瀏覽器寫兩套javascript，而簡單事件模型需要注意一下綁定事件名的大小寫。如：



這裡應該用小寫的onfocus，並且顯示的添加標籤閉合符號才是規範的寫法。





注意標籤的屬性值設定
<script>標籤的language和type屬性<br /><script>標籤的language屬性是用來定義腳本語言版本的，正確的賦值應該形如<script>用來告訴瀏覽器（主要是IE ）使用1.2版本的javascript語法來解釋；而type屬性才是用來定義腳本類型的，是w3c的標準屬性，並且使用小寫屬性才是符合標準的做法。如果不是特別情況下需要告訴瀏覽器按照較低版本的javascrip語言進行解釋的話（目前大多數瀏覽器支援的javascript版本是1.5），一般不需要定義language屬性，但是type屬性是需要定義的。所以應該把程式碼中的<br /><br /><strong><SCRIPT Language="JavaScript">改為<script> <br /><br /><strong><a>標籤的alt和title屬性 <br />雖然alt和title這兩個屬性的值在IE下都會以tool tip的方式在滑鼠懸停時顯示，但二者還是有差別的。 alt是圖片沒有顯示出來的時候的替代顯示，而title才是滑鼠放到上面時的提示。 <br /><br /><strong><input>標籤的checked、readonly屬性 <br />在早期版本的HTML中，並沒有強制規定所有的屬性都應該賦值，在表示一個選取的複選框時，<input checked > 這樣的寫法是被認可的。但根據XHTML的標準，這樣的文法並不是一個嚴格的XML格式，應該注意對屬性的賦值和標籤的閉合，以順應HTML標準發展的趨勢，寫成這樣： <br /><br /><strong><input checked="checked" /> <br /><br /><strong><input readonly="readonly" /> <br /><br /><strong><option>標籤的select ed > <br />與上一條相同的理由，<select>選項中<option>標籤的selected屬性也應該賦值： <br /><br />< option selected="selected" /> <br /><br /><br /><img alt="跨瀏覽器開發經驗總結（一） HTML標籤 _HTML/Xhtml_網頁製作" >標籤的align="absmiddle" 屬性<strong> 根據XHTML的標準，HTML標籤應該專注於內容的表示，而不是樣式的控制，樣式應該交給CSS調整。所以廢棄了一些舊的標籤和屬性，例如<em>標籤和<i>標籤都會讓標籤內容中文字以斜體顯示，但是<i>標籤這種單純以樣式命名的標籤已經屬於廢棄的標準了，取而代之的是表示emphasis（強調）意義的<em>標籤。同理，<img alt="跨瀏覽器開發經驗總結（一） HTML標籤 _HTML/Xhtml_網頁製作" >標籤的和align="absmiddle" 屬性表示該圖片和相鄰文字垂直居中對齊，這也是表示樣式的屬性，應該使用CSS而不是這個屬性來控制圖片的對齊樣式，避免兩處樣式控制的相互影響。 <br /><br /><br /><iframe>標籤的frameborder屬性<strong> 在使用iframe時，IE中或許只要設定border=「0」就可以不顯示iframe的邊框了，但是標準的控制frame視窗邊框的屬性是frameborder，應該設定frameborder=“0”才能在IE以外的其他瀏覽器中同樣隱藏frame的邊框： <br /><br /><iframe frameborder="0" /> <br /><br /><br /><table>標籤的cellpadding屬性<strong> 這個屬性同<img alt="跨瀏覽器開發經驗總結（一） HTML標籤 _HTML/Xhtml_網頁製作" >標籤的 align屬性一樣，也是一個篡奪了HTML本身表示內容的職責而控制樣式的屬性，它規定的是單元之間的空間。從實用角度出發，最好不要規定 cellpadding，而是使用 CSS 來控制單元格的內邊距。 <br /><br /><strong><td>標籤的nowrap屬性 <br /><br />nowrap是表示內容不自動換行的屬性，但是同上面的屬性一樣，這是一個控制樣式的屬性。在 HTML 4.01 中，<td>標籤的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被贊成使用的。在 XHTML 1.0 Strict DTD 中，<td>標籤的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被支援的。 </script>