现在的代码编辑器越来越人性化，各种插件、快捷键都能够帮助我们快速生成代码。比如：使用vscode编辑器在html文档中输入！再按tab键就能快速生成一个完整的html结构。如图所示

今天我们要说的不是代码编辑器，我们将目光移到文档的顶部，会发现顶部有一个<!DOCTYPE html>声明，很多人不知道这个这个声明有何作用，甚至还想把它给删除。

1.DOCTYPE的作用

DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE >声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

2.删除<!DOCTYPE>会发生什么？

在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异。这种渲染方式叫做混杂模式。在W3C标准出来之后，浏览器对页面的渲染有了统一的标准，这种渲染方式叫做标准模式。<!DOCTYPE>不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视<!DOCTYPE>

3.严格模式和混杂模式

严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd

严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面

混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

4.常见的DOCTYPE声明

HTML5

<!DOCTYPE html>

HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

深入理解DOCTYPE的作用相关推荐

html中的doctype有什么作用,html中doctype的作用是什么？
html中doctype的作用是什么?doctype是简写,全拼是document type,它的作用是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令,简单理解就是一个声明的作用. ...
DOCTYPE声明作用及用法详解
一.浏览器呈现模式和doctype 有的网页是遵循标准而创作的,但也有很多不是.即使你不能创建遵循标准的网页,也希望浏览器根据标准来正确显示那些页.目前,大量网页充斥着大量非标准代码,它们仍能正常地工 ...
HTML 文件里开头 Doctype 的作用是什么？
HTML 文件里开头 Doctype 的作用 : (1) 声明位于文档中的最前面的位置,处于标签之前. (2) 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. 重点:告诉浏览器 ...
doctype的作用，标准模式和兼容模式的区别
doctype的作用: DOCTYPE是document type (文档类型) 的缩写. 声明位于文档的最前面,处于标签之前,它不是html标签. 主要的作用是告诉浏览器的解析器使用哪种HTML规范 ...
doctype html的作用是什么,DOCTYPE的作用
DOCTYPE html 当查看网页源代码时,经常都能见到在顶部有一条很长的代码,这条代码就是用于对网页的声明,DOCTYPE的声明是网页形成的一个关键部分,现在就来详细的了解一下它的用途及声明的类型 ...
Doctype的作用是什么？
Doctype的作用是什么? doctype 是html5标准网页声明,且必须声明在html文档的第一行.来告知浏览器的解析器用什么文档标准解析这个文档,不同的渲染模式会影响浏览器对于 CSS代码甚至 ...
DOCTYPE的作用和用法
DOCTYPE的作用和用法 <!DOCTYPE> 声明帮助浏览器正确地显示网页提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型. 1 ...
html中的doctype有什么作用,HTML中doctype的作用及几种类型详解
一.DOCTYPE标签的定义与作用是一个用于声明当前HTMl版本,用来告知web浏览器该文档使用是哪种 HTML 或者 XHTML 规范来解析页面,以便浏览器更加准确的理解页面内容,更加良好地展现内 ...
简述html中Doctype的作用,HTML中doctype的作用及几种类型详解
一.DOCTYPE标签的定义与作用是一个用于声明当前HTMl版本,用来告知web浏览器该文档使用是哪种 HTML 或者 XHTML 规范来解析页面,以便浏览器更加准确的理解页面内容,更加良好地展现内 ...

深入理解DOCTYPE的作用

1.DOCTYPE的作用

2.删除<!DOCTYPE>会发生什么？

3.严格模式和混杂模式

4.常见的DOCTYPE声明

深入理解DOCTYPE的作用相关推荐

最新文章

热门文章