DOCTYPE 是什么？
DOCTYPE（Document Type Declaration，文档类型声明）是HTML文档的第一行代码，用于告诉浏览器使用哪个HTML版本来解析和渲染页面。
<!DOCTYPE html> <!-- HTML5 文档类型声明 -->
<html>
<head>...</head>
<body>...</body>
</html>
主要作用
1. 触发标准模式（Standards Mode）
这是DOCTYPE最核心的作用：
- 标准模式：浏览器按照W3C标准解析和渲染页面
- 怪异模式/混杂模式（Quirks Mode）：浏览器模拟旧版本浏览器的行为，向后兼容
- 几乎标准模式（Almost Standards Mode）：介于两者之间，某些方面使用标准模式
<!-- 有DOCTYPE → 标准模式 -->
<!DOCTYPE html>
<html>...</html>
<!-- 没有DOCTYPE → 怪异模式 -->
<html>...</html> <!-- 缺少DOCTYPE声明 -->
2. 避免浏览器怪异模式
没有DOCTYPE或DOCTYPE错误会导致：
<!-- 错误的DOCTYPE会导致怪异模式 -->
<!DOCTYPE> <!-- 缺少文档类型 -->
<!DOCTYPE HTML> <!-- 不完全正确的声明 -->
3. 指定HTML版本
告诉浏览器文档使用的HTML规范版本：
<!DOCTYPE html> <!-- HTML5 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <!-- HTML 4.01 Strict -->
不同版本的DOCTYPE声明
HTML5（推荐使用）
<!DOCTYPE html>
- 非常简单，易于记忆
- 不区分大小写（但推荐大写）
- 同时适用于HTML和XHTML5
HTML 4.01
<!-- 严格模式（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">
XHTML 1.0
<!-- 严格模式 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 过渡模式 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- 框架集模式 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
历史版本
<!-- HTML 3.2 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!-- HTML 2.0 -->
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
DOCTYPE 对页面渲染的影响
盒模型差异
/* 在标准模式下 */
.box {
width: 100px;
padding: 20px;
border: 5px solid;
/* 总宽度 = 100px + 20px×2 + 5px×2 = 150px */
}
/* 在怪异模式下（IE5.5盒模型） */
.box {
width: 100px; /* 包含padding和border */
padding: 20px; /* 内边距 */
border: 5px solid; /* 边框 */
/* 总宽度 = 100px（包含padding和border） */
}
行内元素的高度计算
<!-- 标准模式：行内元素设置高度无效 -->
<style>
span { height: 50px; } /* 在标准模式下无效 */
</style>
<!-- 怪异模式：可能支持行内元素设置高度 -->
表格字体继承
<!-- 标准模式：表格不继承body字体 -->
<style>
body { font-family: Arial; }
table { /* 使用默认字体，不继承Arial */ }
</style>
<!-- 几乎标准模式：表格继承body字体 -->
DOCTYPE 嗅探与浏览器模式
浏览器如何决定渲染模式
// 浏览器检查DOCTYPE的顺序：
// 1. 检查是否有有效的DOCTYPE
// 2. 检查DOCTYPE是否在"白名单"中
// 3. 确定使用哪种模式
常见触发怪异模式的DOCTYPE
<!-- 这些会触发怪异模式 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<!-- 缺少系统标识符 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 缺少URL -->
<!-- XML声明在HTML中也可能触发怪异模式 -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html> <!-- 在某些浏览器中可能有问题 -->
最佳实践
1. 始终使用HTML5 DOCTYPE
<!DOCTYPE html>
2. DOCTYPE必须是第一行
<!-- 正确 -->
<!DOCTYPE html>
<html>
...
<!-- 错误 -->
<!-- 这里是注释 -->
<!DOCTYPE html> <!-- 前面不能有任何内容，包括空白和注释 -->
<html>
...
3. 不要使用XML声明（针对XHTML）
<!-- 在HTML5中不要这样做 -->
<?xml version="1.0" encoding="UTF-8"?> <!-- 不要加这个 -->
<!DOCTYPE html>
<html>
...
4. 确保字符编码声明正确
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"> <!-- 紧接着声明字符编码 -->
<title>页面标题</title>
</head>
...
检测当前文档模式
JavaScript检测方法
// 检测文档模式
if (document.compatMode) {
console.log(document.compatMode);
// "CSS1Compat" - 标准模式
// "BackCompat" - 怪异模式
}
// 检测IE文档模式（仅IE）
if (document.documentMode) {
console.log('IE文档模式:', document.documentMode);
// 5, 7, 8, 9, 10, 11 等
}
CSS hack检测怪异模式
/* 怪异模式下的特殊样式 */
body {
height: 0; /* 标准模式 */
}
/* 利用怪异模式下的盒模型差异 */
.quirks-test {
width: 100px;
padding: 10px;
background-color: red;
}
/* 在标准模式下，元素宽度为120px */
/* 在怪异模式下，元素宽度为100px（包含padding） */
常见问题与解决方案
问题1：DOCTYPE不匹配导致样式异常
<!-- 解决方案：统一使用HTML5 DOCTYPE -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 内容 -->
</body>
</html>
问题2：旧系统需要特定DOCTYPE
<!-- 如果需要支持非常旧的系统 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- 但尽可能迁移到HTML5 -->
问题3：框架或CMS自动生成错误DOCTYPE
// 在无法修改模板时，使用JavaScript修复
if (document.compatMode === 'BackCompat') {
// 页面处于怪异模式
console.warn('页面处于怪异模式，可能存在样式问题');
// 尝试重新设置DOCTYPE（不推荐，可能无效）
// 更好的方法是修复模板
}
DOCTYPE 与 XHTML
XHTML的严格性
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML页面</title>
</head>
<body>
<!-- 所有标签必须小写 -->
<!-- 所有标签必须闭合 -->
<p>这是一个段落<br /></p> <!-- 自闭合标签需要斜杠 -->
<!-- 属性值必须用引号 -->
<img src="image.jpg" alt="描述" />
</body>
</html>
总结
核心要点
- DOCTYPE声明必须放在HTML文档的第一行
- HTML5的DOCTYPE最简单：
- 主要作用是触发浏览器的标准模式
- 没有DOCTYPE或DOCTYPE错误会导致怪异模式
- 怪异模式下，CSS和JavaScript行为可能不一致
现代开发建议
- 始终使用
- 确保DOCTYPE前没有任何内容（包括注释和空白）
- 配合正确的字符编码声明
- 使用HTML5语义化标签和现代特性
- 通过验证工具检查文档有效性
一句话总结
DOCTYPE是HTML文档的"身份证"，告诉浏览器："请按照这个规范来解析我！"
