根本原因是保存时编码选错（应选UTF-8而非ANSI）和扩展名被隐藏（需选“所有文件”并确认显示“.html”）。必须同时满足：Notepad保存为UTF-8编码、文件名为index.html、HTML中声明<meta charset="UTF-8">，三者严格一致。
Notepad 保存 HTML 文件为什么浏览器打不开
根本原因不是 Notepad 不行，而是保存时没选对编码和扩展名。Windows 自带的 Notepad 默认用 ANSI 编码保存，而现代 HTML 必须用 UTF-8；同时如果手动输入了 .html 但文件类型下拉选的是“文本文档（*.txt）”，系统会偷偷存成 index.html.txt，表面看着像 HTML，实际是隐藏了扩展名的 TXT 文件。
- 保存时点“另存为” → 在“保存类型”下拉菜单里必须选
所有文件（*.*），不能选“文本文档” - 在“文件名”框里老老实实输
index.html（带引号也行，但别漏掉.html） - 点击“编码”下拉框，选
UTF-8（不是UTF-8-BOM，BOM 会导致某些旧浏览器解析异常） - 保存后，在文件夹里打开“查看”→勾选“文件扩展名”，确认文件图标是小地球，且名字确实是
index.html，不是index.html.txt
Notepad 写的 HTML 在 Chrome 里显示乱码或中文变方块
这是典型的字符编码声明缺失或不匹配。Notepad 本身不处理网页渲染，它只负责把字节写进磁盘；浏览器靠 HTML 里的 <meta charset> 告诉自己该用什么编码读取——如果没写、写错了、或和实际保存编码不一致，就必然乱码。
- 在
<head>里第一行加：<meta charset="UTF-8">（必须放在所有其他<meta>和<title>前面） - 确保 Notepad 保存时也用了
UTF-8（见上一条），二者必须严格一致 - 不要用
charset=gb2312或charset=utf-8（小写 utf-8 是历史遗留写法，HTML5 规范要求全大写UTF-8）
Notepad 没有语法高亮，怎么避免写错标签
没有颜色提示确实容易漏闭合标签、错配 <div> 和 </span>，但 Notepad 的轻量反而逼你养成结构习惯。重点不是靠工具识别错误，而是靠写法预防错误。
- 每写一个开始标签，立刻敲回车、缩进、再手打对应结束标签：
<p><br></p>（哪怕暂时空着内容） - 嵌套层级超过 2 层时，用注释标注结束位置：
<!-- /nav -->放在</nav>后面 - 浏览器 F12 打开开发者工具，点“元素”面板，看 DOM 树是否按预期折叠——如果某段文字意外出现在
<head>里，八成是<body>漏闭合了
想预览效果却每次都要右键“在浏览器中打开”，太慢
Notepad 本身不支持实时预览，但可以绕过鼠标操作，用最简方式提速。关键是让浏览器自动刷新，而不是反复手动点开新窗口。
立即学习“前端免费学习笔记（深入）”；
- 用 Chrome 时，先打开一个空白页，地址栏输
file:///C:/your/path/index.html（路径用正斜杠，盘符后两个/） - 之后每次在 Notepad 里改完 →
Ctrl+S保存 → 切到 Chrome →F5刷新，全程不用碰鼠标 - 如果嫌路径长，可以把 HTML 文件放在桌面，直接用
file:///C:/Users/xxx/Desktop/index.html
Notepad 写 HTML 的真正门槛不在功能，而在保存动作和编码声明这两个必须手动干预的环节。一旦这一步做错，后面所有标签写得再标准也没用。很多人卡住，其实只是第一次保存时没看清那个“保存类型”下拉框。
