浏览器静默修复HTML结构错误导致DOM与源码不一致，引发JS失效、样式异常等问题；需通过Elements面板验证真实DOM结构，并检查嵌套规则、路径大小写、编码一致性等。
HTML 本身不报错，但浏览器解析时会静默修复、结构错乱、JS 失效、样式异常——你看到的“报错”其实是这些后果。
浏览器 Elements 面板里 DOM 结构和你写的不一样
这是最典型的信号：源码写的是 <div><p>文字</div></p>，但 Elements 里显示成 <div><p>文字</p></div>，甚至多出一堆意外包裹。浏览器在“猜你本意”，但猜错了。
- 重点检查
<table>、<ul>、<ol>、<select>内部——它们对嵌套极其敏感，<div>直接塞进<ul>会被踢到外面 -
<p>里不能放<div>，但<div>里可以放<p>；<a>里不能放<div>（HTML5 允许语义化嵌套，但老习惯仍易翻车） - 打开 Elements 面板后，右键任意元素 → “Edit as HTML”，临时删掉几行再回车，观察 DOM 是否突变——能快速定位错位源头
图片/脚本/CSS 显示不出来，Network 标签里标红 404
不是代码写错，是路径没对上。浏览器只管找文件，不管你怎么想。
- 确认你在用
http://localhost/xxx.html这类服务地址访问，而不是双击打开file:///协议——后者下相对路径规则不同，./css/style.css很可能失效 - 复制 Network 中标红请求的完整路径（比如
http://localhost/pages/js/main.js），粘贴到新标签页看是否真 404；如果 404，说明文件不在那个位置 - 路径大小写必须完全一致：Linux/macOS 服务器区分
Image.jpg和image.jpg，Windows 不区分但别养成坏习惯 - 用
../回退时，数清楚当前 HTML 在哪一层目录——pages/index.html引用css/style.css，应写../css/style.css，不是./css/style.css
控制台没报错，但 JS 拿不到元素或样式不生效
大概率是 DOM 没按你预期生成，或者 CSS 被覆盖/未加载。
立即学习“前端免费学习笔记（深入）”；
- 不要只看源码，用 Elements 面板选中目标元素，看它实际在哪个父容器下——可能被浏览器自动包进
<body>或<div>里了 - 检查
document.getElementById("xxx")返回null？先确认 ID 值拼写、大小写、是否重复（ID 必须唯一） - CSS 不生效？在 Elements 的 Styles 面板里看该属性是否被划掉（被更高优先级规则覆盖），或显示为灰色（未匹配到元素）
- 引入外部 JS 时，
<script src="app.js"></script>放在<head>里又没加defer，脚本执行时 DOM 还没出来，自然找不到元素
页面中文变方块、符号乱码
编码声明和文件保存格式、服务器响应头三者必须统一为 UTF-8。
-
<meta charset="UTF-8">必须是<head>中**第一个**<meta>标签，位置靠前才能被及时识别 - 用编辑器（如 VS Code）确认文件实际编码：右下角点开编码名 → “Save with Encoding” → 选 “UTF-8”（不是 UTF-8 with BOM）
- 打开 Network → 点 HTML 请求 → Headers → Response Headers → 找
Content-Type，确保值是text/html; charset=UTF-8；如果不是，说明服务器配置覆盖了 HTML 声明 - Apache 加
AddDefaultCharset UTF-8，Nginx 加charset utf-8;，PHP 加header('Content-Type: text/html; charset=utf-8');
真正卡住的往往不是语法，而是你以为 DOM 长那样，其实浏览器早就悄悄改写了——所有排错动作，都得从 Elements 面板开始，而不是盯着源码空想。
