原文地址:http://i.wanz.im/2010/05/28/why_doctype_html/
不管是刚接触前端，还是你已经“精通”web前端开发的内容，你应该知道在你写html的时候需要定义文档类型；你知道如果没有它，浏览器在渲染页面的时候会使用怪异模式；你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
好在现在的各种web开发工具都足够强大，支持插入模板代码，因此你并不需要把这又长又臭的doctype一个个字母的敲出来。但是如果你受够了它，你也许可以尝试下面这个写法：
哇哦，很简洁哦！好处显而易见：一、你可以轻松的写下这个doctype，而不用担心会写错；二、它是向后兼容的，是的，html5的doctype就是这样写的，并且现代浏览器都认识它。
如果你跟我一样一直以为：没有指定dtd将会开启浏览器的怪异模式，这种说法是错的！正确的说法应该是没有定义doctype才会开启怪异模式，也就是说你只需要定义<!doctype
html>就可以让浏览器在严格模式（标准模式）下渲染页面，而不需要指定某个类型dtd。让我们来回顾一下，所有的浏览器都需要两种模式：怪异模式和严格模式（也有人叫标准模式）。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式，但是IE 6以下版本永远定在了怪异模式。关于两种模式，你需要知道以下几点：
-
在标准化之前写的页面是没有doctype的，因此没有doctype的页面是在怪异模式下渲染的。
-
反过来说，如果web开发人员加入的doctype，说明他知道他所要做的事情，大部分的doctype会开启严格模式（标准模式），页面也会按照标准来渲染。
-
任何新的或者未知的doctype都会开启严格模式（标准模式）。
-
每个浏览器都有自己的方式来激活怪异模式。你可以看看这个清单：http://hsivonen.iki.fi/doctype/
注意：你可以根本不需要根据你选择的doctype来验证你的页面，只要doctype标签存在就足以开启严格模式（标准模式）了。如果你对我说的这些还是感到怀疑，那么请前往http://www.quirksmode.org/css/quirksmode.html#link2了解你想知道的内容。我们只需要一小段JavaScript代码就可以得到答案，它就是：
|
|
mode=document.compatMode;
|
这个代码可以用来判断，当前浏览器是处于怪异模式还是标准模式，该属性的兼容性毋庸置疑，如果你表示怀疑，可以查看http://www.quirksmode.org/dom/w3c_html.html#t11。你可以在你想测试的浏览器里访问：http://wanz.im/demo/doctype-test.html，便可看到结果了，据我所知，这样并没有激活怪异模式，即使是ie6下，如果你有什么新发现，欢迎给我留言。
分享到：
相关推荐
DOCTYPE>并不是HTML标签，它声明web浏览器关于页面使用哪个 HTML 版本进行编写的指令。 在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现...
在网页开发中，`<!DOCTYPE>` 是一个非常重要的声明，它的主要作用是告诉浏览器文档遵循的HTML或XHTML规范...理解并正确使用DOCTYPE声明是编写符合现代Web标准的HTML文档的基础，对于创建高质量、可维护的网页至关重要。
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`，而XHTML 1.0的声明可能为`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
博客文章： 关于HTML中的 <!DOCTYPE> 声明 文章配套示例HTML源代码 内容说明：DOCTYPE是Document Type（文档类型）的简写，要想制作符合标准的HTML页面，一个必不可少的关键组成部分就是DOCTYPE声明。
.println("<table align='center'><tr><th>图片</th><th>产品名称</th><th>产品价格</th><th colspan=2>操作</th></tr>"); try { DBaccess db = new DBaccess(); ArrayList<Goods> goods = db.Search...
值得注意的是，HTML5不再需要引用DTD，其DOCTYPE声明简化为： ```html <!DOCTYPE html> ``` 这是因为HTML5旨在兼容所有浏览器，并且不再区分严格和过渡模式。 使用正确的DOCTYPE声明有助于确保文档遵循特定的标准，...
DOCTYPE html> <!-- 双标签：有头有尾，并且尾巴内会有一个关闭符：/ --> <!-- 该文档的根元素（根节点） --> <html lang="en"> <!-- 头部标签 --> <head> <!-- 单标签（也称空标签）：有头没有尾，结尾会有一个...
这个声明位于HTML文档的开头，通常在`<html>`标签之前。它的作用在于确保浏览器以正确的方式解析和渲染网页内容。 在没有DOCTYPE HTML的情况下，浏览器会进入所谓的“怪异模式”或“ quirks mode”。在怪异模式下，...
DOCTYPE声明位于HTML文档的顶部，通常在`<html>`标签之前。 在不同的浏览器中，如果没有声明DOCTYPE，页面可能会在不同的渲染模式下显示，导致布局和样式差异。例如，Firefox（FF）和Internet Explorer（IE）在默认...
如果需要定义表头（通常用来标识各列），可以使用`<th>`标签： ```html <table> <tr> <th>表头一</th> <th>表头二</th> </tr> <tr> <td>单元格内容</td> <td>单元格内容</td> </tr> </table> ``` **示例**...
DOCTYPE html><html><head> <title>我的网页</title></head><body> <h1>欢迎来到我的网页</h1> <p>这是一个简单的HTML网页示例。</p> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul></body></html>...
在`Strict`模式下，元素必须正确关闭（例如，`<br>`应写为`<br />`），不允许使用内联样式和某些不推荐的元素。而在`Transitional`模式下，这些限制相对宽松，适合逐步迁移旧代码到更严格的规范。 表中列举的HTML...
DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个HTML页面</title> <!-- 这里可以链接外部...
">这段文字</span>需要显示为红色并且字号为3。</p> </body> </html> ``` #### 练习二：编写如下图所示效果对应的HTML代码 此题要求我们根据给出的效果图编写相应的HTML代码。由于题目没有提供具体的样式要求，...
标签：如<html>、<head>、<body>、<h1>到<h6>（标题）、<p>（段落）、<a>（链接）、<img>（图像）等。 示例代码： <!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎来到我的网页</...
doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="Clock.js"></script> </head> <body> <canvas width='500' height='500' id='clock'></canvas> </body> ...
</p> <script> document.getElementById("p1").innerHTML = "Newtext!"; </script> </body> </html> ``` 在这个例子中，JavaScript通过`getElementById()`方法找到了id为"p1"的`<p>`元素，并将其`innerHTML`属性...
DOCTYPE html> <html> <head> <title>我的博客</title> <style> /* 在这里添加你的CSS样式 */ </style> </head> <body> <header> <h1>欢迎来到我的博客</h1> </header> <nav> <ul> <li><a...
DOCTYPE html> <html> <style type="text/css"> td{ text-align:center; } a{ text-decoration: none; } img{ width: 25px;height:25px; border-radius: 50%; align="left"; } </style> <head> ...
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Grayscale Canvas Example</title> <script src="modernizr-2010.07.16dev.js"></script> </head> <body> <img src="logo.jpg" id="avatar...