搜尋
首頁web前端html教學DOCTYPE聲明作用及用法詳解_HTML/Xhtml_網頁製作

一、瀏覽器呈現模式與doctype

      有的網頁是遵循標準而創作的,但也有很多不是。即使你無法建立遵循標準的網頁,也希望瀏覽器根據標準來正確顯示那些頁。目前,大量網頁充斥著大量非標準程式碼,它們仍能正常地運作。事實上,為舊版瀏覽器設計的大多數程式碼都能在新版瀏覽器中正確顯示(雖然呈現方式可能有所區別)。這是什麼原因呢?事實上,假如嚴格遵循最新標準,會完全破壞那些頁的生存基礎。對於任何希望有所作為的瀏覽器來說,這當然是令人無法接受的。

瀏覽器呈現模式   

      現代瀏覽器包含不同的呈現模式,目的是既支援遵循標準的網頁,也支援為老式瀏覽器設計的網頁。其中, Standards (標準)模式(也就是嚴格呈現模式)用於呈現遵循最新標準的網頁,而Quirks (包容)模式(也就是鬆散呈現模式或相容模式)用於呈現為傳統瀏覽器而設計的網頁。另外,注意Mozilla/Netscape 6新增了 Almost Standards (近似標準)模式,用於支援為標準的某個舊版本而設計的網頁。

什麼是 doctype切換?
      放在網頁頂部的doctype宣告是讓瀏覽器進入正確呈現模式的關鍵。瀏覽器會自動切換到適當的呈現模式,以便正確顯示由doctype宣告所指定的文件種類。

理論上,這應該是一個非常直覺的切換。假如doctype指出目前網頁是遵循標準(也就是HTML 4 或XHTML 1 )的文檔,瀏覽器就會切換到Standards模式。假如沒有指定doctype,或指定HTML 3.2以及更老的版本,瀏覽器就切換到Quirks模式。這樣一來,瀏覽器既能正確顯示遵循標準的文檔,又不會完全捨棄老式的、與標準不符的網頁。

doctype切換的問題
      但是,doctype切換是一個不完善的方案。即使你在網頁文件中使用了一個doctype聲明,瀏覽器也可能不會採取你想要的呈現模式來顯示網頁。原因是多方面的,包括形式錯誤的doctype,以及不同) 開頭,其中包括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:

HTML 3.2:

HTML 4.01 Strict:ttp://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd ">

HTML 4.01 Transitional:ttp://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose. dtd">

HTML 4.01 框架集:ttp://www.w3.org/TR/html4/frameset.dtd">http://www.w3.org/TR/html4/frameset .dtd">

XHTML 1.0 嚴格:http://www.w3.org/TR/xhtml1/DTD /xhtml1-strict.dtd">

XHTML 1.0 轉場:場//EN" "http://www.w3.org/TR/xhtml1/DTD / xhtml1-transitional.dtd">

XHTML 1.0 框架集:架集//EN" "http://www.w3.org/TR/xhtml1/ DTD /xhtml1-frameset.dtd">

XHTML 1.1:ttp://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11 . dtd">

XHTML 1.1 加MathML 加SVG:MathML 2.0 加SVG 1.1//EN" "http://www.w3 . org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

      除了上面列出的文件類型聲明,有一些特殊要求的文件也使用了其他幾種聲明。

      doctype宣告通常是文件的第一行,且要在之前標示以及其他文件內容。注意,在XHTML文件中,doctype的前面偶爾會出現一條XML處理指令(也稱為XML prolog) :

     為了確保網頁已正確顯示並順利通過驗證,使用正確的文件類型是關鍵。內容正確、不正確或格式錯誤的文件類型是大量問題的罪魁禍首。

      使用DW設計網頁時,新建一個文件,看程式碼最前面總要出現一個下面的東東,
ttp://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd">這是DW自動在網頁文件頁增加了DTD訊息,可以刪除。之後,瀏覽器會使用的預設DTD。
三、選什麼樣的DOCTYPE

      開始製作符合標準的站點,而第一件事就是聲明符合自己需求的DOCTYPE。

      檢視本頁原始碼,可以看到第一行為: http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

     打開一些符合標準的站點,例如著名的網頁設計軟體腋Macromedia,設計大師Zeldman的個人網站,會發現相同的程式碼。而其他符合標準的站點(例如k10k.net)的程式碼則如下:

架集//EN" "!DOCTYPE">http://www.w3.org/TR/xhtml1/DTD /xhtml1-frameset.dtd">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "br">http://www. w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd">br>。完整程式碼如下:

 
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!DOCTYPE">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 及以後版本切換到標準相容模式。


     下列範例中的聲明都指定了遵從「Transitional」HTML 4.0 DTD。第二種聲明指定了 DTD 的 URL。第一種聲明沒有指定。第二種聲明會將 Internet Explorer 6 及以後版本切換到標準相容模式。第一種聲明不會。


  br /> "http://www.w3.org/TR/html4/loose.dtd">

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
> gt;的目的是什麼 元素?> gt;的目的是什麼 元素?Mar 21, 2025 pm 12:34 PM

本文討論了HTML< Progress>元素,其目的,樣式和與< meter>元素。主要重點是使用< progress>為了完成任務和LT;儀表>對於stati

< datalist>的目的是什麼。 元素?< datalist>的目的是什麼。 元素?Mar 21, 2025 pm 12:33 PM

本文討論了html< datalist>元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

< meter>的目的是什麼。 元素?< meter>的目的是什麼。 元素?Mar 21, 2025 pm 12:35 PM

本文討論了HTML< meter>元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了< meter>從< progress>和前

視口元標籤是什麼?為什麼對響應式設計很重要?視口元標籤是什麼?為什麼對響應式設計很重要?Mar 20, 2025 pm 05:56 PM

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

如何使用HTML5表單驗證屬性來驗證用戶輸入?如何使用HTML5表單驗證屬性來驗證用戶輸入?Mar 17, 2025 pm 12:27 PM

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

我如何使用html5< time> 元素以語義表示日期和時間?我如何使用html5< time> 元素以語義表示日期和時間?Mar 12, 2025 pm 04:05 PM

本文解釋了HTML5< time>語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性(ISO 8601格式)的重要性,並在人類可讀文本旁邊,增強Accessibilit

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?HTML5中跨瀏覽器兼容性的最佳實踐是什麼?Mar 17, 2025 pm 12:20 PM

文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐,重點是特徵檢測,進行性增強和測試方法。

< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼?< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼?Mar 20, 2025 pm 06:05 PM

本文討論了< iframe>將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境