404错误常因路径大小写、后缀缺失或相对路径解析错位导致，需核对URL与真实路径；500错误多源于接口或服务端脚本问题，应查Network和控制台；HTML嵌套错误会被浏览器静默修正，需以Elements面板为准；字符编码须确保文件保存格式、meta声明及HTTP头三者一致。
404 错误：页面不存在，但可能不是你想象的那样
浏览器显示 404 Not Found，多数人第一反应是“链接写错了”。其实更常见的是路径大小写不一致（尤其部署在 Linux 服务器时）、.html 后缀被省略但服务器没配默认后缀、或静态资源路径写成相对路径却在子目录下打开 HTML 文件导致解析错位。
- 检查浏览器地址栏实际请求的 URL，对比文件真实路径——注意大小写和斜杠结尾
- 本地双击打开 HTML 时，
./assets/style.css可能失效，改用file:///绝对路径或起个本地服务（npx serve） - Nginx/Apache 中若启用了
try_files或FallbackResource，404可能被前端路由捕获，此时真实错误其实在控制台里
500 错误：服务器崩了，但源头常在 HTML 外面
500 Internal Server Error 看似和 HTML 无关，但如果你在 HTML 里写了 <script src="/api/data"></script>，而这个接口返回了 500，页面虽能加载，但 JS 报错、数据空白——这时查控制台的 Failed to load resource: the server responded with a status of 500 才是关键线索。
- 不要只盯着 HTML 文件本身；优先看浏览器开发者工具 Network 标签页里状态码为
500的请求 - 如果是 PHP/Node.js 渲染 HTML 的场景，
500往往来自服务端模板语法错误（比如未闭合的<?php echo $user['name'] ?>中$user为空） - Apache 的
ErrorLog或 Nginx 的error.log会记录具体哪行脚本出问题，比 HTML 源码更直接
HTML 解析失败：浏览器静默纠错，但行为不可靠
写错标签嵌套，比如 <p><div>text</div></p>，浏览器不会报错，而是自动拆解成 <p></p><div>text</div><p></p>。这种“容错渲染”让页面看似正常，却可能导致 CSS 选择器失效、JS 获取不到预期 DOM 结构。
- 用浏览器的 Elements 面板看最终生成的 DOM 树，而不是源码——这才是真实结构
- 验证 HTML 有效性别靠肉眼，用
https://validator.w3.org/nu/或 VS Code 插件HTMLHint - 自定义元素或 Web Component 场景下，
<my-card><p>content</p></my-card>若未注册，浏览器当普通标签处理，内部样式/事件全丢
字符编码错误：中文变方块、乱码，根源不在字体
页面出现 或一堆问号，90% 是声明和实际编码不匹配。比如 HTML 文件保存为 UTF-8，但 <meta charset="gbk"> 强制告诉浏览器用 GBK 解码，结果必然乱码。
立即学习“前端免费学习笔记（深入）”；
- 确认文件真实编码：VS Code 右下角显示的编码格式，点击可切换；Sublime Text 用 File → Reopen with Encoding
-
<meta charset>必须与文件保存编码一致，且必须放在<head>最前面（否则前几个字节已按错误编码解析） - HTTP 响应头
Content-Type: text/html; charset=utf-8优先级高于<meta>，Nginx/Apache 配置里别漏掉charset utf-8;
