必须位于第一行,因前置任何字符(含空格、bom、注释)均触发怪异模式,使document.compatmode变为"backcompat",导致盒模型等行为异常;html5仅推荐小写,旧式dtd声明已废弃且危险。

HTML文档类型声明()必须写在第一行,且不能有任何字符前置,否则浏览器会触发怪异模式或解析失败。
为什么必须放在最开头
浏览器解析 HTML 时,一旦发现开头不是有效的 声明,就会退回到 Quirks Mode(怪异模式),导致 CSS 盒模型、字体渲染、JS 行为全部不一致。这不是警告,是硬性切换——连 <code>document.compatMode 都会变成 "BackCompat"。
- 空格、BOM 字符(如
U+FEFF)、注释、XML 声明(<?xml version="1.0"?>)出现在之前,都会让它失效 - 某些编辑器(尤其是 Windows 下带 BOM 的 UTF-8 文件)会偷偷塞一个不可见字节,用
hexdump -C或 VS Code 的“编码”状态栏可查 (小写)完全合法,HTML5 不区分大小写,但统一用小写更稳妥
和旧式 DTD 声明的区别
HTML5 彻底抛弃了冗长的 SGML DTD 引用。以前那种带 PUBLIC/SYSTEM 的写法(比如 XHTML 1.0 Strict)不仅没用,还会误导验证器、拖慢解析,并可能触发 XML 模式下的严格错误。
CWMS 2.0功能介绍:一、 员工考勤系统,国内首创CWMS2.0的企业员工在线考勤系统。二、 自定义URL Rewrite重写,友好的搜索引擎 URL优化。三、 代码与模板分离技术,支持超过5种类型的模板类型。包括:文章、图文、产品、单页、留言板。四、 购物车功能,CWMS2.0集成国内主流支付接口。如:淘宝、易趣、快钱等。完全可媲美专业网上商城系统。五、 多语言自动切换 中英文的说明。六、
- ✅ 正确且唯一推荐:
- ❌ 过时且危险:
- ❌ 无效且易错:
(缺 SYSTEM URI,部分浏览器直接忽略)
服务端模板或构建工具里容易漏掉的点
动态生成 HTML(如 EJS、Jinja2、Webpack HtmlWebpackPlugin)时, 很容易被包进条件判断、变量插值或 layout 拼接逻辑里,导致实际输出缺失或错位。
立即学习“前端免费学习笔记(深入)”;
- 检查最终响应体:用浏览器 DevTools 的 Network → Response 查看原始内容,确认第一行就是
- EJS 中避免写成
——万一 env 不是 prod,就没了 - Webpack 的
html-webpack-plugin默认已注入,但若配置了template,就得手动确保模板文件首行是它
最容易被忽略的是:本地开发时一切正常,上线后因构建压缩、CDN 缓存、代理重写等原因,悄悄在文档开头插入了注释或埋点脚本——这种问题不会报错,只会让整个页面布局慢慢“变歪”。










