最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高度，而非當前瀏覽器螢屏可視的高度，經過幾個小時的瘋狂搜索，最終發現原來是少了<!DOCTYPE html>
記錄下來，避免以后再遇到類似情況不知所措，（非原創，翻譯的老外文章：https://www.bitdegree.org/learn/doctype-html#the-html5-doctype-declaration）
- <!DOCTYPE html> 的意義
- HTML5 doctype宣告
-
舊版本HTML中的doctype
3.1HTML 4.01版
3.2XHTML 1.0嚴格版
3.3XHTML 1.1版
- HTML<！DOCTYPE html>：有用的提示
<!DOCTYPE html> 的意義
每個web檔案的第一行都應該包含一個<!DOCTYPE html>宣告，盡管它用尖括號括起來，但它不是一個標記而是一個宣告，
Doctype代表檔案型別宣告，它通知web瀏覽器在構建web檔案時使用的HTML的型別和版本，這有助于瀏覽器正確處理和加載它，
雖然該陳述句的HTML語法有點簡單，但必須注意，每個版本的HTML都有自己的規則，
HTML5 doctype宣告
HTML5<!DOCTYPE html>宣告與以前的版本相比，是最簡單、最短的，
example：
<!DOCTYPE html>
<html>
<head>...</head>
<body>
...
</body>
</html>
舊版本HTML中的doctype
HTML5之前的版本基于標準的通用標記語言（SGML），所以他們的！doctype宣告必須包含對相應檔案型別宣告（DTD）的參考，這也意味著保存DTD宣告，并為嚴格模式和過渡模式提供單獨的宣告，
注意：HTML5基于它自己的標準，而不是SGML——這就是HTML5 doctype不需要DTD的原因，
現在創建一個網站，你肯定會使用HTML5的簡單doctype，但是，您可能會在舊檔案中遇到其他更復雜的版本，你可以在下面找到一些例子，
HTML 4.01版
在HTML4中，doctype宣告比HTML5中更長，更具描述性，它包含所有HTML元素和屬性，但不允許使用框架集，在下面的示例中，您可以看到HTML 4.01過渡版本的doctype宣告：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
下一個示例以html4.01的嚴格模式顯示doctype，嚴格模式和過渡性模式之間的主要區別在于，這種模式不包含表示性和不推薦使用的元素：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0嚴格版
此html doctype宣告還包含所有元素和屬性，但不包含表示和不推薦使用的元素，但是，必須用嚴格的XML撰寫：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.1版
這個<!DOCTYPE html>與xhtml1.0strict非常相似，但允許您添加模塊（例如，為亞洲語言提供ruby文本支持）:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML<!DOCTYPE html>：有用的提示
如果您跳過HTML5 doctype宣告，系統將在您運行網站時自動添加它，這不適用于舊版本的HTML，
每個HTML版本的DTD都可以在其官方規范中找到（例如，在這里您可以看到html4.01的DTD），
那么，我前面遇到的問題，跟不寫doctype宣告有什么關聯呢？
那是因為，瀏覽器的檔案決議模式有兩種
document.compatMode：
BackCompat：怪異模式，瀏覽器使用自己的怪異模式決議渲染頁面，
CSS1Compat：標準模式，瀏覽器使用W3C的標準決議渲染頁面，
如果在你的頁面里面沒有寫的話瀏覽器就會按照第一種格式來渲染頁面，就會在不同瀏覽器中顯示出不同的效果；
相反如果在你的頁面中加入了這個宣告吧，你的頁面在所有的瀏覽器里面都會按照w3c的標準來渲染界面，效果都是統一的一個；
我前面因為沒寫doctype宣告，所以瀏覽器采用了怪異模式，這種模式下導致了$(window).height();直接是整個document的高度，而非當前瀏覽器視窗可視范圍的高度，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/877.html
標籤：HTML5
上一篇：優美網站首頁，頂部多層導航