HTML乱码主因是编码声明与文件实际保存编码不一致，须确保编辑器保存为UTF-8无BOM、置于最前且无BOM/空格干扰、HTTP响应头Content-Type charset=utf-8三者统一。
不难，但容易在“看起来会了”和“真能写对”之间卡住。关键不在语法多复杂，而在是否踩准了几个隐性门槛：编码设置、标签闭合习惯、浏览器解析容错带来的错觉。
为什么用记事本写HTML总乱码？
本质是字符编码没对齐。浏览器默认按系统编码（比如 GBK）读取文件，但 HTML 里写了 <meta charset="UTF-8">，两者打架就显示方块或问号。
- 保存文件时，必须手动选「UTF-8 无 BOM」——记事本默认是 ANSI 或 UTF-8 with BOM，VS Code 默认是 UTF-8，但得确认右下角状态栏显示的是「UTF-8」而非「GBK」
-
<meta charset="UTF-8">必须放在最前面，且不能写成<meta charset="‘utf8’">（引号用中文符号）或charset=utf8（少个 -） - 如果已经乱码，别改代码，先用编辑器重新以 UTF-8 编码打开文件，再另存为 UTF-8
写完双击打不开，或者只显示空白？
不是代码错了，大概率是文件后缀或路径问题。浏览器只认 .html 或 .htm，其他后缀（比如 .txt、.html.txt）它直接当文本文件处理，不解析标签。
- Windows 下要开启「显示文件扩展名」：进「文件夹选项」→ 勾选「显示文件扩展名」，否则你看到的
index.html实际可能是index.html.txt - 文件名避免中文、空格、特殊符号，用
index.html、about-me.html这类纯英文+短横线命名 - 如果用了图片或链接，路径写相对路径（比如
<img src="images/logo.png" alt="HTML网页制作难不难？小白学习路线解析" >），就得确保images/文件夹真在同级目录下；写错路径不会报错，只是显示空白或占位符
为什么 W3C 验证报一堆错误，但页面照样显示？
因为浏览器做了大量容错处理：自动补全缺失的 、忽略未闭合的 <p></p>、把 <div><div> 当成嵌套……但这不等于合法，也不代表无障碍或 SEO 友好。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>验证工具（如 <a href="https://www.php.cn/link/6c4ce2d66be954338a51e72eb79aae10">validator.w3.org</a>）检测的是标准符合度，不是渲染结果。报 <code>Element “img” is missing required attribute “src” 就说明这个 <img alt="HTML网页制作难不难？小白学习路线解析" > 标签根本没加 src，属于结构性错误
<a href="#"></a> 中的 # 不是占位符，是真实 URL，应写 href="javascript:void(0)" 或留空 href="" 再加 JS 控制；<input type="text"> 没配 <label for="xxx"></label>，影响可访问性<div class="header"> 而不用 <code><header></header>，对人眼没差别，但对屏幕阅读器、搜索引擎就是不可读的
真正卡住小白的，从来不是标签记不住，而是这些“看不见的规则”：编码、路径、验证逻辑、语义边界。它们不报错，却让代码在协作、上线、适配时突然崩出各种诡异问题。
