一、浏覽器呈現模式和doctype
有的網頁是遵循標准而創作的,但也有很多不是。即使你不能創建遵循標准的網頁,也希望浏覽器根據標准來正確顯示那些頁。目前,大量網頁充斥著大量非標准代碼,它們仍能正常地工作。事實上,為舊版浏覽器設計的大多數代碼都能在新版浏覽器中正確顯示(雖然呈現方式可能有所區別)。這是什麼原因呢?事實上,假如嚴格遵循最新標准,會完全破壞那些頁的生存基礎。對於任何希望有所作為的浏覽器來說,這當然是令人無法接受的。
浏覽器呈現模式
現代浏覽器包括不同的呈現模式,目的是既支持遵循標准的網頁,也支持為老式浏覽器而設計的網頁。其中, Standards (標准)模式(也就是嚴格呈現模式)用於呈現遵循最新標准的網頁,而 Quirks (包容)模式(也就是松散呈現模式或者兼容模式)用於呈現為傳統浏覽器而設計的網頁。另外,注意Mozilla/Netscape 6新增了一種 Almost Standards (近似標准)模式,用於支持為標准的某個老版本而設計的網頁。
什麼是 doctype切換?
放在網頁頂部的doctype聲明是讓浏覽器進入正確呈現模式的關鍵。浏覽器自動切換到恰當的呈現模式,以便正確顯示由doctype聲明所指定的文檔種類。
理論上,這應該是一個非常直觀的切換。假如doctype指出當前網頁是一個遵循標准(也就是HTML 4+或XHTML 1+)的文檔,浏覽器就會切換到Standards模式。假如沒有指定doctype,或者指定HTML 3.2以及更老的版本,浏覽器就切換到Quirks模式。這樣一來,浏覽器既能正確顯示遵循標准的文檔,又不至於完全捨棄老式的、與標准不符的網頁。
doctype切換的問題
但是,doctype切換是一個不完善的方案。即使你在Web文檔中使用了一個doctype聲明,浏覽器也可能不會采取你希望的呈現模式來顯示網頁。原因是多方面的,包括形式錯誤的doctype,以及不同<?xml version="1.0" encoding="UTF-8"?>) 開頭,其中包括XHTML網頁。然而,IE,Opera和舊版Safari都希望文檔的第一行是doctype聲明。所以,如果在它之前還有其他任何東西(包括XML prolog),就無法識別doctype。因此,XML prolog的存在會使IE,Opera和Safari進入Quirks模式。XML prolog並非必需的,所以你可在XHTML網頁中安全地省略它。注意:一定要在http-equiv meta標記中包括一個charset屬性,以彌補XML prolog中缺失的encoding屬性。
丟失的URL或者相對URL:
在完整的doctype聲明中,要包括相應的文檔類型定義(DTD)文件的URL。如果URL丟失,或者指定的是一個相對路徑(而不是完全限定的Internet地址),大多數浏覽器都會進入Quirks模式,不管doctype聲明規定的是什麼模式。
形式錯誤的doctype :
浏覽器對doctype聲明的形式和格式非常敏感,如果不能識別一個形式錯誤的doctype,就會強制進入Quirks模式(正是因為這個原因,所以我們建議將一個已知正確的doctype拷貝和粘貼到文檔中,而不是親自輸入它)。之所以出現形式錯誤的doctype,一個常見的原因是在doctype 的第一部分與URL之間缺少一個空格。將一個分兩行的doctype折疊成單獨一行,常常會丟失那個空格。
過渡期的 doctype :
浏覽器處理過渡期的doctype時,最容易出現不一致的問題。IE和Opera使用Standards模式;Netscape 6和舊版本的Safari使用Quirks模式;Netscape 7、Mozilla 1和新版本的Safari使用Netscape的Almost Standards模式,它是Standards模式的一個具有更好容錯性的版本。
未知的 doctype :
浏覽器在處理不能識別的doctype時,也存在不一致的現象。IE和Opera會進入Standards模式;換言之,它假定不能識別的doctype 是尚未在浏覽器中集成的一個新標准。Netscape 6則相反,會在遇到不能識別的doctype時切換到Quirks模式。
doctype切換也許是讓浏覽器進入正確呈現模式並正確顯示網頁的一種有效手段,前提是你注意到了各種浏覽器的不一致,並能積極主動地避免各種問題。
二、使用正確的doctype聲明
我們平時在做頁面的時候可能會忽視這一點(包括鄙人,通常都是懶於不寫而使用浏覽器默認),隨著目前網頁編碼規范化熱潮的到來,大家都有必要了解一下這個細節,會有用處的。俗話說沒有規矩不成方圓呢。
雖然大多數Web文檔的頂部都有doctype聲明,但很多人都沒有注意它。它是在你新建一個文檔時,由Web創作軟件草率處理的眾多細節之一。雖然 doctype被許多人忽視,但在遵循標准的任何Web文檔中,它都是一項必需的元素。doctype會影響代碼驗證,並決定了浏覽器最終如何顯示你的 Web文檔。
doctype的作用
doctype聲明指出閱讀程序應該用什麼規則集來解釋文檔中的標記。在Web文檔的情況下,“閱讀程序”通常是浏覽器或者校驗器這樣的一個程序,“規則”則是W3C所發布的一個文檔類型定義(DTD)中包含的規則。
每個DTD都包括一系列標記、attributes和properties,它們用於標記Web文檔的內容;此外還包括一些規則,它們規定了哪些標記能出現在其他哪些標記中。每個Web建議標准(比如HTML 4 Frameset和XHTML 1.0 Transitional)都有自己的DTD。假如文檔中的標記不遵循doctype聲明所指定的DTD,這個文檔除了不能通過代碼校驗之外,還有可能無法在浏覽器中正確顯示。對於標記不一致的問題,浏覽器相較於校驗器來說更寬容。但是,不正確的doctype聲明經常導致網頁不正確顯示,或者導致它們根本不能顯示。
選擇正確的doctype
為了獲得正確的doctype聲明,關鍵就是讓DTD與文檔所遵循的標准對應。例如,假定文檔遵循的是XHTML 1.0 Strict標准,文檔的doctype聲明就應該引用相應的DTD。另一方面,如果doctype聲明指定的是XHTML DTD,但文檔包含的是舊式風格的HTML標記,就是不恰當的;類似地,如果doctype聲明指定的是HTML DTD,但文檔包含的是XHTML 1.0 Strict標記,同樣是不恰當的。
有的時候,也可以根本不使用一個doctype聲明。如果沒有指定有效的doctype聲明,大多數浏覽器都會使用一個內建的默認DTD。在這種情況下,浏覽器會用內建的DTD來試著顯示你所指定的標記。對於一些臨時性的、匆忙拼湊的文檔(這種文檔有許多),你確實可以考慮省略doctype聲明,並接受浏覽器的默認顯示。
完全可以從頭編寫一個doctype聲明,並讓它指向自己選擇的一個DTD。然而,由於大多數Web文檔都需要遵循由W3C發布的某個國際公認的Web標准,所以那些文檔通常都要包含以下標准doctype聲明之一:
HTML 2:<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01 Strict:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.1 plus MathML plus SVG:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
除了上面列出的doctype聲明,具有特殊要求的一些文檔還使用了其他幾種聲明。
doctype聲明通常是文檔的第一行,要在<html>標記以及其他文檔內容之前。注意,在XHTML文檔中,doctype的前面偶爾會出現一條XML處理指令(也稱為XML prolog):<?xml version="1.0" encoding="utf-8"?>
為了確保網頁正確顯示和順利通過驗證,使用正確的doctype是關鍵。與內容相反的、不正確的或者形式錯誤的doctype是大量問題的罪魁禍首。
用DW設計網頁時,新建一個文件,看代碼最前面總要出現一個下面的東東,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">這個是DW自動在網頁文件頁增加了DTD信息,可以刪。 刪除後,浏覽器會使用的默認DTD。
三、選擇什麼樣的DOCTYPE
開始制作符合標准的站點,第一件事情就是聲明符合自己需要的DOCTYPE。
查看本頁原代碼,可以看到第一行就是: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
打開一些符合標准的站點,例如著名web設計軟件開發商 Macromedia ,設計大師 Zeldman 的個人網站,會發現同樣的代碼。而另一些符合標准的站點(例如 k10k.net )的代碼則如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">br>。完整代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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-frameset.dtd">
我們選擇什麼樣的DOCTYPE
理想情況當然是嚴格的DTD,但對於我們大多數剛接觸web標准的設計師來說,過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站,使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性,也比較容易通過W3C的代碼校驗。 注:上面說的"表現層的標識、屬性"是指那些純粹用來控制表現的tag,例如用於排版的表格、背景顏色標識等。在XHTML中標識是用來表示結構的,而不是用來實現表現形式,我們過渡的目的是最終實現數據和表現相分離。
打個比方:人體模特換衣服。模特就好比數據,衣服則是表現形式,模特和衣服是分離的,這樣你就可以隨意換衣服。而原來HTML4中,數據和表現是混雜在一起的,要一次性換個表現形式非常困難。呵呵,有點抽象了,這個概念需要我們在應用過程中逐步領會。
補充
DOCTYPE聲明必須放在每一個XHTML文檔最頂部,在所有代碼和標識之上。
四、官方是這樣定義 DOCTYPE HTML PUBLIC 的
!DOCTYPE
--------------------------------------------------------------------------------
指定了 HTML 文檔遵循的文檔類型定義(DTD)。
Microsoft? Internet Explorer 6 的新增內容。你可使用此聲明將 Internet Explorer 6 及以後版本切換到標准兼容模式下。
語法
HTML 頂級元素 可用性 "注冊//組織//類型 標簽//定義 語言""URL"
可能值
頂級元素:指定 DTD 中聲明的頂級元素類型。這與聲明的 SGML 文檔類型相對應。 HTML 默認。HTML。
可用性:指定正式公開標識符(FPI)是可公開訪問的對象還是系統資源。 PUBLIC 默認。可公開訪問的對象。 SYSTEM 系統資源,如本地文件或 URL。
注冊:指定組織是否由國際標准化組織(ISO)注冊。 + 默認。組織名稱已注冊。 - 組織名稱未注冊。Internet 工程任務組(IETF)和萬維網協會(W3C)並非注冊的 ISO 組織。
組織:指定表明負責由 !DOCTYPE 聲明引用的 DTD 的創建和維護的團體或組織的名稱,即 OwnderID。 IETF IETF。 W3C W3C。
類型:指定公開文本類,即所引用的對象類型。 DTD 默認。DTD。
標簽:指定公開文本描述,即對所引用的公開文本的唯一描述性名稱。後面可附帶版本號。 HTML 默認。HTML。
定義:指定文檔類型定義。 Frameset 框架集文檔。 Strict 排除所有 W3C 專家希望逐步淘汰的代表性屬性和元素,因為樣式表已經很完善了。Transitional 包含除 frameSet 元素的全部內容。
語言:指定公開文本語言,即用於創建所引用對象的自然語言編碼系統。該語言定義已編寫為 ISO 639 語言代碼(大寫兩個字母)。 EN 默認。英語。
URL:指定所引用對象的位置。
注釋
此聲明必須出現在文檔的起始處,出現在 html 標簽之前。
!DOCTYPE 元素不需要關閉標簽。
此元素在 Microsoft? Internet Explorer 3.0 的 HTML 中可用。
你可使用此聲明在 Internet Explorer 6 及以後版本中切換為嚴格的標准兼容模式。若想打開此開關,請在你的文檔頂部包含 !DOCTYPE 聲明,在聲明中指定合法的標簽,在某些情況下,還需要指定定義和/或 URL。
注意 在標准兼容模式下,不能保證與其它版本的 Internet Explorer 保持兼容。當打開標准兼容模式時,文檔的渲染行為也許與將來版本的 Internet Explorer 不同。若內容本來就是固定的(如刻錄在 CD 上),則不應該使用此模式。
示例
下面的例子演示了如何使用 !DOCTYPE 聲明指定文檔遵從的 DTD,並將 Internet Explorer 6 及更高版本切換到標准兼容模式。 下面例子中的聲明都指定了遵從 HTML 4.0 DTD。第二種聲明指定了“Strict”。第一種聲明沒有指定。這兩種聲明都將會把 Internet Explorer 6 及以後版本切換到標准兼容模式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
下面例子中的聲明都指定了遵從“Transitional”HTML 4.0 DTD。第二種聲明指定了 DTD 的 URL。第一種聲明沒有指定。第二種聲明將會把 Internet Explorer 6 及以後版本切換到標准兼容模式。第一種聲明不會。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">