浏览器乱码或排版崩塌，首要检查<!DOCTYPE html>是否严格位于第一行且无不可见字符；<p>内禁止嵌套<div>等块级元素，否则浏览器自动闭合<p>导致DOM结构错乱；<img>不显示多因src路径错误或缺失alt属性；用document.body.innerHTML比肉眼查标签更可靠。
浏览器突然乱码或排版全崩，先看<!DOCTYPE html>是不是第一行
这不是可有可无的装饰，而是告诉浏览器“请用标准模式解析”，漏掉或写在第二行，浏览器立刻切进怪异模式（Quirks Mode），后果包括：盒模型计算错误、margin/padding行为异常、甚至整个<body>内容被挤到左上角一小块。常见错误是复制代码时带了空格或BOM头，导致<!DOCTYPE html>前面实际有不可见字符。检查方法：用编辑器显示所有字符，或直接删掉整行重打——必须严格是<!DOCTYPE html>，全小写，无空格，无注释，无换行。
<p>里不能塞<div>，否则DOM结构当场被浏览器重写
HTML规范明确禁止块级元素嵌套在<p>里。<p>是段落容器，只允许内联元素（如<span>、<strong>）。一旦你写了<p>文字<div>块内容</div></p>，浏览器解析时会在遇到<div>时自动闭合<p>，结果变成：<p>文字</p><div>块内容</div>——你写的父容器根本没包住子元素。这类问题不会报错，但用DevTools右键父元素→“Edit as HTML”，随便删个字符再回车，结构瞬间跳变，就是信号。修复方式只有两个：<div>换成<span>（如果语义允许），或者把<p>换成<section>或<article>等允许嵌套块级元素的语义化容器。
<img>不显示？90%是src路径或alt属性惹的祸
路径错误是最常见的硬伤：src="images/photo.jpg"要求当前HTML文件同级目录下存在images文件夹，且里面真有photo.jpg。大小写敏感（Photo.jpg ≠ photo.jpg），中文路径或空格会直接失败。另一个隐形陷阱是alt属性缺失——虽然图片能加载，但W3C验证会报错，SEO和无障碍访问直接掉分。更隐蔽的问题是：某些服务器对file://协议限制资源加载，本地双击打开HTML时<img src="xxx">可能白屏，必须起本地服务（如python -m http.server）才能正常测试。
用document.body.innerHTML比肉眼查标签闭合更可靠
人眼看代码容易忽略隐藏错误，比如<ul><li>项1<li>项2</ul>少了一个</li>，浏览器会自动补全，但补的位置未必是你想的。直接在Console执行document.body.innerHTML，拿到浏览器实际解析后的HTML字符串，和你写的源码逐行比对：多出来的</p>、消失的<section>、错位的</div>，全是线索。配合W3C Validator（https://validator.w3.org/）粘贴源码，它会精准定位Element div not allowed as child of element p这类嵌套违规——这种错误不修，后续CSS和JS都可能失效。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是语法有多难，而是浏览器悄悄改写HTML后，你还在按自己写的结构调试CSS或JS。
