!Doctype

最新推荐文章于 2023-03-31 08:42:51 发布

原创最新推荐文章于 2023-03-31 08:42:51 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

4 篇文章

订阅专栏

!Doctype作用

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

2.声明文档的解析类型(document.compatMode)为了避免浏览器的怪异模式。

严格模式和混杂模式的区别、以及如何触发两种模式

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

2.混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码,以一种向后兼容的方式去显示

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

(1)如果XHTML、HTML 4.01文档包含严格的DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD——严格模式）

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

(3)DOCTYPE 不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）

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

4.意义:决定浏览器如何渲染网站(浏览器使用哪种规范去解析网页);严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

5.触发:浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法

6.Doctype可声明三种DTD类型:分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

严格模式与混杂模式的语句解析不同点有哪些？

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

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

2）可以设置行内元素的高宽

在Standards（标准/严格模式）模式下，给span等行内元素设置wdith和height都不会生效，而在quirks（混杂模式又称怪异模式或兼容模式）模式下，则会生效。

3）可设置百分比的高度

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

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

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

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

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

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

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

补充内容：

常用的具体声明：

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

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

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

严格模式与混杂模式的来源

当年Netscape4（网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4提供了糟糕的支持，而IE4虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5修复了IE4许多的问题，但是依然延续CSS实现中的其它故障（主要是盒模型问题）。

为了保障自己的网站在各个浏览器上显示正确，网页开发者们不得不依据各个浏览器自身的规范来使用css，因此大部分网站的css实现并不符合W3C规范的标准。

然而随着标准一致性越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有的css，完全去遵循标准，会使许多旧网站或多或少受到破坏，如果浏览器突然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。所以，所有的浏览器都需要提供两种模式：混杂模式服务于旧式规则，而严格模式服务于标准规则。

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是CSS 2.1 中新增的。

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML中的 <pre>标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space属性的值。

pre 元素可定义预格式化的文本。被包围在 pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。