HTML是描述网页内容的标记语言，浏览器通过解析HTML构建DOM树并渲染页面；常见错误包括编码非UTF-8无BOM、缺少meta charset、路径错误、script位置不当及CSS未生效等。
html 不是“做网页”的工具，而是描述网页内容的标记语言；真正在浏览器里显示页面，靠的是浏览器解析 html 后构建 dom 树并渲染——所以别想着用 html “制作”网页，先学会怎么写它才不会被 document.write 或乱码搞崩溃。
为什么浏览器打开 HTML 文件是空白或乱码
常见错误现象：双击 .html 文件，浏览器只显示文字没样式，或者中文全变成方块、问号；甚至控制台报 Failed to load resource。
- 文件保存编码不是
UTF-8 无 BOM（尤其 Windows 记事本默认是 ANSI 或 UTF-8 with BOM） - 没写
<meta charset="utf-8">，浏览器猜错编码 - 路径写错导致 CSS/JS 加载失败，但 HTML 本身能解析，所以“看起来像空白”
实操建议：用 VS Code 或 Sublime Text 新建文件，手动设编码为 UTF-8（不是 UTF-8 with BOM），开头第一行就写：<meta charset="utf-8">，放在 里。
<script></script> 放哪儿才不阻塞页面加载
使用场景：加统计代码、表单验证、轮播图逻辑。放错位置会导致白屏、按钮点不动、document.getElementById 找不到元素。
- 放在
里：脚本执行时 DOM 还没生成，document.querySelector返回null - 放在
最底部：安全，但手写麻烦，容易漏 - 用
defer属性（仅适用于外部脚本）：<script src="app.js" defer></script>，DOM 解析完再执行，顺序保证 - 用
async：适合独立模块（如埋点），但执行时机不可控，可能早于 DOM 构建完成
性能影响：不加 defer 或 async 的内联脚本会同步阻塞 HTML 解析，用户看到白屏时间变长。
立即学习“前端免费学习笔记（深入）”；
为什么写了 <div class="header"> 却没样式
<p>这不是 HTML 的问题，但新手最容易在这里卡住——HTML 只定义结构，不负责外观。所谓“没样式”，本质是 CSS 没生效或选择器没匹配上。</p>
<ul>
<li>CSS 文件路径写错：<code><link rel="stylesheet" href="css/style.css">，但实际文件在 assets/css/ 下
class="header"，CSS 写 .headder { }（多了一个 d）style.css 但浏览器还在用缓存版本，可加版本号绕过：href="style.css?v=1.0.1"
<link> 标签，或者标签写成了 <link href="...">（缺少 rel="stylesheet"，浏览器直接忽略）兼容性影响：所有现代浏览器都支持 class 属性，但 IE6–8 对某些选择器（如 [type="submit"]）支持差，不过现在基本不用考虑。
真正难的不是写对标签，而是理解 HTML 是树状结构而非线性流程；一个没闭合的 <p></p> 可能让后面十几个元素的样式和事件全部错位——这种问题不会报错，只会静默失效。
