使用文本文档编写并运行HTML代码，是学习前端开发最直接的入门方式。HTML本身就是一种纯文本标记语言，它并不依赖复杂的编译环境，只需要一个能够输入字符的文本编辑器和一款常见的网页浏览器，就能完成从编写到预览的完整过程。无论使用Windows系统自带的记事本，还是macOS系统自带的文本编辑工具，都可以轻松创建HTML文件。整个操作过程简单清晰，对新手十分友好。
一、编写前需要了解的基本准备
在正式开始之前，需要明确一个核心概念：HTML文件本质上就是一个以.html或.htm为扩展名的纯文本文件。这意味着系统自带的文本编辑器完全可以胜任代码编写工作，不需要安装体积庞大的集成开发环境。Windows下的记事本和macOS下的文本编辑都能直接打开并编辑HTML源码，只需保证在保存文件时使用正确的文件扩展名。
此外，编写HTML代码时还应当养成良好习惯。例如，文件内容最好使用UTF-8编码，以便浏览器正确识别中文等字符；标签的书写要完整闭合，嵌套关系要清晰。虽然记事本本身不具备代码高亮和自动补全功能，但正是这种手动输入每一个字符的方式，更有助于初学者理解HTML标签的结构和含义。
最后，还需要准备一款现代浏览器，如Chrome、Edge或Safari等。浏览器是HTML页面的运行环境，双击HTML文件后，系统会调用默认浏览器解析并渲染页面内容。如果希望使用其他浏览器查看效果，也可以在文件上点击右键，通过打开方式进行选择。
二、从创建文档到运行页面的完整步骤
首先，在电脑的任意文件夹或桌面空白处点击鼠标右键，选择新建菜单中的文本文档选项。此时会生成一个后缀为.txt的文本文件，可以为它取一个容易识别的名称，例如test。这个名称只是暂用名，后续还需要修改为.html后缀。
接着，右键点击新建的文本文档，选择使用记事本或文本编辑打开。在打开的空白文件中输入完整的HTML代码。一个基础的HTML文档通常包含文档类型声明、<html>根元素、<head>头部区域和<body>主体区域。下面给出一个简单示例：
<!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>
输入完成后，点击文本编辑器的文件菜单，选择保存。保存后关闭窗口，回到文件所在目录。此时需要将文件的后缀名从.txt修改为.html。如果系统没有显示文件后缀名，可以先打开文件资源管理器的查看选项卡，勾选文件扩展名选项。之后右键点击文件，选择重命名，将.txt改为.html，并在系统弹出提示时确认修改。
修改完成后，文件图标通常会变为浏览器图标。此时直接双击文件，系统就会使用默认浏览器打开该HTML页面，显示代码中定义的内容。如果页面能够正常显示，说明整个编写和运行过程已经成功完成。
三、常见问题与解决思路
在实际操作中，初学者可能会遇到一些常见问题。首先是文件关联问题：修改后缀名后，如果双击文件仍然用文本编辑器打开，可以右键点击文件，选择打开方式，再选择常用浏览器，并勾选始终使用该应用打开.html文件。这样以后双击HTML文件就会直接调用浏览器渲染。
其次是页面出现乱码的情况。这通常与字符编码设置有关。应当检查<head>区域中是否包含<meta charset="UTF-8">这行代码，并且确认文本文件保存时也使用了UTF-8编码。编码设置一致时，中文内容才能正常显示。
另外，标签的闭合和嵌套错误也是导致页面显示异常的重要原因。例如<head>和<body>都应当放在<html>标签内部，每个开始标签都要有对应的结束标签。下面通过一个列表总结需要注意的要点：
- 确认文件后缀名为
.html，而不是.txt或.html.txt。 - 检查
<meta charset="UTF-8">是否位于<head>内。 - 保证标签正确闭合，避免遗漏
</body>或</html>等结束标签。 - 如果浏览器打开后内容没有更新，可以尝试刷新页面或重新保存文件。
四、在基础页面上进行简单扩展
当基础页面成功运行后，可以尝试向页面中添加更多HTML元素，例如列表、图片、链接或表格。这些元素都可以直接在<body>标签内部继续编写。修改代码后保存文件，再回到浏览器中刷新页面，就能立即看到新增加的内容。
下面这个示例在原有页面中增加了一个二级标题和一个无序列表，用来展示一段简单的兴趣爱好内容：
<!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>
可以看到，扩展页面的过程并不复杂。只需要按照HTML的语法规则继续添加标签和内容，再保存文件，浏览器中的页面就会随之更新。这种即时反馈的体验，对于初学者理解HTML结构和网页渲染机制非常有帮助。
总的来说，使用文本文档编写HTML代码并运行，是学习网页开发的第一步。整个过程只需要系统自带的文本编辑器、浏览器和几个简单的操作步骤即可完成。掌握了文件创建、代码编写、扩展名修改和浏览器预览之后，就可以在这个基础上逐步学习更多HTML标签和CSS样式。建议初学者在练习时多尝试修改代码、增加不同的元素，通过反复保存和刷新来观察页面变化，这样能够更快地理解HTML文档的结构和运行方式。