HTML5本身不报错，所谓“报错”实为JS执行错误、资源加载失败（如404）或HTML语法容错导致的语义异常；排查应聚焦Chrome DevTools的Console和Network面板，结合上下文判断是否影响功能，并注意路径大小写、相对路径基准及服务器环境差异。
HTML5 源代码本身不会“报错”——浏览器只解析渲染，不编译执行，所谓“报错”实际来自三类地方：console 中的 JavaScript 错误、开发者工具里显示的资源加载失败（如 404）、或 HTML 语法被浏览器容错处理但语义异常（比如嵌套错误导致样式/交互失效）。发行前排查必须聚焦真实影响行为的问题，而非 W3C 验证器上的警告。
Chrome DevTools 的 Console 和 Network 标签页怎么看
这是定位绝大多数“发行报错”的第一现场。别只盯着红色文字，要结合上下文判断是否真影响功能：
-
Uncaught ReferenceError: $ is not defined→ 表明jQuery脚本没加载成功，检查Network里jquery.min.js是否状态码为404或blocked -
Failed to load resource: net::ERR_ABORTED→ 通常是路径写错，比如src="js/main.js"实际文件在/assets/js/main.js，注意相对路径基于当前 HTML 文件位置 -
TypeError: Cannot read property 'addEventListener' of null→ JS 执行时 DOM 元素还没加载，确认脚本是否放在</body>前，或用了DOMContentLoaded包裹
HTML 语法问题不报错但会破坏结构：常见嵌套与闭合陷阱
浏览器自动容错补全（如把 <div><p></div></p> 改成 <div><p></p></div>），但可能让 CSS 选择器失效、JS querySelector 找不到目标元素：
-
<div><div><p></div></p></div>→ 错误闭合顺序，浏览器会拆成两个独立<div>，中间<p>被孤立 -
<img src="a.jpg"><input type="text">→ 自闭合标签漏了/在 XHTML 模式下会出问题，但 HTML5 不强制；不过部分构建工具（如某些 Webpack loader）会严格校验，建议统一写<img src="a.jpg" />或按 HTML5 规范省略斜杠（<img src="a.jpg">） -
<button><div>点击</div></button>→<button>内部不能含块级元素，浏览器会中断解析，把<div>提到<button>外，UI 表现完全错乱
本地能跑，上线就 404？检查路径、大小写和服务器配置
开发环境（如 VS Code Live Server）对路径大小写不敏感，但 Linux 服务器（Nginx/Apache）默认严格区分：
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" href="CSS/style.css">→ 若实际目录是css/（小写），Nginx 返回404 -
<script src="./Js/app.js"></script>→Js目录名应为全小写js，否则部署失败 - 使用相对路径时，确保所有 HTML 页面的层级一致；若用
<base href="/">，所有相对 URL 都以根目录为基准，但需确认服务器静态资源确实部署在根路径下
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>示例</title> <base href="/"> <!-- 下面这行会请求 https://example.com/css/reset.css --> <link rel="stylesheet" href="css/reset.css"> </head> <body> <script src="js/main.js"></script> </body> </html>
发布前务必在模拟生产环境（如用 python3 -m http.server 8000 启动静态服务）中验证全部资源可访问，而不是只依赖开发服务器。
