HTML5文档必须以开头且前面不能有任何字符,需用UTF-8无BOM编码保存;应尽早置于中;添加lang属性、清理调试代码、确保资源路径与CSP兼容,并配置服务端Content-Type为text/html; charset=utf-8。

检查 是否位于文件最开头
HTML5 文档必须以 开头,且前面**不能有任何字符**(包括空格、BOM、注释或 UTF-8 BOM 字节 EF BB BF)。常见错误是编辑器自动插入 BOM 或保存时带了不可见字符,导致 IE 进入怪异模式,或某些解析器报 Unexpected token 错误。
- 用 VS Code 打开文件 → 右下角查看编码格式,选“Save with Encoding” → “UTF-8”(非 “UTF-8 with BOM”)
- 用命令行快速验证:
head -c 10 index.html | hexdump -C
,输出首行不应含ef bb bf - 若用构建工具(如 Webpack/Vite),确认 HTML 插件(如
html-webpack-plugin)未注入额外前缀
验证 和语言声明是否正确
必须在 中尽早出现(建议第二行),且值必须为 UTF-8(大小写不敏感,但推荐小写)。遗漏或写成 utf8(无短横)、UTF8 或 ISO-8859-1 会导致中文乱码、表单提交异常,甚至 CSP 报告拦截。
- 禁止写成:
(W3C 不认可,部分浏览器 fallback 失败) - 建议紧随
后添加:,否则移动端默认缩放失效 - 添加
(根据实际语言调整),影响屏幕阅读器和 SEO
清理开发期残留:console、debugger、未启用的 polyfill
上线前若保留 console.log、debugger 或已废弃的 babel-polyfill,会暴露逻辑、拖慢首屏、引发兼容性冲突。现代浏览器普遍支持 ES2015+,盲目引入全量 polyfill 反而增加 JS 体积和执行开销。
- 用 ESLint 规则
"no-console": ["error", { "allow": ["warn", "error"] }]禁止生产环境log/info - 构建时启用
drop_debugger(Terser)和drop_console(需谨慎:避免删掉 warn/error) - 检查
package.json中是否误留@babel/polyfill(已废弃),改用按需加载core-js/stable+regenerator-runtime/runtime
检查资源路径与 CSP 兼容性
本地能跑 ≠ 上线能用。相对路径(如 ./js/app.js)、协议相对 URL(//cdn.example.com/lib.js)在跨域或 HTTP/HTTPS 混合场景下易出错;同时若启用了 CSP(Content-Security-Policy),内联脚本、eval、未授权域名的资源都会被静默拦截。
立即学习“前端免费学习笔记(深入)”;
- 所有外部资源用绝对路径或根相对路径(
/js/app.js),避免../嵌套过深 - 禁用内联事件(










