likes
comments
collection
share

前端面试之HTML：文档声明

作者站长头像
站长
· 阅读数 31

1. 文档声明

1.1 概念

现在的前端开发基本都是使用 HTML5标准了，很少有人会关心为什么 HTML 文件的开头需要加一个<!DOCTYPE html>

事实上 HTML5只是2014年推出的标准，而之前还有诸如如下的版本

前端面试之HTML：文档声明

不同的 HTML 标准的开头声明是不一样的 像 HTML 4.01 Strict 是这样

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

HTML 4.01 Transitional 是这样

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

他们的声明都很长，仔细看的话，还能看见似乎是引入了一个 .dtd 文件

在早期的 HTML 版本，例如 HTML 4.01 中， 声明之所以要引用 DTD，是因为 HTML 4.01 基于 SGML。而 DTD 规定的是标记语言的规则，这样浏览器才能正确地呈现内容。

但是最新的 HTML5 不基于 SGML，所以不需要引用 DTD。

实际上，有五种语言，SGML、HTML、XML、XHTML、HTML5

从这五者的名字中，我们都可以看到 “ML” 这两个字母

“ML”即 “Markup language(置标语言)”。

“Markup language” 是用标准的标记来解释纯文本文档的内容，从而提供关于文档结构或文档该如何渲染的信息。置标语言的发展可以用下图来表示：

前端面试之HTML：文档声明

GML 是第一代置标语言，使文档能明确将标示和内容分开，所有文件使用同样的标示方法。

SGML 在 GML 的基础上进行整理，的更严谨的语言。

HTML 最大的特点是简单性和跨平台性。HTML 规定的标记是固定的，即 HTML 语法是不可扩展的。

XML是网络传输的标准数据格式。

XHTML 是由 DTD 定义规则，语法要求更加严格的 XHTML。*

最终，HTML5 是 HTML 的第五个修订版，该版本不在基于 SGML 了，所以也就不用再引入 DTD 声明了。

HTML5 的出现，其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。

1.2 渲染模式

浏览器的渲染模式分为三种

  • 怪癖模式（混杂模式）[Quirks mode]
  • 严格模式（标准模式） [Standars mode]
  • 几乎标准模式 [Almost standards mode]

早期如 Netscape 和 IE 浏览器没有遵循 W3C 的标准 W3C 标准推出后，浏览器渲染标准有了标准模式(W3C 的标准)和混杂模式 (各种其他浏览器的标准) 而浏览器一般都保留了两种渲染模式

对于 HTML 来说，文档开头的 <!DOCTYPE html> 就是决定是否是用怪癖模式还是用标准模式

严格模式和怪异模式的部分渲染区别

  1. 盒模型的高宽包含内边距 padding 和边框 border

前端面试之HTML：文档声明

在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在 IE5.5 及以下的浏览器及其他版本的 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。

1.3 真题

  • 什么是<!DOCTYPE>？是否需要在 HTML5 中使用？

它是 HTML 的文档声明，通过它告诉浏览器，使用哪一个 HTML 版本标准解析文档。

在浏览器发展的历史中，HTML 出现过很多个版本，不同版本在元素、属性等书写格式上略有差异，如果不预先告诉浏览器，浏览器就不知道我们的文档标准是什么，在这种情况下，大部分浏览器将开启最大兼容模式来解析网页，我们称之为怪异模式。这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的 bug，所以文档声明是必须的。

而文档声明有多种书写格式，对应不同的 HTML 版本，<!DOCTYPE>这种书写是告诉浏览器，整个文档使用 HTML5 的标准进行解析。

  • 什么是严格模式与混杂模式？

**严格模式：**又称标准模式，是指浏览器按照 W3C 标准解析代码。

**混杂模式：**又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

**如何区分：**浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

  1. 如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
  2. 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
  3. DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD 不存在或者格式不正确——混杂模式）
  4. HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

  • 列举几条怪异模式中的怪癖行为
  1. 宽高的算法与 W3C 盒模型不同
  2. 在表格中的字体样式不会继承
  3. 怪异模式下可以设置行内元素宽高
  4. 怪异模式下 white-space:pre 会失效
转载自:https://juejin.cn/post/7379803343449571368
评论
请登录