页面为要加<!DOCTYPE html>

2021/7/13 6:09:29

编程Tag： 浏览器模式页面 html HTML5 声明 DOCTYPE 要加

本文主要是介绍页面为要加<!DOCTYPE html>，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

最近因为写一个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">

http://www.ssnd.com.cn 化妆品OEM代加工

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

这篇关于页面为要加<!DOCTYPE html>的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

页面为要加<!DOCTYPE html>

相关编程文章