页面为要加

时间 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>

<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的高度，而非当前浏览器窗口可视范围的高度。