XML - 資料交換管理/XHTML
| 上一章 | 下一章 |
| ← DTD | XPath → |
|
學習目標
|
在前面的章節中，我們學習瞭如何從 XML 文件和 XSL 樣式表生成 HTML 文件。在本節中，我們將學習如何將這些 HTML 文件轉換為有效的 XHTML。我們將討論 XHTML 作為標準演變的原因以及何時應該使用它。
最初，網頁是用 HTML 設計的。不幸的是，這種標記語言的大多數實現都允許各種錯誤和糟糕的格式。主要瀏覽器被設計為寬容的，大多數情況下，糟糕的程式碼會顯示出很少的問題。這種糟糕的程式碼通常在瀏覽器之間不可移植，例如，一個頁面可以在 Netscape 中渲染，但不能在 Internet Explorer 中渲染，反之亦然。對人為錯誤和糟糕格式的處理需要一定量的處理能力，小型手持裝置可能沒有這種能力。因此，在手持裝置上顯示資料時，一個微小的錯誤可能會導致裝置崩潰。
XHTML 部分緩解了這些問題。透過要求 XHTML 文件符合 XML 中定義的更嚴格的規則，減少了處理負擔。除了更嚴格的規則外，HTML 4.01 和 XHTML 1.0 在功能上是等效的。如果文件違反了 XML 的格式良好規則，符合 XHTML 的瀏覽器不能渲染頁面。如果文件格式良好但無效，符合 XHTML 的瀏覽器可能會渲染頁面，因此大量錯誤仍然可以逃脫。
在本節中，我們將詳細檢查如何建立 XHTML 文件。
從設計角度來看，HTML 最大的問題是它從未打算成為圖形設計語言。HTML 的最初版本旨在結構化人類可讀內容（例如，將一段文字標記為段落），而不是格式化它（例如，這段段落應該以 14pt Arial 字型顯示）。HTML 已經遠遠超出了它最初的目的，並且正在被拉伸和操縱以涵蓋最初的 HTML 設計人員從未想象過的情況。
建議的解決方案是使用單獨的語言來描述一組文件的表示。級聯樣式表 (CSS) 是一種用於描述表示的語言。從 XHTML 1.1 版本開始，網頁必須使用 CSS 或具有等效功能的語言（如 XSLT（XSL 轉換））來格式化。在 XHTML 1.0 中，除非使用嚴格變體，否則使用 CSS 或 XSLT 是可選的。HTML 4.01 支援 CSS，但不支援 XSLT。
正如你可能猜到的，XHTML 代表可擴充套件超文字標記語言。它是 HTML 和 XML 之間的交叉。它實現了 HTML 所忽略的兩個主要目的
- XHTML 比 HTML 更加嚴格的標準。XHTML 文件必須像普通 XML 一樣格式良好。這減少了瀏覽器之間的差異和不一致性，因為瀏覽器不需要決定如何顯示格式錯誤的頁面。不允許出現格式錯誤的 XHTML。
注意 1： 只有當 MIME 型別 設定為application/xhtml+xml時，瀏覽器才會執行格式良好性檢查。如果 MIME 型別設定為text/html，瀏覽器將允許格式錯誤的文件。網路上有大量格式錯誤的“XHTML”文件，因為它們的 MIME 型別是text/html。
注意 2： 瀏覽器不需要檢查有效性。有關示例，請參見下面的 無效 XHTML。 - XHTML 允許模組化（m12n）。對於不同的環境，可以定義不同的元素和屬性子集。
關於 XHTML 最好的事情是它幾乎和 HTML 一樣！如果你知道如何編寫 HTML 文件，那麼建立 XHTML 文件對你來說將會非常簡單，不會太麻煩。你必須牢記的最重要的事情是，與 HTML 不同，在 HTML 中，瀏覽器會忽略簡單的錯誤（例如缺少結束標籤），而 XHTML 程式碼必須根據精確的規範編寫。我們將在後面看到，遵守這些嚴格的規範實際上可以讓 XHTML 比 HTML 更靈活。
最少，XHTML 文件必須包含 DOCTYPE 宣告和四個元素：html、head、title 和 body
<!DOCTYPE ... >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="...">
<head>
<title></title>
</head>
<body></body>
</html>
XHTML 文件的開頭 html 標籤必須包含 XHTML 名稱空間的名稱空間宣告。
DOCTYPE 宣告應該出現在 XHTML 文件中的 html 標籤之前。它可以遵循三種格式之一。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
嚴格宣告是最不寬容的。這是新文件的首選 DOCTYPE。嚴格的文件往往是簡化的和乾淨的。所有格式都將出現在 級聯樣式表 中，而不是文件本身。應該包含在級聯樣式表中而不是文件本身的元素包括但不限於
<body text="blue">, <u>nderline</u>, <b>old</b>, <i>talics</i>, and <font color="#9900FF" face="Arial" size="+2">
還有一些情況，你的程式碼需要巢狀在塊級元素中。
錯誤示例
<p>I hope that you enjoy</p> your stay.
正確示例
<p>I hope that you enjoy your stay.</p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
此宣告旨在作為將傳統 HTML 文件遷移到 XHTML 1.0 嚴格的過渡階段。W3C 鼓勵作者在新文件中使用嚴格 DOCTYPE。（XHTML 1.0 過渡 DTD 將讀者引導至 HTML4.01 過渡 DTD 中的相關說明。）
此 DOCTYPE 不需要 CSS 進行格式化；但是，建議使用它。它通常容忍在應使用塊級元素的地方出現的內聯元素。
你可能在新文件中選擇此 DOCTYPE 的原因有兩個。
- 您需要與支援 XHTML 格式化元素但不支援 CSS 的瀏覽器向後相容。這只是一小部分普通使用者（不到 1%）。許多不支援 CSS 的瀏覽器也不支援 HTML 4.0 或 XHTML。但是，它可能在具有比平時更多非常舊（2000 年以前）瀏覽器的公司內部網上有用。
- 您需要連結到框架。使用框架的做法已不再鼓勵，因為它們在許多瀏覽器中效果不佳。
XHTML 1.0 框架集
[edit | edit source]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
如果您要建立包含框架的頁面，則此宣告適用。但是，由於在設計網頁時通常不鼓勵使用框架，因此此宣告應很少使用。
XML 前言
[edit | edit source]此外，W3C 鼓勵 XHTML 作者將以下處理指令作為每個文件的第一行。
<?xml version="1.0" encoding="UTF-8"?>
雖然該處理指令是標準建議的，但它可能會在舊的 Web 瀏覽器（包括 Internet Explorer 版本 6）中導致錯誤。是否包含前言由各個作者決定。
語言
[edit | edit source]最佳做法是在 html 元素上包含可選的 xml:lang 屬性 [1]，以描述文件的主要語言。為了與 HTML 相容，lang 屬性也應使用相同的值指定。對於英文文件，請使用
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
xml:lang 和 lang 屬性也可以在其他元素上指定，以指示文件中語言的更改，例如英文文件中的法語引文。
將 HTML 轉換為 XHTML
[edit | edit source]在本節中，我們將瞭解如何將 HTML 文件轉換為 XHTML 文件。我們將檢查以下每個規則。
- 文件必須格式良好
- 標籤必須正確巢狀
- 元素必須關閉
- 標籤必須為小寫
- 屬性名稱必須為小寫
- 屬性值必須加引號
- 屬性不能最小化
- name 屬性被 id 屬性替換（在 XHTML 1.0 中，name 和 id 應使用相同的值來維護向後相容性）。
- 不允許使用普通與號
- 指令碼和 CSS 必須轉義（將它們包含在
和]]>標籤內）或最好移動到外部檔案中。
文件必須格式良好
[edit | edit source]由於 XHTML 符合所有 XML 標準，因此 XHTML 文件必須根據 W3C 對 XML 文件的建議格式良好。這裡的一些規則再次強調了這一點。我們將考慮不正確和正確的示例。
標籤必須正確巢狀
[edit | edit source]瀏覽器廣泛地容忍 HTML 文件中的錯誤巢狀標籤。
<b><u>
This text is probably bold and underlined, but inside incorrectly nested tags.
</b></u>
上面的文字將顯示為粗體和下劃線，即使結束標籤沒有按正確順序排列。如果標籤巢狀不當，XHTML 頁面將不會顯示，因為它將不被視為有效的 XML 文件。這個問題很容易解決。
<b><u>
This text is bold and underlined and inside properly nested tags.
</u></b>
元素必須關閉
[edit | edit source]同樣，XHTML 文件必須被視為有效的 XML 文件。因此，所有標籤必須關閉。HTML 規範將一些標籤列為具有“可選”結束標籤，例如<p>和<li>標籤。
<p>Here is a list:
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
在 XHTML 中，必須包含結束標籤。
<p>Here is a list: </p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
對於沒有關閉標籤的 HTML 標籤，我們該怎麼辦？一些特殊標籤不需要也不暗示關閉標籤。
<img src="titlebar.gif" alt="Title">
<hr>
<br>
<p>Welcome to my web page!</p>
在 XHTML 中，必須遵循在標籤中包含關閉斜槓的 XML 規則。
<img src="titlebar.gif" alt="title" />
<hr />
<br />
<p>Welcome to my Web page!</p>
請注意，如果關閉斜槓前面沒有空格（<br/>），則當今的一些瀏覽器將錯誤地呈現頁面。雖然這不是官方建議的一部分，但為了相容性，您應該始終包含空格（<br />）。
以下是 HTML 中常見的空標籤。
- area
- base
- basefont
- br
- hr
- img
- input
- link
- meta
- param
標籤必須為小寫
[edit | edit source]在 HTML 中，標籤可以寫成小寫或大寫。事實上，一些 Web 作者更喜歡將標籤寫成大寫，以使它們更容易閱讀。XHTML 要求所有標籤都為小寫。
<H1>This is an example of bad case.</h1>
這種差異是必要的，因為 XML 區分大小寫。XML 會將<H1>和<h1>視為不同的標籤，在上面的示例中會導致問題。
<h1>This is an example of good case.</h1>
問題可以透過將所有標籤更改為小寫來輕鬆解決。
屬性名稱必須為小寫
[edit | edit source]遵循將所有標籤寫成小寫的模式，所有屬性名稱也必須為小寫。
<p CLASS="specialText">Important Notice</p>
正確的標籤很容易建立。
<p class="specialText">Important Notice</p>
屬性值必須加引號
[edit | edit source]一些 HTML 值不需要在它們周圍加引號。它們會被瀏覽器理解。
<table border=1 width=100%>
</table>
XHTML 要求所有屬性都加引號。即使數字、百分比和十六進位制值也必須出現在引號中，才能被視為正確的 XHTML 文件的一部分。
<table border="1" width="100%">
</table>
屬性不能最小化
[edit | edit source]HTML 允許某些屬性以簡寫形式編寫，例如 selected 或 noresize。
<form>
<input checked ... />
<input disabled ... />
</form>
使用 XHTML 時，屬性最小化是被禁止的。相反，請使用語法x="x"，其中 x 是以前被最小化的屬性。
<form>
<input checked="checked" .../>
<input disabled="disabled" .../>
</form>
以下是最小化屬性的完整列表。
- checked
- compact
- declare
- defer
- disabled
- ismap
- nohref
- noresize
- noshade
- nowrap
- readonly
- selected
- multiple
name 屬性被 id 屬性替換
[edit | edit source]HTML 4.01 標準為以下標籤定義了 name 屬性。a, applet, frame, iframe, img,和map.
<a name="anchor">
<img src="banner.gif" name="mybanner" />
</a>
XHTML 已棄用 name 屬性。改為使用 id 屬性。但是，為了確保與當今瀏覽器的向後相容性，最好同時使用 name 和 id 屬性。
<a name="anchor" id="anchor" >
<img src="banner.gif" name="mybanner" id="mybanner" />
</a>
隨著技術的進步，最終將不再需要同時使用這兩個屬性，XHTML 1.1 徹底刪除了 name 屬性。
不支援與號
[edit | edit source]與號在 XHTML 中是非法的。
<a href="home.aspx?status=done&itWorked=false">Home & Garden</a>
它們必須替換為等效的字元程式碼 &。
<a href="home.aspx?status=done&amp;itWorked=false">Home &amp; Garden</a>
影像 alt 屬性是必需的
[edit | edit source]由於 XHTML 旨在在不同型別的裝置上檢視，其中一些裝置不支援影像，因此必須為所有影像包含 alt 屬性。
<img src="titlebar.gif">
請記住，在 XHTML 中，img 標籤必須包含一個關閉斜槓！
<img src="titlebar.gif" alt="title" />
內部指令碼和 CSS 通常包含諸如＆號和小於號之類的字元。
<script language="JavaScript">
<!--
document.write('Hello World!');
//-->
</script>
如果使用內部指令碼或 CSS，請將它們包含在標籤內<![CDATA[和]]>。這將標記它們為字元資料，不應該被解析。如果不使用這些標籤，諸如 & 和 < 之類的字元將分別被視為字元實體的開始（如 ）和標籤（如 <b>）。這將導致頁面行為不可預測，並且可能使程式碼無效。
此外，type 屬性對於指令碼是必需的。註釋標籤<!--和-->傳統上用於隱藏與非相容瀏覽器不相容的 JavaScript 的標籤不應該被包含在內。XML 標準規定，包含在註釋標籤中的文字可以完全從渲染的文件中排除，這將丟失所有包含在標籤中的指令碼。
<script type="text/javascript" language="javascript">
/*<![CDATA[*/
document.write('Hello World!');
/*]]>*/
</script>
此外，document.write(); 在 XHTML 文件中不允許使用。必須使用節點建立方法，例如 document.createElementNS();。令人困惑的是，如果文件錯誤地以 text/html（HTML 文件的型別）而不是 application/xhtml+xml（XHTML 文件的型別）的 MIME 型別提供服務，document.write(); 似乎按預期工作。如果 MIME 型別是 text/html，則文件將被解析為 HTML，這允許使用 document.write();。將文件解析為 HTML 背離了將其寫入 XHTML 的目的。
內部樣式表必須進行類似的更改。
<style>
<!--
.SpecialClass {
color: #000000;
}
-->
</style>
必須包含 type 屬性，並且應使用 CDATA 標籤。
<style type="text/css">
/*<![CDATA[*/
.SpecialClass {
color: #000000;
}
/*]]>*/
</style>
由於指令碼和 CSS 可能使 XHTML 文件變得複雜，因此強烈建議將它們分別放置在外部 .js 和 .css 檔案中。然後可以從 XHTML 文件中連結到它們。
<script src="myscript.js" type="text/javascript" />
<link href="styles.css" type="text/css" rel="stylesheet" />
W3C 建議指出，某些元素可能不能包含在 XHTML 文件中的其他元素中，即使包含它們不會違反任何 XML 規則。受影響的元素列在下面。
| 元素 | 不能包含 ... |
|---|---|
| a | a |
| pre | big, img, object, small, sub, sup |
| button | button, fieldset, form, iframe, input, isindex, label, select, textarea |
| label | label |
| form | form |
到目前為止，將 HTML 文件轉換為 XHTML 可能聽起來很容易，但很乏味。您什麼時候想將現有頁面轉換為 XHTML？在決定更改整個網站之前，請考慮以下問題。
- 您是否希望您的頁面能夠輕鬆地在非傳統支援網際網路的裝置上檢視，例如 PDA 或支援 Web 的電話？這將是您網站未來目標嗎？ XHTML 是支援 Web 的行動式裝置的首選語言。現在可能是您承諾建立一個全 XHTML 網站的好時機。
- 您是否計劃將來使用 XML？ 如果是這樣，XHTML 可能是開始的合乎邏輯的地方。如果您領導著一個習慣使用 HTML 的設計師團隊，那麼 XHTML 只需要一小步。對於初學者來說，學習 XHTML 可能比從頭開始教他們所有關於 XML 的知識更容易。
- 您的網站是否必須符合最新的 W3C 標準？ 緊跟當前標準將使您的網站更加穩定，並幫助您在將來保持更新，因為您只需要對您的網站進行一些小的更改以升級到 XHTML 的最新版本，因為它們已獲得 W3C 的批准。
- 您是否需要將您的文件轉換為其他格式？ 作為有效的 XML 文件，XHTML 可以利用 XSL 轉換為文字、普通 HTML、另一個 XHTML 文件或另一個 XML 文件。HTML 不能用於此目的。
如果您對上述任何問題的回答是肯定的，那麼您可能應該將您的網站轉換為 XHTML。
XHTML 1.0 文件應使用 MIME 型別 application/xhtml+xml 提供給可以接受這種型別的 Web 瀏覽器。XHTML 1.0 可以使用 MIME 型別 text/html 提供給不能接受 application/xhtml+xml 的客戶端，前提是 XHTML 符合 [附錄 C] 中的附加約束XHTML 1.0 規範。如果您無法將 Web 伺服器配置為以不同的 MIME 型別提供文件服務，那麼您可能不應該將網站轉換為 XHTML。
您應該檢查 XHTML 文件是否正確提供給支援 application/xhtml+xml 的瀏覽器，例如 Mozilla Firefox。使用“頁面資訊”驗證型別是否正確。
XHTML 1.1 文件通常不向後相容 HTML，不應使用 text/html 的 MIME 型別提供服務。[2]
在建立 HTML 時，很容易犯錯誤，例如遺漏結束標籤或不正確巢狀標籤。HTML Tidy 是一款很棒的應用程式，可用於糾正格式不良的 HTML 文件中的許多錯誤並將其轉換為 XHTML。Tidy 還可以將醜陋的程式碼格式化為更易讀的程式碼，包括 WYSIWYG 編輯器生成的程式碼。HTML Tidy 在遇到不確定如何修復的問題時無法生成乾淨的程式碼。在這種情況下，它將生成錯誤以告知您錯誤位於文件中的哪個位置。
HTML Tidy 可以解決的一些問題的示例
- 缺少或不匹配的結束標籤。
- 不正確巢狀的元素。
- 混合的標籤。
- 在標籤的結尾新增缺少的“/”。
- 在列表中插入缺少的標籤。
- 在屬性值周圍新增缺少的引號。
- 能夠根據程式碼插入正確的 DOCTYPE 值（也可以識別和報告專有元素）。
HTML Tidy 也可以使用各種命令列引數在執行時進行自定義。它能夠縮排程式碼以使其更易讀，以及使用 CSS 將 FONT、NOBR 和 CENTER 標籤替換為樣式標籤和規則。Tidy 也可以透過在配置檔案中宣告新標籤來學習新標籤。
您可以在 W3C 的 HTML Tidy 網站上閱讀有關 HTML Tidy 的更多資訊，以及下載應用程式作為二進位制檔案或獲取原始碼。有幾個網站提供 HTML Tidy 作為線上服務，包括 W3C 和 Site Valet.
您也可以使用 http://validator.w3.org/ 上提供的驗證器來驗證您的頁面。
如果您的網頁始終以 text/html 的 MIME 型別提供服務，則不應該轉換您的網頁。確保您知道如何配置伺服器或伺服器端指令碼以執行 HTTP 內容協商，以便支援 XHTML 的瀏覽器接收標記為 application/xhtml+xml 的 XHTML。如果您無法設定內容協商，請堅持使用 HTML 4.01。使用主流瀏覽器檢視網頁的人將無法區分有效的 HTML 4.01 網頁和有效的 XHTML 1.0 網頁。
確保您對網站執行的自動化測試模擬來自支援 XHTML 的瀏覽器（例如 Mozilla Firefox）和不支援 XHTML 的瀏覽器（例如 Internet Explorer 6.0）的連線。如果您在網站上使用 Javascript，這一點尤其重要。如果維護兩個測試套件太耗時，請不要轉換。
請記住，有效的 HTML 4.01 Strict 文件通常比有效的 XHTML 1.0 Transitional 文件更容易轉換為 XHTML 1.1。有效的 HTML 4.01 Strict 文件只能包含 XHTML 1.1 中有效的元素，儘管可能需要更改一些屬性。另一方面，有效的 XHTML 1.0 Transitional 文件可能包含十種元素型別和十幾個在 XHTML 1.1 中無效的屬性。僅 XHTML 1.0 Transitional 的 body 元素就有六個在 XHTML 1.1 中不支援的屬性。
不要因為有人含糊其辭地說 不良實踐 而被迫使用 XHTML。要求他們具體說明 不良實踐 的含義。如果他們開始談論內容和表現的分離，他們混淆了 HTML 和 XHTML 之間的區別以及 Transitional 和 Strict 文件型別之間的區別。XHTML 1.0 Transitional 和 HTML 4.01 Transitional 都允許您在同一個文件中混合表現和內容，即它們允許這種不良實踐。HTML 4.01 Strict 和 XHTML 1.0 Strict 強制您將大部分表現（但不是全部）移到 CSS 或等效語言中。所有四種文件型別都允許您使用內嵌樣式表，而真正的分離要求將所有 CSS 和 Javascript 移到外部檔案中。
XHTML 1.0 適用於大多數目的。它提供了分離內容和表現的選項，這滿足了大多數網頁作者的需求。XHTML 1.1 強制執行內容和表現的分離。所有已棄用的元素和屬性都已刪除。它還刪除了兩個在 XHTML 1.0 中保留的屬性，僅為了向後相容。lang 屬性被 xml:lang 替換，name 被 id 替換。最後，它添加了對東亞文件中出現的 ruby 文字的支援。
XHTML 1.1 的 DOCTYPE 是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 的模組化，或 XHTML m12n，提供了關於自定義 XHTML 的建議，無論是將 XHTML 子集整合到其他 XML 應用程式中，還是擴充套件 XHTML 元素集。該框架定義了兩個過程
- 如何將元素和屬性分組到“模組”中
- 如何組合模組以建立新的標記語言
由此產生的語言，W3C 稱之為“XHTML 宿主語言”，基於熟悉的 XHTML 結構，但針對特定目的進行了專門化。XHTML 1.1 是宿主語言的一個例子。它是透過將 XHTML 可用的不同元素分組來建立的。
XHTML 變體雖然在理論上是可能的，但並沒有得到廣泛採用。開發宿主語言的工作仍在繼續，但它們的細節超出了本文的討論範圍。
只要文件格式正確，支援 XHTML 的瀏覽器就可以渲染無效的 XHTML 文件。下面給出了一個簡單的示例
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Invalid XHTML</title>
</head>
<body>
<p>This sentence contains a <p>nested paragraph.</p></p>
</body>
</html>
將示例儲存為 invalid.xhtml（.xhtml 副檔名很重要）並使用 Mozilla Firefox 開啟頁面。儘管該頁面無效，但它仍然可以渲染。
|
XHTML 代表可擴充套件超文字標記語言。XHTML 與 HTML 非常相似，但更嚴格且更容易解析。XHTML 文件必須像普通 XML 一樣格式正確。XHTML 允許模組化。XHTML 程式碼必須根據精確的規範編寫，這與 HTML 不同，在 HTML 中，瀏覽器會忽略諸如缺少結束標記之類的簡單錯誤。遵守這些嚴格的規範實際上使 XHTML 比 HTML 更靈活。只有在文件的 MIME 型別為 |