最近因为写一个js函数,需要用到$(window).height(); 由于手写demo的时候,过于自信,其实对前端方面的认识也不够体系,用文本文件直接敲出来的html代码,第一行没有加上<!DOCTYPE html> 导致了$(window).height();的结果直接是整个document的高度,而非当前浏览器屏幕可视的高度。经过几个小时的疯狂搜索,最终发现原来是少了<!DOCTYPE html>
记录下来,避免以后再遇到类似情况不知所措。
(非原创,翻译的老外文章:https://www.bitdegree.org/learn/doctype-html#the-html5-doctype-declaration)
旧版本HTML中的doctype
3.1HTML 4.01版
3.2XHTML 1.0严格版
3.3XHTML 1.1版
<!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的高度,而非当前浏览器窗口可视范围的高度。
htm中doctype标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。这篇文章介绍doctype的特点和常用的dotype类型
<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂(兼容)模式呈现。
文档声明就是文档告诉游览器该以什么样的标准去解析它。游览器可以解析的文档可不止html,还有xhtml,xml...当然在这里我们并不需要知道xhtml、xml是什么以及和html的区别
DOCTYPE是Document Type(文档类型)的简写,在页面中,用来指定页面所使用的XHTML(或者HTML)的版本。要想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE声明。
在HTML文档初,往往会有这么一句话<!DOCTYPE html>,那么它的意义是什么呢?它是html5标准网页声明,全称为Document Type HyperText Mark-up Language,意思为文档种类为超文本标记性语言或超文本链接标示语言,现在是这个简洁形式
要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分。那么什么是DOCTYPE声明?对网页起何作用?DOCTYPE是document type(文档类型)的简写;!DOCTYPE声明是一种指令
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!