为页面添加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>