DOCTYPE的作用，常见声明，删除＜!DOCTYPE＞发生什么？严格模式和混杂模式

最新推荐文章于 2023-06-29 16:33:13 发布
最新推荐文章于 2023-06-29 16:33:13 发布
阅读量2.8k 收藏 11
点赞数 2
分类专栏： HTML 文章标签： html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44100002/article/details/113778875
版权

在HTML文档首部往往会有这样一行代码：

<!DOCTYPE html>

由于常见而且一般可能自己使用编辑器设置了默认模板（包含这一句代码），可能很多时候我们会忽略它的存在，不知道它的作用以及重要性。实际上，这行代码不是html标签，是一个声明， 其作用是告诉浏览器按照哪一种HTML文档规范解析HTML文档。

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。

HTML在其发展过程中遇到过以下几个版本，目前沿用的为 html 4.0、 xhtml 1.0 、html5

版本年
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012

其中，<!DOCTYPEhtml>为HTML 5的声明。一般情况下我们新写的前端工程就用这个声明就可以，否则一些新的标准特性是不能用的，比如说canvas标签。不去声明doctype也是不可取的。不同浏览器对这种情况有不同的默认规范，并不一致，所以，一定要声明好doctype，要注意一定加上感叹号。

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

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

严格模式和混杂模式

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

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

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

推荐阅读：Quirks模式是什么？它和Standards模式有什么区别？

DTD是什么？

DTD：Document Type Definition，中文翻译为：文档类型定义。DTD可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。因为早期的版本基于SGML，所以需要套用SGML的解析规则。
DTD的作用在于定义SGML文档的文档类型以便于浏览器解析。

随着技术的进步，现在HTML5 不基于 SGML，所以也就不需要引用 DTD了

需要进一步了解可以看一下这篇 SGML、HTML、XML、XHTML、HTML5

