您现在的位置是：网站首页 > <!DOCTYPE>-文档类型声明文章详情
<!DOCTYPE>-文档类型声明
陈川
【
HTML
】
2381人已围观
4390字
<!DOCTYPE>声明位于HTML文档的最顶部，用于告知浏览器当前文档使用的HTML版本。它不属于HTML标签，而是一条指令，帮助浏览器正确渲染页面。不同版本的HTML对应不同的<!DOCTYPE>声明格式，现代网页开发通常使用HTML5的简洁声明方式。
<!DOCTYPE>的基本语法
HTML5的文档类型声明最为简单：
<!DOCTYPE html>
这条声明不区分大小写，但习惯上使用大写字母。它必须出现在文档的第一行，在<html>标签之前，否则可能触发浏览器的怪异模式（Quirks Mode）。
早期的HTML版本声明更为复杂。例如，HTML 4.01 Strict的声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/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">
为什么需要<!DOCTYPE>
浏览器需要知道文档类型来决定如何解析和渲染页面。没有<!DOCTYPE>或格式错误的声明可能导致浏览器进入怪异模式，在这种模式下：
- 盒模型的计算方式不同
- 表格单元格的垂直对齐行为异常
- 字体大小和行高的计算不一致
示例对比：
<!-- 标准模式（Standard Mode） -->
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; padding: 10px; border: 5px solid; }
</style>
</head>
<body>
<div>标准模式盒模型</div>
</body>
</html>
<!-- 怪异模式（Quirks Mode） -->
<html>
<head>
<style>
div { width: 100px; padding: 10px; border: 5px solid; }
</style>
</head>
<body>
<div>怪异模式盒模型</div>
</body>
</html>
在标准模式下，div的总宽度为130px（100 + 102 + 52）；在怪异模式下，div的宽度可能被压缩为100px（包含padding和border）。
历史版本与演变
HTML的文档类型声明经历了多次演变：
-
HTML 2.0（1995年）：
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> -
HTML 3.2（1997年）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> -
HTML 4.01（1999年）：
- Strict（严格模式）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - Transitional（过渡模式）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - Frameset（框架集模式）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- Strict（严格模式）：
-
XHTML 1.0（2000年）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -
HTML5（2014年）：
<!DOCTYPE html>
现代实践与注意事项
-
始终使用HTML5声明：
<!DOCTYPE html>即使文档中包含XHTML语法（如自闭合标签），这种声明也能正常工作。
-
避免XML声明： 以下写法在HTML5中不推荐：
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html>这会触发IE6的怪异模式。
-
字符编码声明： 正确的做法是将字符编码声明放在
<head>中：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> </html> -
框架文档的特殊情况： 如果页面使用
<iframe>，内嵌文档也需要完整的<!DOCTYPE>：<iframe srcdoc="<!DOCTYPE html><html><body>内容</body></html>"></iframe>
浏览器模式检测
开发者可以通过JavaScript检测当前文档模式：
// 返回"CSS1Compat"表示标准模式
// 返回"BackCompat"表示怪异模式
console.log(document.compatMode);
// 更详细的检测方式
const mode = (function() {
if (document.compatMode === 'CSS1Compat') {
return '标准模式';
} else {
// 区分怪异模式和有限怪异模式(Almost Standards Mode)
const div = document.createElement('div');
div.style.width = '1px';
document.body.appendChild(div);
const result = div.offsetWidth === 1;
document.body.removeChild(div);
return result ? '有限怪异模式' : '完全怪异模式';
}
})();
console.log(mode);
工具与验证
W3C的验证服务会根据<!DOCTYPE>声明来检查文档是否符合相应标准：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 这个声明有拼写错误（Transitional应为Transitional）会导致验证失败 -->
现代构建工具如Webpack、Vite等会自动为生成的HTML文件添加正确的<!DOCTYPE>。但在手动创建HTML文件时仍需注意：
// 在Node.js中生成HTML文件示例
const fs = require('fs');
const content = `<!DOCTYPE html>
<html>
<head>
<title>生成的文件</title>
</head>
<body></body>
</html>`;
fs.writeFileSync('index.html', content);
特殊场景处理
-
电子邮件HTML： 某些电子邮件客户端需要明确的文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -
移动端页面： 结合
viewport声明使用：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> </html> -
SVG内联： 在HTML5中直接内联SVG不需要特殊声明：
<!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /> </svg> </body> </html>
上一篇： require机制与模块加载过程
下一篇： <html>-HTML文档根元素
