<!DOCTYPE html>必须位于第一行，因前置任何字符（含空格、BOM、注释）均触发怪异模式，使document.compatMode变为"BackCompat"，导致盒模型等行为异常；HTML5仅推荐小写<!DOCTYPE html>，旧式DTD声明已废弃且危险。
HTML文档类型声明（<!DOCTYPE html>）必须写在第一行，且不能有任何字符前置，否则浏览器会触发怪异模式或解析失败。
为什么<!DOCTYPE html>必须放在最开头
浏览器解析 HTML 时，一旦发现开头不是有效的 <!DOCTYPE> 声明，就会退回到 Quirks Mode（怪异模式），导致 CSS 盒模型、字体渲染、JS 行为全部不一致。这不是警告，是硬性切换——连 document.compatMode 都会变成 "BackCompat"。
- 空格、BOM 字符（如
U+FEFF）、注释、XML 声明（<?xml version="1.0"?>）出现在<!DOCTYPE html>之前，都会让它失效 - 某些编辑器（尤其是 Windows 下带 BOM 的 UTF-8 文件）会偷偷塞一个不可见字节，用
hexdump -C或 VS Code 的“编码”状态栏可查 -
<!doctype html>（小写）完全合法，HTML5 不区分大小写，但统一用小写更稳妥
<!DOCTYPE html> 和旧式 DTD 声明的区别
HTML5 彻底抛弃了冗长的 SGML DTD 引用。以前那种带 PUBLIC/SYSTEM 的写法（比如 XHTML 1.0 Strict）不仅没用，还会误导验证器、拖慢解析，并可能触发 XML 模式下的严格错误。
- ✅ 正确且唯一推荐：
<!DOCTYPE html> - ❌ 过时且危险：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - ❌ 无效且易错：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">（缺 SYSTEM URI，部分浏览器直接忽略）
服务端模板或构建工具里容易漏掉的点
动态生成 HTML（如 EJS、Jinja2、Webpack HtmlWebpackPlugin）时，<!DOCTYPE html> 很容易被包进条件判断、变量插值或 layout 拼接逻辑里，导致实际输出缺失或错位。
立即学习“前端免费学习笔记（深入）”；
- 检查最终响应体：用浏览器 DevTools 的 Network → Response 查看原始内容，确认第一行就是
<!DOCTYPE html> - EJS 中避免写成
<% if (env === 'prod') { %><!DOCTYPE html><% } %>——万一 env 不是 prod，就没了 - Webpack 的
html-webpack-plugin默认已注入，但若配置了template，就得手动确保模板文件首行是它
最容易被忽略的是：本地开发时一切正常，上线后因构建压缩、CDN 缓存、代理重写等原因，悄悄在文档开头插入了注释或埋点脚本——这种问题不会报错，只会让整个页面布局慢慢“变歪”。
