用系统自带的notepad编辑并运行html网页是前端入门最基础的操作，整个过程不需要安装任何第三方开发工具，只需要利用系统现有功能就能完成。
一、用notepad编写html基础代码
首先打开系统自带的notepad工具，新建一个空白文档，输入简单的html基础结构代码，以下是一个最基础的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个html网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是用notepad编写的第一个html页面</p>
</body>
</html>
二、保存html文件的正确方式
代码编写完成后需要正确保存文件才能让浏览器识别运行，保存时需要注意以下要点：
- 点击notepad左上角的文件选项，选择另存为
- 保存路径可以选桌面或者其他容易找到的位置
- 文件名可以自定义，但是必须以
.html作为后缀，比如test.html - 编码格式一定要选择UTF-8，否则中文内容可能会出现乱码
- 保存类型要选择所有文件，不要选默认的文本文档类型
三、运行html网页的两种方式
方式1：直接双击文件打开
保存完成后，在保存路径下找到刚才保存的test.html文件，直接双击该文件，系统会自动调用默认浏览器打开这个网页，就能看到代码的运行效果。
方式2：右键选择指定浏览器打开
如果想要用特定浏览器运行网页，可以右键点击test.html文件，选择打开方式，然后选择你需要的浏览器，比如Chrome、Edge等，就能用对应浏览器查看运行效果。
四、常见问题及解决方法
| 问题现象 | 产生原因 | 解决方法 |
|---|---|---|
| 双击文件打开后显示代码而不是网页 | 文件后缀不是html或者保存类型选错 | 重新另存为文件，确保后缀是.html，保存类型选所有文件 |
| 网页中文内容显示乱码 | 保存时编码不是UTF-8 | 重新另存为文件，编码选择UTF-8 |
| 修改代码后刷新网页没有变化 | 没有保存修改后的文件 | 在notepad中按Ctrl+S保存修改，再刷新浏览器 |
五、进阶小技巧
如果后续需要频繁修改代码并查看效果，可以在notepad中修改代码后按Ctrl+S保存，然后切换到浏览器按F5刷新，就能快速看到更新后的运行效果。另外如果需要调试代码，可以在浏览器中按F12打开开发者工具，查看元素结构和控制台报错信息。
注意：notepad本身只能用来编辑代码，无法直接运行html网页，最终都需要通过浏览器来渲染展示页面内容，notepad的作用只是编写和保存html代码文件。