當裝配Web頁面時，任何Web開發者首先要完成的第一件事是選擇文檔類型定義，或者簡稱為DOCTYPE。在Web頁面中指定DOCTYPE的第一個好處是可以使用諸如W3C提供的驗證服務來驗證頁面的内容，以此確定内容遵循特定的标準并且不會含有任何不合法的标記——當應用AJAX和動态操作DOM時這些标記可能會造成令人讨厭的bug。驗證常常被開發者所忽略，然而，這是一種用于幫助改進Web頁面的優秀實踐。開發出合法的HTML或者XHTML還具有其他的一些優點，例如改進的搜尋引擎優化（至少它們要保證你有<title>标簽）可以更快速地對HTML進行解析以及獲得更優秀的跨浏覽器性能。同時還可以提高頁面的可通路性（但是，當你學到第10章時，你會發現這并不是必需的）。實際上，指定DOCTYPE最重要的作用是告訴Web浏覽器如何解釋和解析HTML内容。根據DOCTYPE，Web浏覽器将會以不同的方式解釋CSS和呈現HTML。盡管這個問題經常與IE一起讨論，但是大多數的浏覽器都支援兩種操作模式：怪癖模式（quirks mode）和标準模式（standards mode）。實際上，大多數浏覽器甚至擁有第三種幾乎标準模式（almost standards mode）（對于IE而言，這種模式才是很多人所認為的标準模式。但是我們不必為此太擔心，因為在這種模式和正規的标準模式之間隻存在很少且幾乎不被人們所注意到的差别。
為了确定使用哪種操作模式工作，Web浏覽器支援DOCTYPE切換。這意味着這些浏覽器将會根據頁面的DOCTYPE聲明來決定如何解釋和呈現Web頁面裡的HTML和CSS内容。例如，如果Web頁面裡沒有指定DOCTYPE，則所有的Web浏覽器将會執行怪癖模式。我們需要關注的主要有6種基本的DOCTYPE，列舉如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
前面3個分别是HTML 4.01 DOCTYPE中嚴格型（strict）、過渡型（transitional）和架構型（frameset）版本，後面三個則對應XHTML 1.0的各個版本。
當建構Web頁面時，如果頁面是被作為XHTML提供服務的，那麼你還需要考慮一些額外的工作。首先要注意的是伺服器應該以application/xhtml+xml的mime類型提供Web頁面服務，而不是text/html類型，并且Web頁面的根元素<html>應該像下面這樣指定XHTML的命名空間：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
與HTML 4.01相比，XHTML 1.0對标記的放置的還存在其他一些主要需求，如表3-1所列。
表3-1 HTML 4.01和XHTML 1.0 特性的比較
HTML 4.01
XHTML 1.0
文檔應該是格式正确的XML
<p>Customers<br>
<p>Customers</p><br />
屬性名應該小寫，屬性值要加上引号
<div ID=header>
Customers </div>
<div id="header">
Customers</div>
腳本應該是格式正确的XML，并且可以使用CDATA段非常容易地編寫腳本
<script TYPE=text/
javascript>
…</script>
<script type="text/
javascript">
<![CDATA[…]]></script>
盡管很多開發者都被“固有的”基于XML的HTML标簽所吸引，但是使用這些标簽的過程中往往會碰到問題。主要問題在于：根據規範，XHTML内容應該以application/xhtml+xml的mime類型被提供，然而IE還無法識别這種mime類型。IE 7對這個問題進行了一個改進，隻要在DOCTYPE聲明前放置一個XML的前置聲明(<?xmlversion="1.0"encoding ="UTF-8" ?>)，浏覽器就不會像IE 6那樣回複到怪癖模式。通過指定前置聲明，IE 7 識别出目前的内容是XHTML而不是HTML。這是微軟公司在全面支援XHTML的道路上邁出的一大步。XHTML文檔确實提供了很多優勢，例如可以更加簡單明了地包含其他基于XML的語言（與命名空間一起）例如SVG，并且在Web浏覽器裡不合法的XML會抛出錯誤。但是目前使用XHTML仍然有一點樂觀，并且隻有當IE也采用application/xhtml+xml的mime類型時，使用XHTML才可能成為現實。
對于大多數浏覽器，除去極少數像Konqueror這樣的浏覽器，上文列出的所有HTML和XHTML的DOCTYPE定義都可以切換到浏覽器的幾乎标準模式或者純标準模式，其實這兩種模式的大部分情況下都是相同的。“嚴格型”DOCTYPE使得諸如Firefox、Opera和Safari浏覽器進入标準模式，而IE則進入我們所提到的幾乎标準模式，同時“過渡型” DOCTYPE使得絕大多數的其他浏覽器進入幾乎标準模式
3.2.2 盒子模型
盡管對DOCTYPE和XHTML的讨論看起來比較充分，但是我們從這一節開始我們将改變話題。在大多數浏覽器例如Firefox中，怪癖模式和标準模式相比隻有很細微的差别。然而IE在這個方面确實考慮不周，并且切換DOCTYPE時存在問題。在IE裡，怪癖模式和标準模式之間存在着一個主要的差别，這個差别就是CSS盒子模型。CSS盒子模型與HTML元素表現的尺寸有關。在W3C标準中，HTML元素的寬度和高度等于元素内容的寬度和高度，除了IE之外，所有的浏覽器都在怪癖模式和标準模式裡使用這一規則。然而，IE卻依然在怪癖模式裡采用傳統的盒子模型（如圖3-1所示），在傳統盒子模型中，HTML元素的寬度和高度等于元素外部的寬度和高度。元素的外部包括元素的内邊距（padding）和邊距（border）。根據不同的情況，這些觀點在具體的場景下都是有用的。在某些情況下，你也許想把一些元素排列到另外一些元素中，在這種情況下，W3C模型很有用。在另外一些情況下，你也許想把元素依次排列，在這種情況下，外部尺寸非常重要，傳統模型更有意義。
外邊距
邊距
内邊距
傳統盒子模型
W3C盒子模型
元素内容
圖3-1 HTML元素的空間屬性（外邊距、邊距、内邊距和内容）以及遵循W3C标準的浏覽器
（例如Firefox）和傳統的浏覽器（例如處于怪癖模式的IE）對元素寬度解釋的差異
問題的關鍵在于如果想減少AJAX應用裡盒子模型所帶來的令人頭疼的問題，我們需要采取一定的政策。這裡有兩種主要選項。
l 通過指定一種上文列出的DOCTYPE，在IE裡使用标準模式，在這種情況下，Web頁面像其他所有浏覽器一樣使用W3C的盒子模型。
l 在沒有DOCTYPE聲明的情況下，在IE裡使用怪癖模式，并且通過box-sizing CSS規則強制其他浏覽器都使用傳統盒子模型。
CSS3規範定義了一個名為box-sizing的規則，這個規則具有兩個值：border-box和content-box，這兩個值分别對應着傳統模型和W3C模型。現在，Opera和Firefox都支援這一規則，開發者可以根據情況選擇不同的盒子模型。在Firefox裡，這個屬性的文法有些細微的差别：Firefox在這個規則名字的前面加上了–moz-，并且它也支援–moz-box-sizing:padding-box，這個值的意義非常清楚，應該不需要解釋。
![iOS開發值詳解剪貼闆 [圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)