常见的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 来编写标记。

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">
Ｓòrry╮
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
<!DOCTYPE html>
一起走吧
02-14 765
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。对于Web前端开发来说，的声明是必不可少的的，因为如果你没有定义文档类型，就会影响代码的实现（标示和CSS都不会生效），也决定了最终浏览器对于文档的显示效果。   文档类型标签，该标签是将特定的标准通用标记语言或XML文档与文档类型定义（DTD）联系
HTML <!DOCTYPE>头声明引发的血案
GiGi
10-09 821
一个月前，做bi项目时遇到一个怪问题，技术同学发现同样的表单元素放在不同的页面中表现样式相去甚远。由于bi项目周期较长新老交替的代码都有，所以很是苦恼。仔细对比代码发现完全相同的html代码和样式竟有不同的样式，后来发现原来是因为样式显示不对的页面的头用的是html4过渡类型的文档生命，而新页面的样式是在html5标准下编写的，故而导致显示效果不同。
<!DOCTYPE html>有什么用？
weixin_30768661的博客
04-19 3176
<!DOCTYPE html> 是文档声明，必须放在文档第一行，它的作用就是告诉浏览器以哪个html版本来解析你的html代码。当你不写声明的时候，浏览器就会以自己的怪异模式来解析你的html代码，这个时候就会出现一些比较奇怪的问题。 而常见的声明目前比较多的是html 5和html 4声明 <!DOCTYPE html> 声明用的是html5标准；...
DOCTYPE的详细讲解
最新发布
zayyo的博客
06-29 1652
我们在创建一个HTML文件时都会有一个<!DOCTYPE>标签，虽然他很不起眼，但是他在我们的HTML文件只能却是很重要的。今天我们就来好好分析一下它的作用！！！
<!DOCTYPE>声明
Ling201509的博客
10-11 595
DOCTYPE不可怕，但把它拿走，会让你怕了又怕。　　发现很多朋友提出有关DIV+CSS排版问题，以及IE与FF的兼容问题。怎么问的都有，结果就是一个——显示很奇怪，很难调整。我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DocType声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始。在遵循标准的任何Web文档中，DOCTY
html中的doctype有什么作用,HTML中doctype的作用及几种类型详解
weixin_36200503的博客
06-10 3237
一、DOCTYPE标签的定义与作用是一个用于声明当前HTMl版本，用来告知web浏览器该文档使用是哪种 HTML 或者 XHTML 规范来解析页面，以便浏览器更加准确的理解页面内容，更加良好地展现内容效果！二、DOCTYPE标签的特点1. 标签没有结束标签；2.声明被所有主流浏览器支持；3.声明不是一个HTML标签，在HTML5中是可以不区分大小写的；4.声明必须位于HTML文档中最前面，处于标签...
CrystalAngelLee#crystal-interview#Doctype 作用? 严格模式与混杂模式如何区分？它们有何
07-25
（ HTML5 没有严格和混杂之分）区分DTD： Document Type Definition文档包含严格的 DOCTYPE：一般以严格模式呈现包含过渡 D
html doctype 作用介绍
09-28
浏览器有两种主要的渲染模式：BackCompat（标准兼容模式未开启，也被称为怪异模式或混杂模式）和CSS1Compat（标准兼容模式已开启，也被称为严格模式）。 - **BackCompat（怪异模式）**：在怪异模式下，浏览器尝试...
HTML教程：DOCTYPE 的缩写
09-28
DOCTYPE XHTML>`，浏览器可能无法正确识别文档类型，因此可能会导致页面解析错误，进入所谓的“混杂模式”或者“怪异模式”。在这种模式下，浏览器会按照旧的、非标准的方式来解析文档，可能会出现布局问题和其他不...
!DOCTYPE html>能不能不加啊？ 不加又出错了
wang13342322203的博客
07-26 2683
网页中用了 <!DOCTYPEhtml... 就表示该页面采用了W3C标准，这样做可以增强页面的兼容性，降低对浏览器的依赖性。 不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。 ...
doctype是什么，有什么作用
低眉的博客
09-26 1448
DOCTYPE是什么，有什么作用 <!DOCTYPE> 声明大小写不敏感。 用 W3C 的验证器来检查是否编写了有效的 HTML / XHTML 文档 <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个HTML 版本进行...
<!DOCTYPE>标签的定义与用法
沫沫酱
03-06 2020
的定义：      声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。 该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML版本。（假如文档中的标记不遵循doctype声明所指定的DTD，这个文档除了不能通过代码校验之外，还有可能无法在浏览器中正确显示。） 的用法： 解析：在上面的声明中，
doctype html的作用是什么,DOCTYPE的作用
weixin_35035699的博客
06-20 5413
DOCTYPE html当查看网页源代码时，经常都能见到在顶部有一条很长的代码，这条代码就是用于对网页的声明，DOCTYPE的声明是网页形成的一个关键部分，现在就来详细的了解一下它的用途及声明的类型。相对于现在的HTML5，DOCTYPE声明中的写法已变得简明，DOCTYPEhtml>是现在HTML5的标准声明，无论是用记事本、或是用网页制作工具创建一个HTML页面时，只需要在代码的开头写上...
DOCTYPE声明作用及用法详解
shecanwin的专栏
04-06 4587
很多朋友不知道DOCTYPE声明的作用，特为大家搜索整理了这篇文章，希望对需要的朋友有所帮助。 一、浏览器呈现模式和doctype       有的网页是遵循标准而创作的，但也有很多不是。即使你不能创建遵循标准的网页，也希望浏览器根据标准来正确显示那些页。目前，大量网页充斥着大量非标准代码，它们仍能正常地工作。事实上，为旧版浏览器设计的大多数代码都能在新版浏览器中正确显示（虽然呈现方式可能有所
HTML中的 ＜!DOCTYPE＞ 声明
qq_51735681的博客
04-05 2804
HTML中的 <!DOCTYPE> 声明： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> 内容...... </body> </html> 几乎所有主流浏览器都支持 <!DOCTYPE> 声明。（其中包括像IE、火狐、Opera、Go
关于<!DOCTYPE> 声明
阿斯卡Asika的博客
04-24 470
关于<!DOCTYPE> 声明
doctype html报错h5,Doctype html 什么意思？h5中的新用法
weixin_33375514的博客
06-19 254
定义和用法：声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。以下面这个标签为例：PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""TR/xhtml1/DTD/xhtml1-strict.dtd">在上面的声明中...
html格式文档可删吗,删除文件 - remove《 HTML5：文件系统 》
weixin_32127359的博客
06-03 512
删除文件用的是文件对象的 remove 方法。先获取到想要删除的文件，然后再调用这个文件对象的 remove 方法，可以删除掉这个文件。代码这里我们可以基于之前用来复制文件的代码去修改一下 ... 想要删除的文件是根目录下面 files 目录里的 data.txt 这个文件 ... 获取成功以后，把文件对象传递给这个函数 ...在这个函数里面 .. 可以调用这个文件对象的 remove 方法 ....
<!DOCTYPE> 标签的含义以及是否可以省略
k_1991的专栏
10-31 1024
HTML 标签的含义是什么？如果省略此标签会怎样？ 定义和用法 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 以下面这个 标签为例： 在上面的声明中，声明了文档的根元素是 html，它在公共标识符被定
第一行的那个<!DOCTYPE html>是什么意思？
06-09
`<!DOCTYPE html>` 是 HTML5 中的文档类型声明，用于告诉浏览器当前页面使用的是 HTML5 标准。文档类型声明必须放在 HTML 文档的第一行，否则可能会导致浏览器以混杂模式解析页面，从而导致页面出现意想不到的问题。 在 HTML4 中，文档类型声明通常会指定一个 DTD （Document Type Definition），用于定义 HTML 文档的结构和语法规则。但是，在 HTML5 中，文档类型声明不再指定一个 DTD，而是简单地使用 `<!DOCTYPE html>` 来声明文档类型。这是因为 HTML5 的语法比以前的 HTML 版本更加简洁和灵活，不再需要复杂的 DTD 来定义其结构和语法规则。 总之，`<!DOCTYPE html>` 是 HTML5 中必需的文档类型声明，它告诉浏览器当前页面使用的是 HTML5 标准。在编写 HTML5 页面时，第一行始终应该是 `<!DOCTYPE html>`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值