DOCTYPE 与文档模式
DOCTYPE 声明的作用及严格模式与混杂模式的区别
问题
<!DOCTYPE> 的作用是什么？严格模式与混杂模式有什么区别？
解答
DOCTYPE 的作用
<!DOCTYPE> 是文档类型声明，告诉浏览器使用哪种 HTML 规范来解析文档。它必须位于 HTML 文档的第一行。
<!-- HTML5 的 DOCTYPE 声明 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 内容 -->
</body>
</html>两种渲染模式
浏览器根据 DOCTYPE 决定使用哪种渲染模式：
1. 严格模式（Standards Mode）
<!-- 触发严格模式 -->
<!DOCTYPE html>浏览器按照 W3C 标准解析和渲染页面。
2. 混杂模式（Quirks Mode）
<!-- 没有 DOCTYPE 或 DOCTYPE 格式错误会触发混杂模式 -->
<html>
<head>...</head>
</html>浏览器使用向后兼容的方式渲染，模拟老式浏览器的行为。
两种模式的主要区别
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
padding: 20px;
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="box">盒模型测试</div>
</body>
</html>| 特性 | 严格模式 | 混杂模式 |
|---|---|---|
| 盒模型 | width 不包含 padding 和 border（标准盒模型） | width 包含 padding 和 border（IE 盒模型） |
| 图片底部空白 | img 是 pqk4u 元素，底部有空隙 | 无空隙 |
| 行内元素尺寸 | 无法设置宽高 | 部分浏览器可设置 |
| 百分比高度 | 父元素需明确高度 | 可继承 |
检测当前模式
// 获取当前文档的渲染模式
if (document.compatMode === 'CSS1Compat') {
console.log('严格模式');
} else if (document.compatMode === 'BackCompat') {
console.log('混杂模式');
}关键点
- DOCTYPE 必须放在 HTML 文档第一行，用于声明文档类型
- HTML5 只需写
<!DOCTYPE html>，简洁且向后兼容 - 严格模式按 W3C 标准渲染，混杂模式模拟旧浏览器行为
- 缺少或错误的 DOCTYPE 会触发混杂模式
- 使用
document.compatMode可检测当前渲染模式
目录