网页文档声明处在HTML文件的第一行，它不直接显示给用户，却决定了浏览器以何种解析规则来渲染页面。HTML4与HTML5在这处声明上的设计思路完全不同，前者依赖外部文档类型定义，后者追求极简。理解它们的差异，是前端开发和页面排障的基本功。
HTML4文档声明的结构与类型
HTML4的文档声明必须引用一个DTD（文档类型定义）文件，通过公开标识符来指明当前页面遵循的是HTML4的哪一种规范。常见的有三种子集：严格模式（Strict）、过渡模式（Transitional）和框架集模式（Frameset）。严格模式禁止废弃标签和表现性属性，过渡模式则允许部分旧写法存在，框架集用于带frame的页面。声明写法冗长，例如严格模式需要写清W3C的URL。
这种声明方式带来的问题是记忆成本高，且一旦写错公开标识符，浏览器可能进入怪异模式（Quirks Mode），按照旧版IE的盒模型来解析，导致width和padding计算方式偏离标准。下面的代码展示了HTML4过渡模式的典型声明，注意它包含了http-equiv的meta写法与系统标识符：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML4示例</title> </head> <body> <center>这是HTML4允许的居中标签</center> </body> </html>
在实际维护老系统时，我们常看到开发者复制了错误的DTD路径，或者漏写结尾的URL，使得页面以怪异模式打开。此时就算CSS写得规范，布局仍会错位。HTML4声明本质上把“页面合法性校验”和“渲染模式选择”绑在了一起，浏览器需要拿到DTD才能知道哪些标签可用。
HTML5文档声明的极简设计
HTML5彻底抛弃了DTD引用，仅保留一个不区分大小写的字符串<!DOCTYPE html>。它的作用非常单一：告诉浏览器“请用标准模式渲染这个页面”。不需要网络请求，不需要记忆长串公开标识符，哪怕写成<!doctype Html>也能被正确识别。这一改动大幅降低了入门门槛，也让爬虫和编辑器更容易判断文档类型。
HTML5声明不触发DTD校验，因为HTML5本身定义为一种“ living standard”，依靠浏览器自身的容错算法来解析。这意味着即使你用了某些旧标签，浏览器也不会拒绝渲染，而是尽量修复。下面的示例展示了最简HTML5骨架，你可以看到头部不再需要复杂的meta声明语言编码也可工作，但显式写出更稳妥：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5示例</title> </head> <body> <header>语义化头部</header> <article>正文内容</article> </body> </html>
极简声明还带来一个隐性好处：页面加载时少一次外部DTD请求，在弱网环境更能保证渲染速度。但要注意，HTML5虽然宽松，若你错误地把HTML5声明套用在依赖HTML4严格模式校验的后台模板上，某些旧组件可能因缺少DTD约束而产生属性冲突。区分两者不能只看长短，还要看运行环境要求。
快速区分两种文档头的实用方法
在接手未知项目时，最先扫一眼文件首行即可判断。如果首行出现PUBLIC或SYSTEM关键字，并带有//W3C//DTD这类路径，那一定是HTML4或更早的声明；若只有<!DOCTYPE html>且无任何URL，则是HTML5。用编辑器正则搜索DOCTYPEs+HTMLs+PUBLIC能批量找出老文件。
除了肉眼看，还可以通过脚本在构建阶段做校验。比如用Node写一个简单函数读取文件头，匹配是否包含DTD引用。下面代码演示了如何用JS判断声明类型，它读取字符串并依据是否含PUBLIC来返回结果：
function detectDocType(headStr) {
var line = headStr.trim().split('n')[0];
if (/DOCTYPEs+html/i.test(line) && !/PUBLIC|SYSTEM/i.test(line)) {
return 'HTML5';
} else if (/DOCTYPEs+HTMLs+PUBLIC/i.test(line)) {
return 'HTML4';
}
return 'UNKNOWN';
}
var sample = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">';
console.log(detectDocType(sample));
从兼容性角度，新项目应统一使用HTML5声明，老项目若需继续用HTML4校验工具则保留原声明。迁移时建议先本地起服务对比两种声明下页面的盒模型与表单表现，确认无怪异模式副作用后再改。掌握这套区分逻辑，能让你在代码评审和故障排查时迅速定位是不是声明引发的渲染偏差。