XHTML1.0 的文件架構

完整的基本架構

右邊的圖是一個文件基本架構的圖。XHTML 主要是由一些元素所組成，對於這些元素我們可以把它稱為「標籤」、「標記」或者是「標示」，我們可以在架構圖裡，發現到有許許多多的 < 與 > 符號，而這些 < 與 > 再加上其中的關鍵字，這就成為了一個標籤，而這些所謂的標籤都有它們特定的意義，也就是說我們要使用這些標籤來達到我們在網頁文件中的一個架構或者是想要的效果。

基本架構主要是由兩部分來組成，一是「文件宣告」、二是「文件資料區」。文件資料區中又可以分為「文件檔頭」與「文件本體」，這幾個區域再加上您想要呈現出來的資料內容，那就是一份完整的 XHTML 網頁文件。

標籤結構

Tag 可以稱之為標籤、而 Markup 可稱之為標記或是標示，在這邊兩者的意義是相同的。標籤是由 < 與 > 再加上標籤關鍵字所組合而成的。標籤有兩種，其一是有「起始標籤」與「結束標籤」的標籤，其二是沒有「結束標籤」的標籤。

這種沒有「結束標籤」的標籤我們可以把它叫做為「空標籤」，空標籤內容的最後面必須再加上一個空格與／斜線(結束符號)，其實是可以不用空格，但是為了不讓瀏覽器產生誤判的情況，所以最安全的方式是加空格。

XHTML 標籤的屬性也可分為兩類，一是可選擇的一般屬性，二是標籤必要的屬性。那這兩者有何分別呢？可選擇的一般屬性也就說這個屬性看您要不要用都可以，可有可無。標籤必要的屬性指的是，有些標籤使用了就一定要有該屬性，您不能不選，例如圖片標籤它就有兩個必要的屬性 src 與 alt 。

除了一些例外的標籤(如 <input> 的 checked 屬性，其屬性值為其屬性)，要不然大部分的屬性都有其屬性值，這些屬性值都有其特定的值，如數值、文字、URL 或者度量衡的單位…等等，這些屬性的值必須放在成對的雙引號中，也就是 "屬性值" 。

文件的宣告

文件的宣告包含兩部分，也就是說包含了兩個標籤：

宣告為 XML 文件

<?xml version="1.0" encoding="UTF-8"?>

這是用來宣告這份文件是一份 XML 文件。如果您的文件是使用 UTF-8 來編碼的話，則 encoding 須設為 UTF-8 ，若您是使用我們台灣用的語言來存檔的話，就請設為 big-5。這個標籤必須置於文件原始碼的最頂端，也就是第一列。這裡的字元編碼宣告會優先於 <meta> 標籤裡的宣告。

XHTML 既然是一份 XML 文件，它的檔案當然可以存成 *.xml 這種格式，但是這有賴於該瀏覽器是否能解讀。所以為了保險起見還是將文件存成 *.htm 或者是 *.html 的格式，那 *.htm 與 *.html 有何不一樣呢？因為早期的作業系統它並不支援長的副檔名，也就是說副檔名不能超過三個字元，所以兩者之間的差異就只有在這個地方。XHTML 最正確的副檔名為 *.xhtml ，不過這還是有賴於伺服器與瀏覽器是否支援。

倘若在網頁原始碼最頂端使用了 xml 宣告，這時 IE6 的使用者則會進入一種「特殊模式」，這是一個大臭蟲。而這個特殊模式指的是——將原本為「標準模式」的網頁自動切換為「相容模式」的網頁，所謂的相容模式指的是一些臭蟲或語法上有某種程度的錯誤皆可掩蓋來顯示，其結果就是在表格、盒狀模組或在其它的表現上會有些許的不同。標準模式指的是沿用 W3C 的方式，若有錯誤的地方則會將這個錯誤忽略掉或不顯示。

其實這個宣告可有可無並且它主要是針對非 UTF-8 或 UTF-16 編碼的文件，不過 W3C 的建議是通通寫上，不過這樣一來的話，IE6 跟其它瀏覽器之間原本就有些許差異，若加上這個宣告的話，跟其它瀏覽器之間的差異性豈不是更大？

DTD 有無 xml 宣告 IE6 FireFox1 Opera7 Safari1
XHTML 1.0 Frameset 有 相容模式 標準模式 標準模式 標準模式
無 標準模式 標準模式 標準模式 標準模式
XHTML 1.0 Transitional 有 相容模式 標準模式 標準模式 標準模式
無 標準模式 標準模式 標準模式 標準模式
XHTML 1.0 Strict 有 相容模式 標準模式 標準模式 標準模式
無 標準模式 標準模式 標準模式 標準模式
XHTML 1.1 有 相容模式 標準模式 標準模式 標準模式
無 標準模式 標準模式 標準模式 標準模式
XHTML 1.0 Basic 有 相容模式 標準模式 標準模式 標準模式
無 標準模式 標準模式 標準模式 標準模式

引用外部 DTD 規範

DTD，又稱文件類別定義，是一個 XML 定義的集合，在其中的定義遵循了 DTD 文件中使用的合法的結構，元素和屬性。

