為什么要用!DOCTYPE聲明

實例:

我們經常會看到類似這樣的代碼:

<!DOCTYPE html>
<html>
<head>
<title>文檔的標題</title>
</head>
<body>
文檔的內容......
</body>
</html>

注解:可以看到最上面有一行關于“DOCTYPE”(文檔類型)的聲明,它就是告訴瀏覽器,使用哪種規范來解釋這個文檔中的規范。你知道如果沒有它,瀏覽器在渲染頁面的時候會使用怪異模式(各個瀏覽器在怪異模式下對各個元素渲染時有差異,因此會導致同一個樣式在不同瀏覽器上看到的效果不同)。

定義和用法

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位于 <html> 標簽之前。

<!DOCTYPE> 聲明不是 HTML 標簽;它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。

在 HTML 4.01 中,<!DOCTYPE> 聲明引用 DTD,因為 HTML 4.01 基于 SGML。DTD 規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。

HTML5 不基于 SGML,所以不需要引用 DTD。

提示:請始終向 HTML 文檔添加 <!DOCTYPE> 聲明,這樣瀏覽器才能獲知文檔類型。

HTML 4.01 與 HTML5 之間的差異

在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種:

<!DOCTYPE html>

HTML 元素和文檔類型(Doctype)

請參閱這個?HTML 元素表,其中列出了每種元素會出現在哪個文檔類型中。

提示和注釋

注釋:<!DOCTYPE> 聲明沒有結束標簽。

提示:<!DOCTYPE> 聲明對大小寫不敏感。

提示:請使用 W3C 的驗證器來檢查您是否編寫了有效的 HTML / XHTML 文檔!

常用的 DOCTYPE 聲明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

該 DTD 包含所有 HTML 元素和屬性,但不包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

該 DTD 包含所有 HTML 元素和屬性,包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

該 DTD 等同于 HTML 4.01 Transitional,但允許框架集內容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

該 DTD 包含所有 HTML 元素和屬性,但不包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 XML 來編寫標記。

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

XHTML 1.0 Transitional

該 DTD 包含所有 HTML 元素和屬性,包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 XML 來編寫標記。

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

XHTML 1.0 Frameset

該 DTD 等同于 XHTML 1.0 Transitional,但允許框架集內容。

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

XHTML 1.1

該 DTD 等同于 XHTML 1.0 Strict,但允許添加模型(例如提供對東亞語系的 ruby 支持)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

總結

(編寫HTML時)聲明文檔類型:

<!DOCTYPE html>

這樣聲明的好處:

  • 你可以輕松的寫下這個doctype,而不用擔心會寫錯;
  • 它是向后兼容的(因為HTML5的doctype就是這樣寫的),并且現代瀏覽器都認識它。

疑問:沒有指定dtd將會開啟瀏覽器的怪異模式?

? ? ? ?這種說法是錯的!正確的說法應該是沒有定義doctype才會開啟怪異模式,也就是說你只需要定義就可以讓瀏覽器在嚴格模式(標準模式)下渲染頁面,而不需要指定某個類型dtd。


回顧一下:

? ? ? ?所有的瀏覽器都有兩種模式:怪異模式和嚴格模式(也有人叫標準模式)。IE 6 for Windows/mac, Mozilla, Safari和Opera 都實現了這兩種模式,但是IE 6以下版本永遠定在了怪異模式。


關于兩種模式,你需要知道以下幾點:

  1. 在標準化之前寫的頁面是沒有doctype的,因此沒有doctype的頁面是在怪異模式下渲染的
  2. 反過來說,如果web開發人員加入的doctype,說明他知道他所要做的事情,大部分的doctype會開啟嚴格模式(標準模式),頁面也會按照標準來渲染。
  3. 任何新的或者未知的doctype都會開啟嚴格模式(標準模式)。
  4. 每個瀏覽器都有自己的方式來激活怪異模式。

你可以看看這個清單:http://hsivonen.iki.fi/doctype/

注意:你可以根本不需要根據你選擇的doctype來驗證你的頁面,只要doctype標簽存在就足以開啟嚴格模式(標準模式)了。如果仍感到懷疑,那么請前往http://www.quirksmode.org/css/quirksmode.html#link2了解你想知道的內容。

