保存html源码到本地文件是网页开发和学习过程中非常基础的操作，无论是需要保存网页的现有源码用于分析，还是将自己编写的html代码存储为可运行的文件，都有对应的标准操作流程。
一、从浏览器保存现有网页的html源码
如果我们想要保存已经打开的网页的html源码，直接通过浏览器的内置功能就能完成，主流浏览器如Chrome、Edge、Firefox的操作逻辑基本一致。
操作步骤
- 打开需要保存源码的网页，在页面任意位置点击鼠标右键，选择菜单中的
查看网页源代码选项，此时会打开新的标签页展示当前页面的完整html源码。 - 在新打开的源码页面中，点击浏览器右上角的
更多按钮，选择另存为，或者直接使用快捷键Ctrl+S。 - 在弹出的保存窗口中，选择文件保存的路径，文件类型选择
网页，仅HTML，输入自定义的文件名，点击保存即可。
需要注意的是，这种方式保存的只是当前页面的html源码，页面中引用的外部CSS、JS等资源不会被一同保存，如果需要完整保存网页的所有资源，可以选择网页，全部的保存类型。
二、手动编写的html源码保存为文件
当我们自己编写html代码时，需要将代码内容保存为后缀为.html或.htm的文件，才能通过浏览器正常打开运行。
使用记事本保存的操作流程
Windows系统自带的记事本就可以完成html文件的保存，具体操作如下：
- 打开记事本，将编写好的html代码粘贴到记事本编辑区域。
- 点击
文件菜单中的另存为选项。 - 在弹出的保存窗口中，选择保存路径，然后将下方的
保存类型改为所有文件(*.*)。 - 在
文件名输入框中输入文件名，并加上.html后缀，比如test.html，编码选择UTF-8，点击保存即可。
代码示例
以下是一个简单的html源码示例，保存为test.html后可以直接在浏览器中打开：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页面</title>
</head>
<body>
<h1>这是保存的html文件</h1>
<p>这是一个简单的html示例内容</p>
</body>
</html>
使用代码编辑器保存的操作流程
如果使用VS Code、Sublime Text等代码编辑器编写html代码，保存操作会更加便捷：
- 新建文件后粘贴或编写html代码。
- 点击
文件中的保存，或者使用快捷键Ctrl+S。 - 选择保存路径，输入带
.html后缀的文件名，点击保存即可，编辑器默认会保持正确的编码格式。
三、保存html源码的注意事项
- 文件名后缀必须为
.html或.htm，否则浏览器无法识别为html文件，可能会以文本形式打开。 - 保存时建议选择UTF-8编码，避免出现中文乱码的问题。
- 如果是保存动态网页的源码，只能保存当前浏览器渲染后的静态html内容，无法保存服务器端动态生成的原始逻辑代码。
- 手动编写代码时，要确保html标签的闭合和语法正确，否则保存后打开可能会出现页面显示异常的问题。
四、常见问题解答
保存后的html文件打开是代码不是页面？
这种情况通常是文件后缀没有正确设置，比如后缀是.txt，需要修改文件后缀为.html，如果系统隐藏了文件后缀，可以在文件夹选项中开启显示文件扩展名后再修改。
保存的源码打开后样式丢失？
因为保存时只保存了html文件，没有保存对应的CSS样式文件，如果需要完整保留样式，可以保存网页时选择网页，全部类型，或者手动保存对应的外部资源文件并修改源码中的引用路径。