index.html中!DOCTYPE有什么作用？

作者：袖梨 2026-07-27

<!DOCTYPE html>决定浏览器启用标准模式而非怪异模式，缺失或错误将导致盒模型、行高、表格对齐等异常；它不引用DTD，仅明确触发标准渲染，必须位于第一行且无BOM。

它决定浏览器用标准模式还是怪异模式解析整个页面，不写或写错，CSS盒模型、行高、表格对齐等都会出人意料地崩掉。

为什么没写 !DOCTYPE 会导致布局错乱

浏览器看到缺失或错误的 !DOCTYPE，会自动退回到“怪异模式”（Quirks Mode），模拟 IE5 那套老逻辑：比如 width 默认包含 padding 和 border，line-height 计算方式不同，img 在行内默认有底部空白。这些都不是你代码写错了，是解析器主动“降级”了。

常见现象包括：

同一段 CSS 在 Chrome 正常，在 Safari 或旧 Edge 上元素挤在一起或撑开
Flex 布局失效，align-items 不起作用
表格中图片底部多出几像素空白，怎么设 vertical-align 都没用

HTML5 的 `!DOCTYPE html` 为什么够用

它不引用任何 DTD，也不校验文档合法性，只干一件事：明确告诉所有现代浏览器——“请用标准模式渲染”。这个声明自 HTML5 起被标准化，大小写不敏感，前面不能有任何字符（包括空格、BOM、注释）。

立即学习“前端免费学习笔记（深入）”；

必须注意的细节：

!DOCTYPE html 必须是文件第一行、第一个字符，前面零空格、零 BOM
写成 <!doctype html> 或 <!DOCTYPE HTML> 都可以，但别加引号、斜杠或多余空格
不要写成 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 这类 HTML4 遗留写法，现代项目里它没额外好处，反而容易手误漏字符

检查当前页面是否真的启用了标准模式

打开浏览器开发者工具（F12），在控制台执行：

document.compatMode

返回 "CSS1Compat" 表示标准模式；如果是 "BackCompat"，说明 !DOCTYPE 没生效。

常见失效原因：

编辑器保存时自动加了 UTF-8 BOM（尤其 Windows 下某些编辑器）
服务端模板引擎在 !DOCTYPE 前注入了空行或注释
用了构建工具（如 Webpack + HtmlWebpackPlugin），但配置里漏写了 templateParameters 或误删了 !DOCTYPE

最稳妥的做法：新建一个纯文本文件，第一行只写 !DOCTYPE html，保存为 UTF-8 无 BOM 格式，再往里加 <html><head></head><body></body></html> —— 这个最小闭环能排除 90% 的模式误判问题。