前端考试2

HTML5为什么只需要写<!DOCTYPEHTML>?
html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型
1.什么是文档声明？

声明必须是 HTML 文档的第一行，位于 标签之前。所有文档的开头都会有文档声明标签来声明它采用哪种标准来解析当前网页。 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

2.DTD 是什么？
DTD：文档类型定义(DocumentType Definition)是一套关于标记符的语法规则。DTD在 <!DOCTYPE> 声明中引用。
****
以上是html4 的文档声明。在声明标签中引用了 DTD 文件。
3.浏览器渲染的两种模式：
要想写出跨浏览器的CSS，必须知道浏览器解析CSS的两种模式：
标准模式(strict mode) //CSS1Compat
怪异模式(quirks mode) // BackCompat 也叫兼容模式
文档声明和渲染模式的关系（标准模式和怪异模式）：

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明，将使网页进入怪异模式(quirks mode)。
 没有文档声明的话大多数浏览器都将会转换到为怪异模式(quirk mode)，有些地方会称为混杂模式或兼容模式，这种模式下浏览器会以老版本的浏览器使用的规则来渲染页面，不同浏览器的混杂模式表现不一样
 **也就是说，如果在文档开头有文档声明，浏览器就会遵循声明中 DTD 文档标准（html4 以及之前的版本需要在文档声明中引用D TD。html5 的文档声明不需要引用DTD，因为html5 不遵循DTD 标准），进入标准模式 CSS1Compat；**

document.compatMode
否则，文档缺少声明或者缺少 DTD 标准，则进入怪异模式（兼容） BackCompat
4.没有文档声明，将会进入怪异模式

如果你的网页代码不含有任何声明，那么浏览器就会采用怪异模式解析，便是如果你的网页代码含有DTD声明，浏览器就会按你所声明的标准解析。
5.html 4 的文档声明：

6.html5 的文档声明：不需引用 DTD 文件

7.到底标准模式和怪异模式有什么不同呢？
Quirks mode－怪异模式、混杂模式、兼容模式（document.compatMode=BackCompat），
document.body.clientWidth浏览器使用自己的怪异模式解析渲染页面（目的是向后兼容），浏览器都按照自己的方式解析渲染页面，那在不同的浏览器就会显示不同的样式(无声明 以HTML5为例)。而且，由于不遵循文档标准，所以对不严格的语法会产生兼容。
**Strict/Standards mode－**标准模式、严格模式（document.compatMode=CSS1Compat），
document.documentElement.clientWidth浏览器使用W3C的标准解析渲染页面(有<!DOCTYPEhtml>声明 以HTML5为例) 。
浏览器都支持两种解析模式，在旧的、没有采用W3C标准的网页中，使用怪异模式解析，可以使页面正常显示；在声明采用标准模式的网页中，使用标准模式解析，可以让页面使用W3C的标准特性

8.怎么根据不同情况写文档声明？
如果使用html5 写的文档

如果你接手的是一个遗留网页，最初并没有DTD声明，并且使用了很多在XHTML中已经废除的标签，需要向后兼容，那么，我们建议你使用 XHTML兼容模式（也叫过渡模式），声明如下：

9.如何判定现在是标准模式还是怪异模式：
方法一：window.document.compatMode 用来判断当前浏览器采用的渲染方式。
alert(window.document.compatMode)
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式

10.标准模式（CSS1Compat）、怪异模式（BackCompat）和 document.body 、document.documentElement 什么关系？

11.总结：
两种模式下，提取浏览器的尺寸时，使用的语法不同：
怪异模式（BackCompat）使用 document.body
标准模式（CSS1Compat）使用 document.documentElement