|
最近因為寫一個js函數(shù)，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本文件直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結(jié)果直接是整個document的高度，而非當前瀏覽器屏幕可視的高度。經(jīng)過幾個小時的瘋狂搜索，最終發(fā)現(xiàn)原來是少了<!DOCTYPE html> 記錄下來，避免以后再遇到類似情況不知所措。（非原創(chuàng)，翻譯的老外文章：https://www./learn/doctype-html#the-html5-doctype-declaration）
<!DOCTYPE html> 的意義 每個web文檔的第一行都應(yīng)該包含一個<!DOCTYPE html>聲明。盡管它用尖括號括起來，但它不是一個標記而是一個聲明。 Doctype代表文檔類型聲明。它通知web瀏覽器在構(gòu)建web文檔時使用的HTML的類型和版本。這有助于瀏覽器正確處理和加載它。 雖然該語句的HTML語法有點簡單，但必須注意，每個版本的HTML都有自己的規(guī)則。
HTML5 doctype聲明 HTML5<!DOCTYPE html>聲明與以前的版本相比，是最簡單、最短的。 example： <!DOCTYPE html> <html> <head>...</head> <body> ... </body> </html>
舊版本HTML中的doctype HTML5之前的版本基于標準的通用標記語言（SGML），所以他們的！doctype聲明必須包含對相應(yīng)文檔類型聲明（DTD）的引用。這也意味著保存DTD聲明，并為嚴格模式和過渡模式提供單獨的聲明。 注意：HTML5基于它自己的標準，而不是SGML——這就是HTML5 doctype不需要DTD的原因。 現(xiàn)在創(chuàng)建一個網(wǎng)站，你肯定會使用HTML5的簡單doctype。但是，您可能會在舊文檔中遇到其他更復(fù)雜的版本。你可以在下面找到一些例子。
HTML 4.01版 在HTML4中，doctype聲明比HTML5中更長，更具描述性。它包含所有HTML元素和屬性，但不允許使用框架集。在下面的示例中，您可以看到HTML 4.01過渡版本的doctype聲明： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd"> 下一個示例以html4.01的嚴格模式顯示doctype。嚴格模式和過渡性模式之間的主要區(qū)別在于，這種模式不包含表示性和不推薦使用的元素： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd">
XHTML 1.0嚴格版 此html doctype聲明還包含所有元素和屬性，但不包含表示和不推薦使用的元素。但是，必須用嚴格的XML編寫： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./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./TR/xhtml11/DTD/xhtml11.dtd">
HTML<!DOCTYPE html>：有用的提示 如果您跳過HTML5 doctype聲明，系統(tǒng)將在您運行網(wǎng)站時自動添加它。這不適用于舊版本的HTML。 每個HTML版本的DTD都可以在其官方規(guī)范中找到（例如，在這里您可以看到html4.01的DTD）。
瀏覽器的文檔解析模式有兩種 document.compatMode： BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。 如果在你的頁面里面沒有寫的話瀏覽器就會按照第一種格式來渲染頁面，就會在不同瀏覽器中顯示出不同的效果； 相反如果在你的頁面中加入了這個聲明吧，你的頁面在所有的瀏覽器里面都會按照w3c的標準來渲染界面，效果都是統(tǒng)一的一個； 我前面因為沒寫doctype聲明，所以瀏覽器采用了怪異模式，這種模式下導致了$(window).height();直接是整個document的高度，而非當前瀏覽器窗口可視范圍的高度。 |
|
|
來自： 新進小設(shè)計 > 《待分類》
