Doctype做用？严格模式与混杂模式如何区分？它们有何差别？

时间 2021-01-17

标签 css html 浏览器框架字体网站 spa htm 继承栏目 CSS 繁體版

原文原文链接

1、Doctype做用是什么？

<!DOCTYPE>声明叫作文件类型定义（DTD），声明的做用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪一个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并非一个 HTML 标签。

2、严格模式与混杂模式如何区分？它们有何意义？

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

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

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

一、若是文档包含严格的 DOCTYPE ，那么它通常以严格模式呈现。（严格 DTD ——严格模式）
二、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会致使页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
三、DOCTYPE 不存在或形式不正确会致使文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
四、HTML5 没有 DTD ，所以也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽量大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

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

3、严格模式与混杂模式的语句解析不一样点有哪些？css

1）盒模型的高宽包含内边距padding和边框borderhtml

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

2）能够设置行内元素的高宽框架

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。字体

3）可设置百分比的高度网站

在standards模式下，一个元素的高度是由其包含的内容来决定的，若是父元素没有设置高度，子元素设置一个百分比的高度是无效的。ui

4）用margin:0 auto设置水平居中在IE下会失效spa

使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:htm

body{text-align:center};#content{text-align:left}继承

5）quirk模式下设置图片的padding会失效

6）quirk模式下Table中的字体属性不能继承上层的设置

7）quirk模式下white-space:pre会失效

补充内容：

1、经常使用的具体声明：

一、HTML5（一种）：<!DOCTYPE html>

二、HTML 4.01（三种）：严格模式包含全部 HTML 元素和属性，但不包括展现性的和弃用的元素（好比 font），不容许框架集（Framesets）；过渡模式包含全部 HTML 元素和属性，包括展现性的和弃用的元素（好比 font），不容许框架集（Framesets）；框架模式等同于过渡模式，但容许框架集内容。

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

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

三、XHTML 1.0（四种）：前三种模式同上，XHML 必须以格式正确的 XML 来编写标记。

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

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

XHTML 1.0 Frameset： <!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，但容许添加模型。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

2、严格模式与混杂模式的来源当年Netscape4（网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并无遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能彻底正确的支持标准。尽管IE 5 修复了IE4 许多的问题，可是依然延续CSS实现中的其它故障（主要是盒模型问题）。为了保障本身的网站在各个浏览器上显示正确，网页开发者们不得不依据各个浏览器自身的规范来使用css，所以大部分网站的css实现并不符合W3C规范的标准。然而随着标准一致性愈来愈重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。可是改变现有的 css，彻底去遵循标准，会使许多旧网站或多或少受到破坏，若是浏览器忽然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。因此，全部的浏览器都须要提供两种模式：混杂模式服务于旧式规则，而严格模式服务于标准规则。