目錄
一.概述
二.定義
三.W3C規範
四.規範與DTD
HTML Strict DTD
HTML Transitional DTD
Frameset DTD
XHTML Strict DTD
XHTML Transitional DTD
XHTML Frameset DTD
五.DOCTYPE 元素語法
六.檢查工具
七.DOCTYPE切換
1.遺失的URL或相對URL
2.形式錯誤的doctype
3.過渡期的 doctype
4.未知的 doctype
八.XHTML使用技巧
首頁 web前端 html教學 DOCTYPE元素詳解 完整版_HTML/Xhtml_網頁製作

DOCTYPE元素詳解 完整版_HTML/Xhtml_網頁製作

May 16, 2016 pm 04:41 PM
doctype

一.概述

本文系統的講解DOCTYPE元素.同時查證了很多的資料.因為互聯網上面的資料比較雜亂,所以經過收集整理我進行了重新定義.比如對於DOCTYPE元素的定義.主要分為基礎知識和高級知識.基礎知識講解基本的DOCTYPE知識. 高級知識很多來自網絡收集, 主要是實際應用的一些技巧.

二.定義

DOCTYPE是文檔類型(Document Type)的縮寫, 元素用於聲明一個頁面的文檔類型定義(Document Type Declaration, 即DTD).此元素聲明位於文檔中的最前面的位置,處於 標籤之前。透過確認頁面的DTD,可以同時確定頁面使用哪種W3C規範(例如 HTML 或 XHTML 規範)。

三.W3C規範

W3C規範的正確翻譯應該為W3C推薦(W3C Recommendations).很多設計師的眼裡W3C就是標準.但是許多人都是一知半解.下面列於了目前W3C規範中的HTML規範和XHTML規範,稍後來講解HTML和XHTML的關係:   

W3C HTML 規格與時間軸

规范

推荐

HTML 3.2

1997年1月14日

HTML 4.0

1998年5月24日

HTML 4.01

1999年12月24日

規格

推薦

HTML 3.2 1997年1月14日
HTML 4.0 1998年5月24日
HTML 4.01 1999年12月24日
W3C XHTML 規格 和 時間軸

規範

草稿/提議

推薦

XHTML 1.0

  

2000 年 1 月 26 日

XHTML 1.0 修訂版

  

2002 年 8 月 1 日

XHTML 1.1

  

2001 年 5 月 31 日

XHTML Modules

  

2001 年 4 月 10 日

XHTML Modules 1.1

2006 年 7 月 5 日

  

XHTML Basic

  

2000 年 12 月 19 日

XHTML Basic 1.1

2006 年 7 月 5 日

  

XHTML Events

  

2003 年 10 月 14 日

XHTML Events 2

2007 年 2 月 16 日

  

XHTML Print

  

2006 年 9 月 20 日

XHTML Media Types

2002 年 8 月 1 日

  

XForms 1.0

  

2003 年 10 月 14 日

XForms 1.0 (SE)

  

2006 年 3 月 14 日

XForms 1.1

2007 年 2 月 22 日

  

XHTML 2.0

2006 年 7 月 26 日

  

XLink

  

2001 年 6 月 27 日

HLink

2002 年 9 月 13 日

  

     

XHTML可以看成是最新的HTML規範, 是一項可從 HTML 4.01 平穩遷移的 XML 應用。 W3C 把 HTML 4.01 重構為 XML 的第一個步驟,導致了 XHTML 1.0 的誕生。 XHTML 1.0 依賴 HTML 4.01 標籤所提供的語意。   

四.規範與DTD

頁面檔案透過元素宣告不同的DTD, 來告知瀏覽器目前頁面符合哪種HTML或XHTML規格.以下只列舉HTML4.01和XHTML1.0兩種規格相關的DTD:   

HTML

HTML 4.01 規定了三種文件類型:Strict、Transitional 以及 Frameset。


HTML Strict DTD

如果您需要乾淨的標記,免於表現層的混亂,請使用此類型。請與層疊樣式表(CSS)搭配使用:

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


HTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入樣式表的呈現屬性和元素。如果您的讀者使用了不支援層疊樣式表(CSS)的瀏覽器以至於您必須使用 HTML 的呈現特性時,請使用此類型:

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


Frameset DTD

Frameset DTD 應當用於有框架的文檔。除了 frameset 元素取代 body 元素之外,Frameset DTD 等同於 Transitional DTD:

ttp://www.w3.org/TR/html4/frameset.dtd">http://www.w3.org/TR/html4/frameset.dtd ">

  

XHTML

XHTML 1.0 規定了三種 XML 文件類型:Strict、Transitional 以及 Frameset。


XHTML Strict DTD

如果您需要乾淨的標記,免於表現層的混亂,請使用此類型。請與層疊樣式表(CSS)搭配使用:

br />PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd">


XHTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入樣式表的呈現屬性和元素。如果您的讀者使用了不支援層疊樣式表(CSS)的瀏覽器以至於您必須使用 XHTML 的呈現特性時,請使用此類型:

br />PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">


XHTML Frameset DTD

當您希望使用框架時,請使用此 DTD!

br />PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-frameset.dtd">

  

五.DOCTYPE 元素語法

文法

