頁面為要加<!DOCTYPE html>
最近因為寫一個js函式，需要用到$(window).height(); 由於手寫demo的時候，過於自信，其實對前端方面的認識也不夠體系，用文字檔案直接敲出來的html程式碼，第一行沒有加上<!DOCTYPEhtml> 導致了$(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>：有用的提示
辦公資源網址導航 https://www.wode007.com 熊貓辦公https://www.wode007.com/sites/73654.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的高度，而非當前瀏覽器視窗可視範圍的高度