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 可检测当前渲染模式