用文本文档编写和运行HTML代码是前端入门最基础的操作，不需要安装任何专业的开发工具，只需要系统自带的文本编辑功能就能完成，整个过程操作简单，适合新手快速上手体验页面开发。
一、用文本文档编写HTML代码的前期准备
首先我们需要确认系统自带的文本编辑工具可以正常使用，Windows系统自带记事本，macOS系统自带文本编辑，这两个工具都可以用来编写HTML代码。不需要额外下载任何软件，只要能正常输入文字即可。
二、具体编写和运行步骤
1. 创建文本文档
在电脑任意位置右键点击空白处，选择新建，再选择文本文档，给新建的文件起一个容易识别的名字，比如test，此时文件的后缀名是.txt。
2. 编写基础HTML代码
右键点击新建的文本文档，选择打开方式，选择记事本或者文本编辑打开文件，然后输入以下基础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>这是用文本文档编写的HTML页面</h1>
<p>运行后就能看到这段内容</p>
</body>
</html>
输入完成后点击文件菜单，选择保存，确保代码没有输入错误，尤其是标签的闭合要完整。
3. 修改文件后缀名
关闭文本编辑窗口，回到文件所在的位置，我们需要把文件的后缀名从.txt改成.html。如果系统默认隐藏了文件后缀名，需要先打开文件资源管理器的查看选项，勾选文件扩展名选项，之后右键点击文件选择重命名，把.txt改成.html，修改完成后会弹出提示框，点击是即可。
4. 运行HTML文件
修改完成后，文件的图标会变成浏览器的图标，直接双击这个文件，系统就会自动用默认浏览器打开这个HTML页面，就能看到我们编写的代码呈现的效果了。
三、常见问题说明
- 如果修改后缀名后双击文件还是用文本编辑器打开，可以右键点击文件，选择打开方式，选择常用浏览器，之后勾选始终用该应用打开
.html文件即可。 - 如果页面显示乱码，一般是字符编码设置的问题，检查
<meta charset="UTF-8">这行代码是否存在，确保编码设置正确。 - 编写代码时要注意标签的嵌套规则，比如
<head>和<body>都要放在<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>这是用文本文档编写的HTML页面</h1>
<p>运行后就能看到这段内容</p>
<h2>我的爱好</h2>
<ul>
<li>阅读</li>
<li>运动</li>
<li>编程</li>
</ul>
</body>
</html>