HTML4的DOCTYPE需严格匹配三种DTD之一并指向官方URL，否则触发怪异模式；HTML5仅支持<!DOCTYPE html>，不校验DTD，纯为标准模式开关。
HTML4 的 <!DOCTYPE> 有多种写法，且依赖 DTD 类型
HTML4 分为 Strict、Transitional、Frameset 三种 DTD，<!DOCTYPE> 必须完整声明并指向对应 DTD URL，否则浏览器可能触发怪异模式。常见写法如：
<!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" "http://www.w3.org/TR/html4/loose.dtd">
这些声明不仅区分语义严格程度，还直接影响 CSS 渲染行为（比如盒模型、height 解析方式）和 JS 的 document.body.clientHeight 等值。
关键点：
-
PUBLIC后面的字符串是“公共标识符”，不是 URL，不能随意修改 - URL 必须准确匹配 W3C 官方地址，本地或错误路径会导致 DTD 解析失败，退化为怪异模式
- 大小写敏感：必须全大写
PUBLIC和EN，引号必须是英文双引号
HTML5 的 <!DOCTYPE html> 是唯一合法且大小写不敏感的声明
HTML5 彻底简化了文档类型声明，只接受一种形式：<!DOCTYPE html>（推荐小写），其他任何变体（如加空格、换行、大写 HTML、带系统标识符）虽多数浏览器能容错，但不符合规范。
立即学习“前端免费学习笔记（深入）”；
它不引用 DTD，也不做 DTD 校验，纯粹是触发标准模式的开关。例如：
<!DOCTYPE html>
以下写法虽常被容忍，但应避免：
-
<!doctype HTML>（大小写混用，非规范） -
<!DOCTYPE html SYSTEM "about:legacy-compat">（旧草案残留，已废弃） -
<!DOCTYPE html PUBLIC "">（多余属性，无意义）
如何快速判断一个页面用的是 HTML4 还是 HTML5 文档头
直接看 <!DOCTYPE> 开头是否包含 html 二字且无 PUBLIC 或 URL —— 是则大概率是 HTML5；若出现 HTML 4.01、HTML 3.2、Strict/Transitional 字样，或带有 "http://www.w3.org/..." 的 URL，则属于 HTML4（或更早）。
注意几个易误判点：
- 存在
<meta charset="UTF-8">不代表就是 HTML5 —— HTML4 也能用（只是非标准） - 用了
<section>或<header>标签也不绝对，因为 HTML4 页面可通过 CSS 命名模拟语义，且部分浏览器对未知标签有容错渲染 -
document.doctype.systemId在 HTML5 下为null，HTML4 下通常为 DTD URL（可编程检测）
混用或写错文档声明的实际影响
最直接后果是触发怪异模式（Quirks Mode），导致盒模型、表格布局、字体继承等行为回退到 IE5.5 时代逻辑。Chrome/Firefox 会通过 document.compatMode 暴露状态："CSS1Compat" 表示标准模式，"BackCompat" 即怪异模式。
典型症状包括：
-
div { width: 100px; padding: 10px; }在怪异模式下总宽仍是 100px（IE5 盒模型） -
table的border-collapse失效 -
font-size在嵌套中异常放大或缩小
哪怕只多一个空格、少一个引号，或把 html 写成 HTML，都可能导致旧版 IE 或某些嵌入式 WebView 解析失败。所以，HTML5 就老老实实写 <!DOCTYPE html>，别加料。
