<< PHP 官方參考手冊更新 | 回blog首頁 | 在 Windows 上使用 Trac on Apache - 安裝與設定篇 >>

2007年02月4日

5 個我在舊專案的 XHTML 中常發現的問題

最近在一些維護一些舊專案裡的頁面，它們都已經採用了 XHTML 1.0 Transitional 。一個正確的 XHTML 1.0 Transitional 頁面的範例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Page Title</title>
</head>
<body>
...
</body>
</html>

當然大部份頁面是符合的，不過我還是發現了一些問題；在這裡我把它們記下來，供往後開發時參考。


XML 宣告

其實 XHTML 是屬於 XML 的子集，所以正確來說應該要加入以下這行：

<?xml version="1.0" encoding="big5" ?>

它稱為 XML prolog ，是在 XML 第一行所必須加入的宣告。

不過這會引發兩個問題：

  1. <? 會和 PHP 的 short tag 衝突。
  2. 會使得 IE6 進入相容模式，使得 CSS 的 Box 模型變得難以控制。

不過幸好不加 prolog 也能夠使得 XHTML 被正確的驗證，所以這裡建議不要使用 prolog 。

標籤屬性

以下的 HTML 碼，常在大量使用 JavaScript 的頁面上可以看得到：

<select name="xxxx" onChange="xxxx">

事實上 XHTML 建議標籤名稱及其屬性全部使用小寫，所以 onChange 的寫法是不對的，應該使用 onchange 。當然其他 onxxxx 也是，這點有使用 Dreamweaver 的人要特別注意。

還有一種標籤屬性的問題很常見，例如：

<option value="xxx" selected>xxx</option>

或是

<input type="checkbox" name="xxx" value="xxx" checked />

XHTML 規定所有的屬性都要有屬性值，而 selected 和 checked 這類的屬性值就是屬性名稱，例如：

<option value="xxx" selected="selected">xxx</option>

及

<input type="checkbox" name="xxx" value="xxx" checked="checked" />

其他還有 nowarp 、 noshade 等。

script 標籤

script 標籤可以放在 head 區及 body 標籤區裡，但是絕不能放在這兩者之外。還有我也常看到以下寫法：

<script language="javascript" type="text/javascript">
// 程式寫在這裡
</script>

但事實上 script 標籤的 language 屬性已經從 HTML 4.01 規格中被廢除，建議改用 type 屬性來代替就好。所以正確標記如下：

<script type="text/javascript">
// 程式寫在這裡
</script>

另外有人主張用 <!-- --> 去隱藏 Script 標籤裡的程式碼，例如：

<script type="text/javascript">
<!-- //
// 程式寫在這裡
// -->
</script>

不過用這個方式時，要小心不要在 script 標籤的程式裡出現 < 這個字元，或是 </ 這個組合，否則就會導致 XHTML 驗證失敗。

我個人是用以下的方式，這樣可以避免掉驗證時的問題：

<script type="text/javascript">
<!-- <![CDTA[
var abc = "<" + "/";
alert(abc + "script>");
// ]]> -->
</script>

重點在 script 標籤裡的內容是屬於 CDATA 格式，只要讓驗證器知道這件事後，它就不會管 script 標籤裡是什麼了 (不過 </ 這個組合還是要避免) 。

註：我找到了一篇文章： Javascript and XHTML ，有興趣的話可以參考看看。

style 標籤

style 標籤只能放在 head 標籤區內，而不能放在 body 區。而且 style 標籤一定要加上 type 屬性，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
....
<style type="text/css">
CSS 內容放這裡 
</style>
.... 
</head>

img 標籤的 alt 屬性

img 的 alt 屬性是當 src 屬性所指向的圖檔不存在時，用來代替顯示的文字。我在舊專案裡遇到 XHTML 無法正確驗證的原因，絕大部份是 img 標籤缺少 alt 屬性。因此無論如何我們都應該要在 img 標籤裡加上 alt 屬性，不僅能通過驗證，使用者也能在沒看到圖片的情況下，知道這張圖片的用途。

不過有一些 img 標籤是用來撐開版面用的 (Dreamweaver 的餘毒) ，這時我們只好給它們一個空的 alt 屬性。

結論

當然以上只是舊專案頁面問題的冰山一角，不過卻是非常常見的錯誤。我個人是習慣把它們銘記在心，並配合 W3C 的驗證服務來找出這些問題。而處理頁面時只要多花一點點時間把它們做好，便能夠透過這樣的方式來訓練自己朝 Web 標準及無障礙瀏覽之路前進。


Posted by jaceju at 樂多Roodo! │16:28 │回應(3) │引用(0) │Web 開發
樂多分類：網路/3C 共同主題：分享 工具：加入樂多書籤│編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/2695133
回應文章
可以考慮使用 http://www.w3.org/tr/html4/strict.dtd" 喔 :)
Posted by green at 2007年02月4日 19:41
To green:

感謝你的建議 :)

這個模式雖然是可以的，不過它在瀏覽器的模式切換上有點小混亂 (IE: 標準模式 / Gecko: 近乎標準模式) 。而我個人覺得最好統一走標準模式，這樣 CSS 模型才不會有太大的差異 (當然我也不再考慮 IE5 了) 。綜合以上的原因，所以我才會使用 XHTML 1.0 Transitional 。

當然這是我的理由，也不是什麼金玉良言，你參考看看就好 :)
Posted by jaceju at 2007年02月4日 20:10
你講的每一點都很有幫助，對我來說~
Posted by jrbin at 2007年02月15日 13:46
  


回最上方