我們只需要一小段JavaScript代碼就可以得到答案,它就是:

mode=document.compatMode;

這個代碼可以用來判斷,當前瀏覽器是處于怪異模式還是標準模式,該屬性的兼容性毋庸置疑,如果你表示懷疑,可以查看http://www.quirksmode.org/dom/w3c_html.html#t11

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/373764.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/373764.shtml
英文地址,請注明出處:http://en.pswp.cn/news/373764.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

java 線程的開始、暫停、繼續

Android項目中的一個需求&#xff1a;通過線程讀取文件內容&#xff0c;并且可以控制線程的開始、暫停、繼續&#xff0c;來控制讀文件。在此記錄下。 直接在主線程中&#xff0c;通過wait、notify、notifyAll去控制讀文件的線程&#xff08;子線程&#xff09;&#xff0c;報錯…

為什么要在Java中使用Unchecked異常而不是Checked異常

關于檢查與未檢查的異常的爭論可以追溯到過去。 有人說這是Java包含的最佳功能之一。 其他人則說這是他們最大的錯誤之一[ 1 ]。 辯論似乎結束了。 在這篇文章中&#xff0c;我將嘗試包含指向該主題的文章和書籍的鏈接。 我不是專家&#xff0c;但是我會盡力向您解釋為什么我得…

batchplot插件用法_Batchplot批量打印怎么用?Batchplot批量打印教程

很多從事CAD設計工作的用戶都碰到過這種情況&#xff1a;在一個單DWG格式的圖紙文件中包含有大量圖紙&#xff0c;如果一張一張選取打印不但費時費力&#xff0c;而且容易遺漏某張圖紙&#xff0c;這時候就需要用到Batchplot插件&#xff0c;這是專門針對單DWG多圖紙的批量打印…

選擇排序和冒泡排序以及折半查找

1.選擇排序 2.冒泡排序 3.折半查找 方式一&#xff1a;開發使用的方法 方式二&#xff1a;普通的折半 轉載于:https://www.cnblogs.com/juncaoit/p/5935068.html

JSP中Request屬性范圍

JSP屬性范圍&#xff0c;通過以下幾個測試代碼來學習request屬性的范圍 測試一(JSP動態指令方式傳參)&#xff1a; 測試內容&#xff1a; <jsp:param .../>添加參數,通過<jsp:forward page"...">來實現服務器端跳轉,以此來測試request屬性的范圍&#…

Spring MVC – Flash屬性

最新的Spring Framework版本&#xff08;3.1&#xff09;帶來了有趣的功能&#xff0c;稱為Flash屬性。 這是對我很久以前在我的一篇文章中提到的問題的補救措施&#xff1a; Spring MVC –會話屬性處理。 這個問題可以用幾句話來形容&#xff1a;如果我們想通過兩個控制器之間…

000 快速排序算法

一&#xff1a;概述 快速排序是東尼.霍爾所發展的一種快速排序算法。 對于n個項目的排序&#xff0c;平均O&#xff08;n*logn&#xff09;次比較&#xff0c;在比較糟糕的情況下是O&#xff08;n2&#xff09;次比較。 采用分治策略把一個串行分為兩個子串行。 二&#xff1a;…

nginx post請求超時_nginx記錄分析網站響應慢的請求(ngx_http_log_request_speed)

nginx模塊ngx_http_log_request_speed可以用來找出網站哪些請求很慢&#xff0c;針對站點很多&#xff0c;文件以及請求很多想找出哪些請求比較慢的話&#xff0c;這個插件非常有效.作者的初衷是寫給自己用的&#xff0c;用來找出站點中處理時間較長的請求, 這些請求是造成服務…

如何用angularjs制作一個完整的表格之一__創建簡單表格

初步接手人生的第一個項目&#xff0c;需要用angularjs制作表格和實現各種功能&#xff0c;因此遇到了各種問題和以前不熟悉的知識點&#xff0c;在此記錄下來&#xff0c;以供大家學習交流&#xff0c;解決方式可能并不完善或符合規范&#xff0c;如果大家有更好的方式歡迎指出…

Java的String類是上帝的對象嗎?

