HTML4的DOCTYPE需严格匹配三种DTD之一并指向官方URL,否则触发怪异模式;HTML5仅支持,不校验DTD,纯为标准模式开关。

HTML4 的 有多种写法,且依赖 DTD 类型
HTML4 分为 Strict、Transitional、Frameset 三种 DTD, 必须完整声明并指向对应 DTD URL,否则浏览器可能触发怪异模式。常见写法如:
这些声明不仅区分语义严格程度,还直接影响 CSS 渲染行为(比如盒模型、height 解析方式)和 JS 的 document.body.clientHeight 等值。
关键点:
-
PUBLIC后面的字符串是“公共标识符”,不是 URL,不能随意修改 - URL 必须准确匹配 W3C 官方地址,本地或错误路径会导致 DTD 解析失败,退化为怪异模式
- 大小写敏感:必须全大写
PUBLIC和EN,引号必须是英文双引号
HTML5 的 是唯一合法且大小写不敏感的声明
HTML5 彻底简化了文档类型声明,只接受一种形式:(推荐小写),其他任何变体(如加空格、换行、大写 HTML、带系统标识符)虽多数浏览器能容错,但不符合规范。
立即学习“前端免费学习笔记(深入)”;
它不引用 DTD,也不做 DTD 校验,纯粹是触发标准模式的开关。例如:
以下写法虽常被容忍,但应避免:
(大小写混用,非规范)(旧草案残留,已废弃)(多余属性,无意义)
如何快速判断一个页面用的是 HTML4 还是 HTML5 文档头
直接看 开头是否包含 html 二字且无 PUBLIC 或 URL —— 是则大概率是 HTML5;若出现 HTML 4.01、HTML 3.2、Strict/Transitional 字样,或带有 "http://www.w3.org/..." 的 URL,则属于 HTML4(或更早)。
注意几个易误判点:
- 存在
不代表就是 HTML5 —— HTML4 也能用(只是非标准) - 用了
或标签也不绝对,因为 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 就老老实实写 ,别加料。










