3月

2001

分類:

標籤: w3c xhtml xml

最近更新: 2005-07-14

XHTML 1.0 指引重點提要

本文重點提示了 XHTML 的使用指引，讓網頁設計者以及使用 HTML 編寫文件的作者 (如筆者本人) 更快了解 XHTML 以及 HTML 的差異，並將之實際運用在網頁編寫中。

首次發佈於 2001/3/28 ，在我的個人網頁中。這次發佈到部落格中，除了重新排版外，也修增了一些內容。現在 XHTML 2.0 的規格都已經在製訂中了，真是惚如昨日。

對一般使用者而言，讓自己的文件格式符合 XHTML 1.0 會帶來以下的好處：

對各式瀏覽工具的支援: 隨著網路應用的普及，各種上網方式也不斷出現。現在，人們不僅透過電腦上網，也會透過 PDA 、行動電話等各種通訊設備上網。 XHTML 規格簡化了程式人員在這些通訊設備上開發瀏覽器的工作。而採用 XHTML 規格編寫你的文件，也可讓你的文件儘可能地在各式通訊設備上被閱覽。
更結構性的標籤使用，可以使文件的內容顯示地更有層次。一方面避免了因標籤誤用所造成顯示錯誤問題，另一方面也減少使用者在編寫網頁時的困擾，特別是對那些使用純文字編輯工具 (plain text editors) 的使用者來說，這方面的好處更為明顯。
XHTML 更容易 CSS 搭配。透過 CSS ，將你的樣式內容從本文內容中抽離出來，你的 XHTML 文件不再滿佈各式樣式語法。在編寫文件內容時，編輯畫面更簡潔易讀。

文件的檢測

當你的 XHTML 文件編寫完成後，你可以到 W3C 的網站，利用 W3C 提供的檢測服務，檢驗你的文件格式是否正確。W3C 的檢測服務網址: http://validator.w3.org/ 。當你的文件通過檢測並且你的 XHTML 文件是放在網路上供大眾閱覽時，可以把檢測結果所提供的檢測合格圖示，放在你的網頁上。

<p>
 <a href="http://validator.w3.org/check?uri=referer"><img
    src="http://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>

若你的 XHTML 文件是放在自己的電腦主機時，使用「Validate by File Upload」上傳你的 XHTML 文件進行檢測。

一個可下載的檢測程式: http://www.w3.org/People/Raggett/tidy/

一、文件的 DTD

文件開頭的範例如下:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

第一行必須以 XML 標明文件編碼，中文 Big5 碼應標為: <?xml version="1.0" encoding="big5"?> 。預設是 utf-8: <?xml version="1.0" encoding="utf-8"?>。

接著必須以 DOCTYPE 說明文件的 DTD ，分別是: Strict, Transitional, and Frameset.

嚴謹的 (Strict)

最具結構性的文件格式定義，這種文件的外觀，較近似於 XML 文件，而不像一般的 HTML 文件。符合這種格式的文件，可相容 XHTML 1.1, XHTML 2.0 規格。但不常用。

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "DTD/xhtml1-strict.dtd">

過渡性的 (Transitional)

正如其名，這種格式定義介於 HTML 以及 XML 之間。大部份的 HTML 文件，只須小幅度的修改，便可符合 XHTML 1.0 規格。這是網頁設計人員以及使用純文字編輯器編輯作品的作者，最常用的格式定義。

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "DTD/xhtml1-transitional.dtd">

框架 (Frameset)

這是專門對 HTML 的 frameset 標籤的格式定義，然而在 frameset 被多數網頁設計者所排斥，同時為 HTML 4 所建議停用之時，不建議再使用。

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "DTD/xhtml1-frameset.dtd">

一個基本的 XHTML 文件內容