HTML 頂層元素 可用性 "註冊//組織//類型 標籤//定義 語言""URL"

  

文法元素說明

頂層元素:指定 DTD 中聲明的頂層元素類型。這與聲明的 SGML 文件類型相對應。 預設為HTML。

  

可用性:指定正式公開識別碼(FPI)是可公開存取的物件還是系統資源。取值可以為PUBLIC或SYSTEM.PUBLIC 預設。表示可公開存取的對象。 SYSTEM表示系統資源,如本機檔案或 URL。

  

註冊:指定組織是否由國際標準化組織(ISO)註冊。

為預設,表示組織名稱已註冊。

-表示組織名稱未註冊。 Internet 工程任務組(IETF)和萬維網協會(W3C)並非註冊的 ISO 組織。

  

組織:指定表明負責由 !DOCTYPE 聲明引用的 DTD 的創建和維護的團體或組織的名稱,即 OwnderID。 IETF為IETF。 W3C為W3C。

  

類型:指定公開文字類,即所引用的物件類型。 預設為DTD。

  

標籤:指定公開文字描述,即對所引用的公開文字的唯一描述性名稱。後面可附版本號。預設為HTML。

  

定義:指定文件類型定義。

Frameset 框架集文件。

Strict 排除所有 W3C 專家希望逐步淘汰的代表性屬性和元素,因為樣式表已經很完善了。

Transitional 包含除 frameSet 元素的全部內容。

  

語言:指定公開文字語言,即用於建立所引用物件的自然語言編碼系統。此語言定義已編寫為 ISO 639 語言代碼(大寫兩個字母)。 EN 預設。英語。

  

URL:指定所引用物件的位置。   

  

六.檢查工具

如果要檢查你的頁面內容是否符合在DOCTYPE中聲明的標準,可以使用W3C提供的驗證工具:

http://validator.w3.org/

  

七.DOCTYPE切換

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

   

理論上,這應該是一個非常直覺的切換。假如頁面的元素指出了頁面的遵循標準(例如XHTML1.0), 瀏覽器就會切換到Standards模式。假如沒有指定doctype,或指定HTML 3.2以及更老的版本,瀏覽器就切換到Quirks模式。這樣一來,瀏覽器既能正確顯示遵循標準的文檔,又不會完全捨棄老式的、與標準不符的網頁。 但會有以下幾種情況:

1.遺失的URL或相對URL

在完整的doctype聲明中,要包括對應的文檔類型定義(DTD)文件的URL。如果URL遺失,或指定的是相對路徑(而不是完全限定的Internet位址),大多數瀏覽器都會進入Quirks模式,不管doctype宣告規定的是什麼模式。

  

2.形式錯誤的doctype

瀏覽器對doctype聲明的形式和格式非常敏感,如果不能識別一個形式錯誤的doctype,就會強制進入Quirks模式(建議將一個已知正確的doctype拷貝和粘貼到文檔中,而不是親自輸入它)。之所以出現形式錯誤的doctype,常見的原因是在 doctype 的第一部分與URL之間缺少一個空格。將一個分兩行的doctype折成單獨一行,常常會遺失那個空格。

  

3.過渡期的 doctype

瀏覽器處理過渡期的doctype時,最容易出現不一致的問題。 IE和Opera使用Standards模式;Netscape 6和舊版的Safari使用Quirks模式;Netscape 7、Mozilla 1和新版本的Safari使用Netscape的Almost Standards模式,它是Standards模式的一個具有更好容錯性的版本。

  

4.未知的 doctype

瀏覽器在處理不能辨識的doctype時,也存在不一致的現象。 IE和Opera會進入Standards模式;換言之,它假定不能辨識的 doctype 是尚未在瀏覽器中整合的一個新標準。 Netscape 6則相反,會在遇到不能辨識的doctype時切換到Quirks模式。

   

doctype切換也許是讓瀏覽器進入正確呈現模式並正確顯示網頁的一種有效手段,前提是你注意到了各種瀏覽器的不一致,並能積極主動地避免各種問題。      

八.XHTML使用技巧

1.緊接在上面 DOCTYPE 聲明之後的是一個 XHTML 名字空間(namespace)聲明,放在增強的 元素中,寫法為:

http://www.w3.org/1999/xhtml">

   

2.由於 XHTML 1.0 頁面就是合法的 XML 文檔,而 XML 對於標籤和屬性都是區分大小寫的,為了簡單起見,XHTML 1.0 頁面中所有的標籤和屬性都必須使用小寫。

一些免費的工具,例如 HTML Tidy(http://tidy.sourceforge.net/),可以幫助你把標籤和屬性自動轉換為小寫。

   

3. 透過在 元素中加入一個 元素來聲明頁面中使用的語言。

聽聽聽

4.鍦

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

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

如何使用HTML5表單驗證屬性來驗證用戶輸入?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

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

< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼?

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

< datalist>的目的是什麼。 元素?

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

< meter>的目的是什麼。 元素?

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

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

使用IFRAME的安全性含義是什麼?如何減輕它們? 使用IFRAME的安全性含義是什麼?如何減輕它們? Mar 18, 2025 pm 02:51 PM

使用IFRAME的安全性含義是什麼?如何減輕它們?

See all articles