DOCTYPE的详细讲解

19 篇文章 0 订阅

我们在创建一个HTML文件时都会有一个<!DOCTYPE>标签,虽然他很不起眼,但是他在我们的HTML文件只能却是很重要的。今天我们就来好好分析一下它的作用!!!

DOCTYPE 是什么

DOCTYPE(文档类型声明)是一种用于指定网页或文档的HTML(超文本标记语言)版本的声明。DOCTYPE声明告诉网络浏览器解析HTML文档时要使用的HTML版本。有助于确保浏览器正确地渲染网页,并根据所选的HTML版本采取适当的行为。不同的HTML版本具有不同的语法和功能,DOCTYPE它一般位于HTML文档的最前面,位于<!DOCTYPE>标签中。

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

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

<!DOCTYPE>的作用

  1. 指定HTML版本:DOCTYPE声明告诉浏览器要使用的HTML版本。不同的HTML版本具有不同的语法和功能,因此正确指定DOCTYPE有助于确保浏览器正确地解析和渲染网页。
  2. 触发标准模式:过去,DOCTYPE声明还用于触发浏览器的标准模式。标准模式是浏览器按照W3C标准解析和呈现页面的模式,以确保一致的渲染结果。通过使用适当的DOCTYPE声明,可以告诉浏览器在标准模式下进行解析。
  3. 浏览器兼容性:一些旧版本的浏览器可能对特定的DOCTYPE声明有不同的行为,这可能导致页面在不同浏览器上显示不一致。通过正确指定DOCTYPE声明,可以尽可能确保在不同浏览器上获得一致的渲染结果。
  4. 校验文档:DOCTYPE声明还用于验证HTML文档的有效性。通过指定正确的DOCTYPE声明,可以使用HTML验证工具(如W3C的验证服务)来检查文档是否符合相应的HTML规范。这有助于发现并纠正HTML代码中的错误和警告。
    HTML发展过程中更替的几个版本
下面是几个常见的DOCTYPE声明示例:
版本
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012

目前沿用的为 html 4.0、 xhtml 1.0 、html5

请注意,DOCTYPE声明不是HTML标签,它是一个用于指定HTML版本的声明。

既然我们知道了DOCTYPE是为了声明浏览器的渲染模式的,那浏览器的渲染模式又有哪几种呢?它们分别有什么区别?

浏览器的渲染模式

  • 标准模式(Standards mode):也称为严格模式(Strict mode),在这种模式下,浏览器会根据最新的HTML和CSS规范进行页面的解析和渲染。标准模式遵循W3C的标准规范,确保不同浏览器对页面的渲染结果一致。

  • 混杂模式(Quirks mode):也称为怪异模式(Quirks mode),这是早期浏览器为了保持对旧网站的兼容性而实现的一种渲染方式。在混杂模式下,浏览器使用旧的渲染引擎,解析和呈现页面的方式可能与标准模式不同,导致不同浏览器之间的展示差异。会兼容 Navigator 4 和 IE 5 的非标准行为。

  • 准标准模式(Almost standards mode):这是介于标准模式和混杂模式之间的一种模式。准标准模式是为了兼容一些使用了过渡HTML和CSS特性的旧网站而设计的,它在一定程度上遵循W3C的标准规范,但仍可能存在一些差异。可以理解为过渡模式。

它们有什么区别

标准模式 —— W3C 标准的盒模型 混杂模式下 —— IE 盒模型

近标准模式和标准模式之间的唯一区别在于是否对<img>元素给定行高(line-height)和基线(baseline)

如何区分

浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。

严格 DTD ——严格模式 。如果文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。

有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式。含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。

DTD不存在或者格式不正确——混杂模式。不存在或形式不正确会导致文档以混杂模式呈现。

HTML5 没有严格和混杂之分。HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。

DOCTYPE的代码示例

HTML5的DOCTYPE声明:

<!DOCTYPE html>

HTML 4.01 Strict的DOCTYPE声明:

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

XHTML 1.0 Transitional的DOCTYPE声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zayyo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值