HTML5文档必须以<!DOCTYPE html>开头且前面不能有任何字符，需用UTF-8无BOM编码保存；<meta charset="UTF-8">应尽早置于<head>中；添加lang属性、清理调试代码、确保资源路径与CSP兼容，并配置服务端Content-Type为text/html; charset=utf-8。
检查 <!DOCTYPE html> 是否位于文件最开头
HTML5 文档必须以 <!DOCTYPE html> 开头，且前面**不能有任何字符**（包括空格、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）未注入额外前缀
验证 <meta charset> 和语言声明是否正确
<meta charset="UTF-8"> 必须在 <head> 中尽早出现（建议第二行），且值必须为 UTF-8（大小写不敏感，但推荐小写）。遗漏或写成 utf8（无短横）、UTF8 或 ISO-8859-1 会导致中文乱码、表单提交异常，甚至 CSP 报告拦截。
- 禁止写成：
<meta charset="utf8">（W3C 不认可，部分浏览器 fallback 失败） - 建议紧随
<title>后添加：<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端默认缩放失效 - 添加
<html lang="zh-CN">（根据实际语言调整），影响屏幕阅读器和 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），避免../嵌套过深 - 禁用内联事件（
<button onclick="handle()>）和内联<script>，改用外部文件 +addEventListener - 若用 CSP，确保
script-src包含所有 JS 来源（如'self' https://cdn.example.com'），并用report-uri收集违规日志
Content-Type 响应头是否为 text/html; charset=utf-8。即使 HTML 里写了 <meta charset>，服务端 header 优先级更高 —— Nginx 默认可能不带 charset，Apache 需显式配置 AddDefaultCharset utf-8。 