它只能引用 W3C 所制定的三個規範 這三種 DTD 的文件名稱為 這三種 DTD 的意義
xhtml1-strict.dtd
xhtml1-transitional.dtd
xhtml1-frameset.dtd		 "-//W3C//DTD XHTML 1.0 Strict//EN"
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"-//W3C//DTD XHTML 1.0 Frameset//EN"		 Strict：
嚴格定義
Transitional：
過渡時期定義
Frameset：
準許使用框架定義
DTD 文件所在的 URL 網址
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
此標籤有底下三種寫法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Frameset

語法：<!DOCTYPE element-name DTD-type DTD-name DTD-url>

文件資料區

文件資料區可以分為底下幾個部分：

<html> … </html> 標籤

在先前我們曾經提到，基本架構是由兩部分來組成，一是「文件宣告」、二是「文件資料區」，撇開文件的宣告不談的話，文件資料區的標籤與資料內容才是整份文件的精華所在。這個「標籤對」是用來告訴瀏覽器，這個是一份 HTML 文件，除了文件宣告的兩個標籤外，其他標籤必須置於這個標籤對之間，而不能置於兩者之外。

XHTML 文件的根元素必須是 <html> 標籤對。在此標籤內必須使用 xmlns 這個屬性來指定一個所謂的「名稱領域」(namespace) ，其值為 http://www.w3.org/1999/xhtml 。其目的是為了表示 <html> 根元素標籤與其所涵蓋之內的標籤名稱是源自於該網址的內定宣告。例如：

<html xmlns="http://www.w3.org/1999/xhtml">

這個標籤之內也可以再增加兩個屬性 xml:lang 與 lang 來指定我們頁面的語系，以協助搜索引擎來決定那些頁面符合特定語系的搜索。 xml:lang 是 <html> 的預設屬性，而 lang 屬性是為了要保存舊有 HTML 的相容性， xml:lang 的優先權會高於 lang 。您也可以在有需要的標籤中增設此兩個屬性。例如：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">

※注意：XHTML1.1 不再使用 lang 屬性。

<head> … </head> 標籤

文件檔頭區常見到的標籤
<title>…</title> 用來設定該文件的標題。
<meta … /> 動態文件、文字的轉換宣告或是一些描述文件的資料。
<script>…</script> 用來設定與編寫 Script 。
<style>…</style> 用來設定與編寫樣式表。
<link … /> 用來鏈結外部的文件。
<base … /> 用來設定鏈結時所參考的基準點。

這個標籤對的功能是讓我們用來做一些文件的檔頭宣告，於之間的標籤文字都是屬與此文件的檔頭，也就是不屬於文件本體。例如一些動態的文件鏈結、動態的文字標籤、樣式表或是一部分的 Script 程式碼都是放在檔頭宣告之中，它是定義這份文件特殊處理的宣告。該區所設定的資料並不會顯示在瀏覽器的視窗內容中。

<title> … </title> 標籤

<title> 與 </title> 標籤之間的文字就是此張網頁文件的標題，在瀏覽器最左上角(瀏覽器視窗標題列)所呈現出來的文字就是該文件的標題名稱。

<body> … </body> 標籤

<body> 與 </body> 之間的區域為文件的本體，之間所包含的任何標籤與文字，也就是你想要在瀏覽器上所呈現的資料內容都是在該區來做設定。

依法有據的 XML 文件(Validating XML Documents)

一份標準的 Validating XML Document 必須合乎兩個條件：

文件必須是格式正確的(well-formed)
條　　件 說　　明
一、文件的第一列須為 XML 宣告。 <?xml version="1.0" encoding="UTF-8"?>
二、文件當中只能有一個根節點。 <html>
三、起始標籤與結束標籤缺一不可。 <p>　這是錯的
<p>　這是對的　</p>
四、「空標籤」須以空一格再加 / 斜線做結束。 <br>　這是錯的
<br />　這是對的
五、屬性的值須以 " 符號字元涵括起來。 <td rowspan=2>　這是錯的
<td rowspan="2">　這是對的
六、標籤與標籤之間必須合理嵌套。 <p><b></p></b>　這是錯的
<p><b></b></p>　這是對的
七、英文的大小寫是有差別的。 <li> 與 <LI> 是不同的
八、特殊字元的使用。 例如想顯示 " 的話其原始碼寫法為 &quot;
九、所有的屬性必須有一個值。 <input … checked>　這是錯的
<input … checked="checked">　這是對的
十、script 與 style 建議使用鏈結外部文件的方式

使用註解

<!--註解的文字說明-->

這是用來在文件當中作為註解用。在文件裡頭加上註解是用來說明此文件，也可以用來說明此段內容是做什麼用。它不會被瀏覽器所執行出來，可放於任何地方。

結語

XHTML 其實並不會複雜與艱澀。只要瞭解其基本的結構與規定，再配合您的文件類別定義規則來選擇標籤與其屬性，然後用 Validator 來檢測，假如有錯誤的話，它還會指出您的錯誤在哪邊並且教導您要如何修正。網頁長久寫下來，您就會覺得自己修正了不少寫網頁的壞習慣與錯誤的方式。更重要的是大部分的瀏覽器都能正常瀏覽您的網頁，雖然不能說百分百，但也差不多了。