记事本保存html需选utf-8编码、文件名手动输全称、保存类型选“所有文件”;必须添加且闭合标签;避免空格/中文路径,右键用浏览器打开。

记事本保存为 .html 文件时浏览器打不开?
直接改后缀不生效,关键在编码和换行格式。记事本默认用 ANSI 编码(Windows 本地编码),而现代浏览器要求 UTF-8 或明确声明的编码;同时,记事本保存的换行符是 \r\n,虽不影响解析,但若内容含中文且未声明编码,页面会乱码或空白。
- 保存前必须点「另存为」→ 在「编码」下拉菜单选
UTF-8(不是UTF-8-BOM,除非你明确需要 BOM) - 「文件名」栏手动输入完整名称,例如:
index.html;不能只输index再靠后缀下拉框选,否则记事本可能仍加.txt - 「保存类型」务必选「所有文件」,否则即使输
.html后缀,记事本也会强制追加.txt
为什么写了 你好 还是显示源码?
常见于文件名带空格或路径含中文,或双击打开时被系统用错误程序关联。浏览器只认内容合法 + 路径可读 + 关联正确。
- 文件名避免空格和特殊符号,用
page.html比我的网页.html更稳妥 - 不要双击用「记事本」打开再复制粘贴——它可能悄悄把引号转成全角,或插入不可见控制字符
- 右键文件 → 「在浏览器中打开」;如果没这选项,右键 → 「打开方式」→ 选 Chrome/Firefox/Edge,勾选「始终使用此应用打开 .html 文件」
用记事本写 HTML 必须注意的三处硬性语法
记事本不校验语法,错一处就可能导致整个页面渲染失败,尤其新手常栽在这几个地方:
-
<meta charset="UTF-8">必须放在内、且越靠前越好(最好第一行),否则中文照样乱码 - 标签必须闭合:
<p>文字</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/shouce/1848" title="Android传感器编程 中文WORD版"><img src="https://img.php.cn/upload/manual/000/000/010/170900671320159.png" alt="Android传感器编程 中文WORD版"></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/shouce/1848" title="Android传感器编程 中文WORD版">Android传感器编程 中文WORD版</a> <p>本文档主要讲述的是Android传感器编程;传感器是一种物理装置或生物器官,能够探测、感受外界的信号、物理条件(如光、热、湿度)或化学组成(如烟雾),并将探知的信息传递给其它装置或器官。同时也可以说传感器是一种检测装置,能感受被测量的信息,并能将检测的感受到的信息,按一定规律变换成为电信号或其它所需形式的信息输出,以满足信息的传输、处理、存储、显示、记录和控制等要求。它是实现自动检测和自动控制的首要环节。感兴趣的朋友可以过来看看</p> </div> <a href="/xiazai/shouce/1848" title="Android传感器编程 中文WORD版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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>可以,<p>文字</p>不行;<br>在 HTML5 中可不闭合,但<img alt="如何将记事本的文件保存为.html" >建议写成<img src="x.jpg" alt="如何将记事本的文件保存为.html" >(自闭合更稳妥) - 路径别写错:
<img src="pic.jpg" alt="如何将记事本的文件保存为.html" >要求图片和 HTML 在同一目录;若放子目录,得写images/pic.jpg,不能用中文路径如图片/pic.jpg
什么时候不该用记事本写 HTML?
不是不能用,而是某些场景下它会让问题更隐蔽:
- 需要实时预览样式或调试 JS 时——记事本无语法高亮、无错误提示、无法关联开发者工具
- 协作或提交 Git 时——记事本不显示行尾符差异,
CRLF和LF混用易引发冲突 - 写超过 10 行的表单或 CSS 内联样式时——缺少缩进自动对齐,
<div> 嵌套深了极易漏掉闭合标签 <p>真要轻量编辑,VS Code 的「纯文本」模式 + 禁用所有插件,比记事本更可靠;但若只是改一行文案、临时测个结构,记事本够用——前提是编码、后缀、路径三处不出错。</p> </div>









