DOCTYPE与怪异模式

我想，<!DOCTYPE>应该是HTML初学者接触的第一个标签吧，让我们回忆一遍其定义：声明HTML版本。

我们知道，HTML经过不断更新，现在正是HTML5如火如荼的时代。在以往的HTML版本（如HTML4.01），由于基于SGML而需要引用DTD，这导致了其声明非常复杂，这是HTML4.01的声明：

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

如此冗长的声明对于新手来说十分不友好，记住它可不是轻而易举的事情。

现在，HTML5不再基于SGML，也就不需要引用DTD，所以它的声明非常简洁：

<!DOCTYPE html>

声明后，浏览器就知道了我们编写的HTML文档的版本。

如果你以为这就是<!DOCTYPE>的全部作用，那就大错特错了。

你可曾听闻“怪异模式”这个词？（
“怪异模式”听起来本身就很怪异吧……）

实际上，<!DOCTYPE>还有一个作用：避免浏览器进入怪异模式。

什么是怪异模式？在很久很久以前，那是一个浏览器刚刚兴起的时代，市面上以两种浏览器为主流：网景的Netscape Navigator浏览器和微软的IE浏览器，两者在解析网页都各有自己的一套标准，导致了同一网页在不同浏览器上显示出不同的效果。后来陆续出现了更多的浏览器，它们都有一套专属标准。像这样，每种浏览器都有不同的解析网页的标准，这就是怪异模式。

后来，为了停止这种混乱的现象，W3C发布了一套规范——标准模式诞生了。

随着网络技术的飞速发展，我们不得不考虑老网站的何去何从。某些老网站在标准模式下无法正常显示，为了更好地兼容它们，怪异模式被保留了下来。

可以说，怪异模式是历史遗留问题。

现在我们知道了浏览器解析HTML、CSS的模式有：标准模式、怪异模式，以及怪异模式到标准模式的过渡——接近标准模式。

标准模式下，浏览器按W3C标准执行代码。
怪异模式下，浏览器按自身标准执行代码。
接近标准模式下，少数怪异行为仍会实现。

既然<!DOCTYPE>可以避免怪异模式，那么具体该如何实施呢？

答案是：正确声明<!DOCTYPE>，且<!DOCTYPE>位于文档首行（<!DOCTYPE>之前不可以有代码）。

正确示范

<!DOCTYPE html>
<html>
<head>
...

错误示范

<!--注释-->
<!DOCTYPE html>
<html>
<head>
...

不声明或声明不位于文档首行都会导致浏览器进入怪异模式。

最后，让我们了解一下怪异模式与标准模式的一些差异吧。

盒模型差异：标准模式与怪异模式的盒模型不同。
行内元素差异：标准模式下，行内元素设置width与height无效；怪异模式下，行内元素设置width与height有效。
水平居中差异：标准模式下，块级元素水平居中设置margin:auto有效，设置text-align:center无效；怪异模式下，块级元素水平居中设置text-align:center有效。

怪异模式与标准模式还有许多细微的差异，此处就不再赘述。

关于<!DOCTYPE>与怪异模式的故事就此结束了，我们下次再见。