先记住这个答案
DOCTYPE 声明本身不是元素，而是指示浏览器采用何种渲染模式（不影响 HTML 解析）。标准写法 <!doctype html> 触发标准模式，使浏览器遵循现代 CSS 规范；缺失或旧式写法可能使浏览器进入怪异模式或几乎标准模式，模拟 IE 旧式盒模型，导致布局兼容性问题。
<!doctype html>触发标准模式- 缺失 DOCTYPE 进入怪异模式
- 怪异模式模拟旧 IE 盒模型
DOCTYPE 决定文档模式机制
浏览器加载 HTML 文档时，会先读取文档开头的 DOCTYPE 字符串，并根据它选择“模式”（rendering mode）。在 HTML5 中，唯一的标准写法是 <!doctype html>，它强制浏览器进入标准模式（standards mode），即按照 W3C/WHATWG 规范解析 CSS 和布局。如果文档缺少 DOCTYPE，或使用了不完整或格式错误的 DOCTYPE，浏览器通常会触发“怪异模式”（quirks mode）。在怪异模式下，浏览器会模拟 IE5 等旧版浏览器的非标准行为，例如对 CSS 的盒模型解释错误：width 和 height 在怪异模式下包含内边距和边框，这与标准模式下的内容盒模型不同。
除了标准模式和怪异模式，还存在“几乎标准模式”（almost standards mode），通常由旧的过渡型 DOCTYPE 触发，特点是表格单元格中的垂直对齐略有差异。但 HTML5 的 <!doctype html> 明确指向标准模式，没有歧义。因此，开发时应在文档第一行使用该声明，以确保页面在所有现代浏览器中表现一致。
工程场景：怪异模式下的布局错位
假设一个页面容器设置了 width: 200px; padding: 20px; border: 5px; 的标准 CSS。在标准模式下，width 指内容区宽度，元素总宽为 250px；在怪异模式下，width 指整个盒子宽度（含 padding 和 border），内容区宽度仅 150px。若页面缺失 DOCTYPE，浏览器会进入怪异模式，同一份 CSS 将因渲染模式不同而产生宽度差异，可能导致文字溢出或布局错乱。
处理此类问题，首先应检查文档第一行是否为 <!doctype html>，若缺失则直接补上。这是最根本的修复。其次，若遇到渲染差异，可使用开发者工具查看文档模式，或者通过 JavaScript 检测 document.compatMode 的值来确认。compatMode 为 'CSS1Compat' 表示标准模式，'BackCompat' 表示怪异模式。通过此检查可以快速判断问题根源，避免盲目调整 CSS。
适用边界与易失效点
DOCTYPE 的影响仅限于渲染模式，并不会影响 HTML 解析的语法容错。例如，即使没有 DOCTYPE，浏览器依然会根据 HTML5 的 parser 来创建 DOM 树（包括自动闭合标签等）。因此，DOM 结构通常是一致的，但 CSS 布局可能不同。另外，DOCTYPE 必须在文档最开头，若前面出现除 BOM 外的任何字符（如空格、注释），浏览器可能无法将其识别为 DOCTYPE，从而触发怪异模式。
此外，DOCTYPE 是大小写不敏感的，<!doctype html> 与 <!DOCTYPE HTML> 等价。但需要注意，某些旧式 DOCTYPE（如 HTML4.01 Transitional）会触发几乎标准模式，而 HTML5 的 <!doctype html> 是最简洁且无歧义的标准写法。由于怪异模式会导致一系列 CSS 怪癖，开发者应始终使用 <!doctype html>。若页面必须兼容非常老的 IE（IE5~IE6），可能无法完全依赖标准模式，但现代开发已无需支持这些浏览器。
容易答错的地方
- 认为 DOCTYPE 是 HTML 标签
- DOCTYPE 不是 HTML 元素，而是文档类型声明，它处于文档开头，没有闭合标签。它不参与 DOM 树的构建，仅仅是一个模式开关。一些初学者误以为它需要放在
<html>内部，但实际上它必须位于所有 HTML 之前。 - 认为 DOCTYPE 缺失造成语法错误
- 浏览器不会报告 DOCTYPE 缺失导致的解析错误，而是自动进入怪异模式。因此很多人忽视了它的重要性，导致页面在部分浏览器中显示异常而难以察觉。实际上，使用可验证的 HTML 校验器可以检测缺失 DOCTYPE，但渲染差异是隐式的。
面试官还会怎么问？
如何用 JavaScript 检测当前文档是否处于怪异模式？
使用 document.compatMode 属性。若返回 "CSS1Compat" 表示标准模式，"BackCompat" 表示怪异模式。此属性在页面加载后即可访问，不需要等待 DOMContentLoaded。
错误 DOCTYPE 如 `<!DOCTYPE HTML PUBLIC ...>` 会触发什么模式？
某些旧式 DOCTYPE（如 HTML4.01 Transitional）会触发“几乎标准模式”，导致表格单元格的垂直对齐采用较老的标准，但大部分 CSS 行为与标准模式相同。为准确，应始终使用 HTML5 的短 DOCTYPE。
DOCTYPE 是否会影响 JavaScript 的解析？
DOCTYPE 不影响 JavaScript 的语法解析或运行。例如，document.write 在普通页面仍正常工作。但怪异模式下的布局差异可能影响 JavaScript 中读取元素的尺寸值，如 offsetWidth 可能因盒模型差异而不同。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。