在基本的 XML 宣告以及文件格式定義後，接下來就是熟悉的 HTML 內容了。首先是 <html> 標籤，而且應該要加上 xmlns 元素及 lang 元素， xmlns 的值必為"http://www.w3.org/1999/xhtml" ，而 lang 元素表示元素的語系並非指文件的編碼。在此一律用 "en"，例如: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 。基於 XHTML 的文件結構化要求，一份 XHTML 文件，其正文內容應包含在 <html> 標籤中，同時應分成 <head> 及 <body> 兩個區塊。

一個最基本的 XHTML 文件內容範例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "DTD/xhtml1-Transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

二、標籤及元素的語法

Documents must be well-formed (文件必須是符合文法的) 。

1)標籤必須成巢狀，不可以層疊。

正確: xxxzzzyy

錯誤: xxxzzzyy

2) 所有元素及屬性名稱，必須小寫。

以往的 HTML 忽略大小寫的差異，但 XML 對大小寫敏感，因此 XHTML 中，要求所有元素及屬性名稱必須小寫。

3)成對的標籤必須完整使用，不可省略結束的標籤。

成對標籤，如 , <li> </li> 這些成對的標籤，以往可以省略結束的 ,</li> ，但 XHTML 中不允許。空元素(非成對標籤)，必須以 /> 結尾，例如以往的 , <hr>, <img> ，都要改成 , <hr />, <img />。為了讓某些瀏覽器不致於解讀錯誤，在標籤名稱與結尾的 /> 間，最好空一格。

正確:
<p>xxx</p><p>yyy</p>
<br />
<ul>
  <li>first</li> 
  <li>second</li>
</ul>

錯誤:
<p>xxx<p>yyy
<br>
<ul>
  <li>first
  <li>second
</ul>

4) 屬性值必須使用引號括起。

以往的 HTML 中不要求必須括起。

正確: <table rows="3">

錯誤: <table rows=3>

5) 不允許省略屬性的值。

例如 frame 的 noresize ， table 的 border ， td 的 nowrap 等。修改方式是將屬性名做為屬性值再寫一次。

正確: <frame noresize="noresize">

錯誤: <frame noresize>

6)關於 script 或 style 的內容

在 script 或 style 元素中，應加上 CDATA 的宣告，以避免對 <, > 字元的解讀錯誤。或者，將 script 或 style 的內容，編寫在外部的 Script 或 Style-Sheets 檔中。正確範例:

<script>
<![CDATA[ ...
    unescaped script content ...
]]>
</script>

7)關於 id 與 name 。

在 HTML 4 中，可使用 name 元素，在 a, applet, form, frame, iframe, img, and map 之中。而在 XML 中，則使用 id ，因此在 XHTML 中，全部改成使用 id 而不使用 name 。在文件中，為了同時兼顧 HTML 的向後相容，及 XHTML 的向前相容，建議 id 及 name 同時使用，例如:

<a href="xxxx" name="link1" id="link1"> </a>

三、字元編碼及特殊字元

在宣告文件的字元編碼時，可以同時使用 xml 語法，如: <?xml version="1.0" encoding="big5"?>。以及 HTML 語法，如: <meta http-equiv="Content-type" content="text/html; charset='big5'" />。當兩者有衝突時，以 XML 語法為準。

在屬性值中的 [&] 字元，應改寫為 [&] 。例如建立 URL 為 http://aaa.bbb/xxx.cgi?name=abc&id=xyz 之連結時，應寫成: <a href="http://aaa.bbb/xxx.cgi?name=abc&id=xyz"></a>

其他

完整的 XHTML 使用指引事項，可參閱下列網址:

(英文) http://www.w3.org/TR/xhtml1/#guidelines
(簡體中文) http://chinese-school.netfirms.com/XHTML10-TC.html

對於即視型網頁設計工具的使用者，下列工具是已知支援 XHTML 1.0 規格，語法採用 XHTML 1.0 。

Dreamweaver MX or later.
Namo WebEditor 5.x or later.
Nvu 1.0 or later.

樂多舊網址: http://blog.roodo.com/rocksaying/archives/267577.html