10月&#xff0c;我寫了一個博客&#xff0c;題為“上帝對象中的頂級特朗普”&#xff0c;其中談到了用167種不同的方法發現的對象的發現&#xff0c;這些方法將該對象與應用程序的所有其他部分鏈接在一起&#xff0c;并且正如您所期望的那樣&#xff0c;上帝或怪物物的一般標準…

十步完全理解SQL

很多程序員視 SQL 為洪水猛獸。SQL 是一種為數不多的聲明性語言&#xff0c;它的運行方式完全不同于我們所熟知的命令行語言、面向對象的程序語言、甚至是函數語言&#xff08;盡管有些人認為 SQL 語言也是一種函數式語言&#xff09;。 我們每天都在寫 SQL 并且應用在開源軟件…

curl命令java_上curl java 模擬http請求

最近&#xff0c;我的項目要求java模擬http請求&#xff0c;獲得dns解決 tcp處理過的信息特定的連接。java api提供urlConnection apache提供的httpClient都不能勝任該需求&#xff0c;二次開發太費時間。于是google之。最后 得出兩種解決的方法&#xff1a;一是使用HTTP4J。該…

androidstudio 優化gradle編譯效率

androidstuido 使用gradle自己主動構建和編譯。有時做少量改動編譯須要等待時間過長&#xff0c;近期Erik Hellman編寫的Boosting the performance for Gradle in your Android projects&#xff08; 譯文 參考1&#xff09;提到了此問題的優化方法。1.gradle的升級到2.4 。 2.…

Common Knowledge_快速冪

問題 I: Common Knowledge 時間限制: 1 Sec 內存限制: 64 MB提交: 9 解決: 8[提交][狀態][討論版]題目描述 Alice and Bob play some game in which they score points. Each of the two has an n-digit scoreboard which depicts numbers in base 10 (with leading zeroes).…

播放2.0:Akka,Rest,Json和依賴項

在過去的幾個月中&#xff0c;我越來越多地涉足scala。 Scala與“ Play框架”一起為您提供了一個非常有效且快速的開發環境&#xff08;即&#xff0c;您掌握了Scala語言的特質之后&#xff09;。 Play框架背后的家伙一直在努力開發新版本的Play 2.0。 在Play 2.0中&#xff0c…

python使用多線程寫生成器_Python學習——多線程,異步IO,生成器,協程

Python的語法是簡潔的&#xff0c;也是難理解的。比如yield關鍵字&#xff1a;def fun():for i in range(5):print(test)x yield iprint(good, x)if __name__ __main__:a fun()# print(a.__next__())# print(a.__next__())# print(a.__next__())y a.send(None)y a.send(-1…

Python與C++結構體交互

需求&#xff1a;根據接口規范&#xff0c;實現與服務端的數據交互 服務端結構體分包頭、包體、包尾 包頭C結構體示例如下 1 typedef struct head2 {3 BYTE string1;4 BYTE string2; //包類型5 BYTE string3; //版本號,目前為06 char s…

Ubuntu下安裝OpenSSH Server并在客戶端遠程連接Ubuntu

本文主要是向讀者介紹了如何在Ubuntu系統下安裝OpenSSH Server并在客戶端遠程連接Ubuntu&#xff0c;共有兩種方法&#xff0c;一種是命令行安裝&#xff1b;另一種是通過Ubuntu Software Center安裝&#xff0c;希望對大家能有幫助&#xff01; 方法一&#xff08;推薦&#…

算法:老鼠走迷宮問題

算法&#xff1a;老鼠走迷宮問題(初) 【寫在前面】 老鼠走迷宮問題的遞歸實現&#xff0c;是對遞歸思想的一種應用。 【問題描述】 給定一個二維數組&#xff0c;數組中2表示墻壁&#xff0c;0表示通路&#xff0c;由此數組可展示為一個迷宮圖。給定入口位置和出口位置&#xf…

rust python對比_Python Rust 迭代器對比

迭代是數據處理的基石&#xff0c;而 Python 中所有集合都可以迭代&#xff0c;這是 Python 讓使用者感到非常方便的特征之一。下面是一些在 Python 中經常使用的迭代模式# 列表for i in [1, 2, 3, 4]:print(i)# 字典di {a: 1, b: 2, c: 3}# 迭代鍵for k in di.keys():print(k…