<!DOCTYPE html>必须位于文件首行首字符，否则触发怪异模式：无此声明或前置空格/注释/BOM会导致浏览器降级为BackCompat模式，盒模型错乱、API行为异常；它非标签而是标准模式开关，唯一被全浏览器一致识别的写法。

HTML模板里必须写 <!DOCTYPE html>，否则浏览器可能用老式规则渲染页面，导致样式错乱、脚本行为异常。

为什么浏览器需要 <!DOCTYPE html> 这行

这行不是 HTML 标签，而是给浏览器的“模式开关”。它不参与页面结构，只决定解析器用哪套规则处理后续所有 HTML 代码。

• 有正确 <!DOCTYPE html> → 触发 CSS1Compat 模式（标准模式），盒模型、Flex 布局、getBoundingClientRect() 等都按现代规范工作
• 缺失或写成 <!doctype>、<!DOCTYPE HTML PUBLIC ...>（旧版但拼错）、甚至空格/注释在它前面 → 大概率退化为 BackCompat 模式（怪异模式），IE6 那套盒模型复活，width 包含 padding 和 border
• 用 document.compatMode 可现场验证：控制台输入这行，返回 "CSS1Compat" 才算成功

<!DOCTYPE html> 必须放在第一行且不能有前置内容

哪怕一个空格、一行注释、BOM 字符，都会让某些浏览器（尤其是旧版 IE 和部分移动端 WebView）忽略该声明，直接进怪异模式。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• ✅ 正确：<!DOCTYPE html> 是文件第一个字符
• ❌ 错误：​<!DOCTYPE html>（开头有零宽空格）、<!-- 注释 --><!DOCTYPE html>、\n<!DOCTYPE html>（首行换行）
• 编辑器保存时选 UTF-8 无 BOM 编码，VS Code 默认是带 BOM 的，需手动改；Sublime Text 新建文件默认无 BOM

HTML4/XHTML 的 DOCTYPE 为什么现在不用了

它们本质是 SGML DTD 引用，语法长、易出错、区分 Strict/Transitional/FrameSet，且对现代浏览器已无实际约束力。

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

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">：HTML4 过渡型，允许 <font>、<center> 等废弃标签，但浏览器仍按标准模式渲染 —— 前提是你没拼错 URL 或漏引号
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">：XHTML 严格型，要求小写标签、闭合所有元素，但现代浏览器早已不校验这些
• HTML5 的 <!DOCTYPE html> 是唯一被所有浏览器一致识别并强制触发标准模式的写法，其他全是历史包袱

最容易被忽略的是：模板生成工具（如 Webpack 插件、Vue CLI 模板、Next.js pages/_document.tsx）有时会悄悄注入注释或空行到 DOCTYPE 前面。上线前务必打开浏览器“查看网页源代码”，确认 <!DOCTYPE html> 真的是第一行、第一个字符。