关闭

页面为要加<!DOCTYPE html>

时间: 2020-07-16阅读: 456标签: html

最近因为写一个js函数,需要用到$(window).height(); 由于手写demo的时候,过于自信,其实对前端方面的认识也不够体系,用文本文件直接敲出来的html代码,第一行没有加上<!DOCTYPE html> 导致了$(window).height();的结果直接是整个document的高度,而非当前浏览器屏幕可视的高度。经过几个小时的疯狂搜索,最终发现原来是少了<!DOCTYPE html>

记录下来,避免以后再遇到类似情况不知所措。

(非原创,翻译的老外文章:https://www.bitdegree.org/learn/doctype-html#the-html5-doctype-declaration

  1. <!DOCTYPE html> 的意义
  2. HTML5 doctype声明
  3. 旧版本HTML中的doctype

    3.1HTML 4.01版

    3.2XHTML 1.0严格版

    3.3XHTML 1.1版

  4. 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">


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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/9575

了解HTML及运行原理

HTML(HyperText Marked Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言。我们在浏览网页时看到的一些丰富的影像、文字、图片等内容都是通过HTML表现出来的

js 调用向html追加内容

position 是相对于 element 元素的位置,并且只能是以下的字符串之一:1. beforeBegin: 插入到标签开始前,2. afterBegin:插入到标签开始标记之后

在html中做嵌套页面_客户端实现html页面的嵌套

如何在客户端利用html、或js将一个html页面嵌套在另一个页面中,这篇文章主要讲解以下几种方式:IFrame引入 、<object>方式、Behavior的download方式 、使用JQuery的load方法

Js禁用html表单enter提交

很多时候我们开发的前端页面要考虑到用户在进行输入操作的时候回车只是为了跳到下一个输入项,而不是保存提交注册,为此需要禁用enter,从而就可以使用tab来行使enter的功能。所以就的使用js来控制html。

html鼠标自定义右键菜单:css+js实现自定义html右键菜单

我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。

css/html 空格,html空格符的显示、标示方式【html空格代码】

css/html 空格,html空格符的显示、标示方式。在html里面空格的话,你直接敲打出来的空格是不可以的,这篇文章将通过html和css中设置显示空格的实现总结

你可能从未听说过的15种HTML元素方法!

我们来讨论HTML和DOM之间的区别。显然,一个普通<table>元素就是HTML。您可以在.html的文件中使用它。它有一组属性影响它的外观和行为方式。这就是HTML,不过它与JavaScript无关。

html5和html的区别

html5是对html的第五次重大修改。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准!html5继承了html所有的语法,同时html5也会增加一些新的特性

基于 HTML5 Canvas 的交互式地铁线路图

地图稍微内容有点多,要全部展示,字显得有点小了,但是没关系,可以按照需求放大缩小,字体和绘制的内容并不会失真,毕竟都是用矢量绘制的~

VSCode中快捷输入HTML代码

VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些。文是在VSCode下编写的,其他编辑器如Atom、Sublime Text都支持Emmet

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!