记事本写HTML打不开或空白,主因是扩展名错误(如存为.txt)或编码非UTF-8;必须用“所有文件”保存类型、UTF-8编码、英文路径,并写全DOCTYPE、html、head、body结构。

用记事本写 HTML 文件,保存后打不开或显示空白
不是代码写错了,大概率是文件扩展名没对上,或者编码格式被记事本悄悄改了。.html 和 .htm 都行,但绝不能是 .txt —— 即使你手动改了后缀,Windows 资源管理器默认隐藏扩展名,很容易误以为改成功了,其实还是 index.html.txt。
记事本另存为时,务必在「保存类型」下拉菜单里选「所有文件」,再输入 index.html;编码选「UTF-8」(别用「ANSI」,中文会乱码);路径里别带中文或空格,比如 C:\my site\index.html 就可能出问题,换成 C:\demo\index.html 更稳妥。
HTML 标签写全了,但浏览器里不渲染成网页
常见原因是漏了最基础的骨架结构:没有 <!DOCTYPE html>、没包 <html>、<head>、<body>。记事本里随手敲几行文字,比如只写 <h1>标题</h1>,浏览器会当成纯文本解析,不走 HTML 渲染流程。
最小可运行模板长这样(复制粘贴进记事本即可):
立即学习“前端免费学习笔记(深入)”;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>你好</h1> </body> </html>
注意三点:charset="UTF-8" 必须有,否则中文标题可能显示方块;<html> 和 <body> 不能省;所有标签必须成对(<p>xxx</p>),单标签如 <img> 要写成 <img src="x.jpg">(HTML5 允许不闭合,但新手别试)。
双击打开是乱码,或浏览器地址栏显示 file:///C:/... 但内容不对
这是记事本编码和浏览器解码不匹配的典型表现。Windows 记事本在「另存为」时,默认编码可能是 ANSI(中文系统下实际是 GBK),而现代浏览器默认按 UTF-8 解析。结果就是中文变问号或小方块。
解决办法只有两个:
• 保存时在记事本「编码」下拉框里手动选 UTF-8(不是 UTF-8-BOM,BOM 会导致某些旧工具报错);
• 或者换用更靠谱的编辑器,比如 VS Code、Notepad++,它们新建文件默认就是 UTF-8 无 BOM,且能实时显示编码状态。
验证是否成功:用记事本打开已保存的 index.html,如果中文正常显示,再用浏览器打开也正常,才算闭环。如果记事本里都乱码,说明保存时编码就错了。
写了链接、图片,但点不开或加载不出来
路径写错是最常见原因。记事本没有路径提示,全靠手敲,容易漏点、多斜杠、大小写混淆(尤其在 macOS/Linux 服务器上,Img.jpg 和 img.jpg 是两个文件)。
本地测试时统一用相对路径,并遵守这些规则:
• 图片和 HTML 在同一文件夹:直接写 <img src="logo.png">;
• 图片在子文件夹 images/ 下:写 <img src="images/logo.png">;
• 不要用绝对路径如 C:\demo\images\logo.png,浏览器会拒绝加载(安全限制);
• 链接跳转到同目录下另一个 HTML:写 <a href="about.html">关于</a>,别加 file:// 前缀。
一个小技巧:把文件拖进浏览器标签页,看地址栏最后是不是以 .html 结尾;如果不是,说明根本没当成 HTML 打开。
真正麻烦的是跨设备协作或部署前——本地路径没问题,一传到服务器就 404。这时候得盯紧服务器上的真实目录结构,而不是记事本里你想象的结构。










