<!DOCTYPE html>是HTML5唯一推荐的文档类型声明，必须全小写、位于首行且无前置字符，省略或错误写法将触发怪异模式，导致盒模型、JS行为等异常。
HTML5 的 <!DOCTYPE html> 是唯一推荐写法
现代浏览器只认这一种，其他如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 不仅冗长，还可能触发怪异模式（quirks mode），导致盒模型、字体渲染、JS 行为不一致。
常见错误现象：document.compatMode 返回 "BackCompat"；getBoundingClientRect() 值偏移；flex 布局失效。
- 必须全小写，
<!doctype html>或<!DOCTYPE HTML>都不行——大小写敏感 - 必须放在文档第一行，前面不能有任何字符（包括空格、BOM、注释）
- 不需要闭合，也不需要引号或等号，就是纯粹的
<!DOCTYPE html>
为什么不能省略 <!DOCTYPE html>
省略后，所有主流浏览器（Chrome/Firefox/Safari/Edge）都会自动降级到怪异模式。这不是“还能用”，而是“表面能跑，实际处处踩坑”：CSS 的 width 包含 padding/border、line-height 计算异常、position: fixed 失效、甚至 new Date('2023-01-01') 在 Safari 中返回 Invalid Date。
- Node.js 服务端模板（如 EJS、Pug）容易漏写，尤其在条件渲染分支里
- 前端构建工具（Vite/Webpack）生成的
index.html通常自带，但手动复制 HTML 片段时极易丢掉 - VS Code 的 Emmet 快捷键
!会自动补全，但很多人手写时直接跳过
旧项目迁移时最容易翻车的点
把老系统从 HTML4 迁到 HTML5，不是只换一行声明就完事。很多遗留 CSS 和 JS 是基于怪异模式写的，比如依赖 document.body.clientWidth 而非 document.documentElement.clientWidth，或者用 offsetWidth 算布局时没考虑 border-box 差异。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 先检查
document.compatMode，确保是"CSS1Compat" - 用 Chrome DevTools 的 Rendering 面板勾选 “Show layout shifts” 和 “Emulate CSS media type”，快速暴露盒模型问题
- 避免全局重置
* { box-sizing: border-box }—— 它在怪异模式下无效，强行加会导致旧样式大面积错位
服务端渲染（SSR）和静态站点要注意 BOM
UTF-8 BOM（EF BB BF）出现在 <!DOCTYPE html> 前，会让浏览器立刻进入怪异模式，且控制台不报错、Network 面板也看不出异常。
- Node.js 的
fs.writeFileSync默认不带 BOM，但某些编辑器（如 Windows 记事本、旧版 VS Code）保存时会偷偷加上 - PHP 输出前如果有
echo "\xEF\xBB\xBF";或文件以 UTF-8+BOM 编码保存，就会触发问题 - 验证方式：用
hexdump -C index.html | head查看前几个字节，确认没有ef bb bf
事情说清了就结束
