頁面爲要加

時間 2020-08-10

標籤頁面爲要简体版

原文原文鏈接

最近由於寫一個js函數，須要用到$(window).height(); 因爲手寫demo的時候，過於自信，其實對前端方面的認識也不夠體系，用文本文件直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 致使了$(window).height();的結果直接是整個document的高度，而非當前瀏覽器屏幕可視的高度。通過幾個小時的瘋狂搜索，最終發現原來是少了<!DOCTYPE html>html

記錄下來，避免之後再遇到相似狀況不知所措。（非原創，翻譯的老外文章：https://www.bitdegree.org/learn/doctype-html#the-html5-doctype-declaration）前端

<!DOCTYPE html> 的意義
HTML5 doctype聲明
舊版本HTML中的doctypehtml5

3.1HTML 4.01版web

3.2XHTML 1.0嚴格版瀏覽器

3.3XHTML 1.1版ruby
HTML<！DOCTYPE html>：有用的提示

<!DOCTYPE html> 的意義框架

每一個web文檔的第一行都應該包含一個<!DOCTYPE html>聲明。儘管它用尖括號括起來，但它不是一個標記而是一個聲明。函數

Doctype表明文檔類型聲明。它通知web瀏覽器在構建web文檔時使用的HTML的類型和版本。這有助於瀏覽器正確處理和加載它。網站

雖然該語句的HTML語法有點簡單，但必須注意，每一個版本的HTML都有本身的規則。spa

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的高度，而非當前瀏覽器窗口可視範圍的高度。

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<