学习网页开发的第一步，往往是搞清楚代码和页面之间的关系。不少人在记事本里敲了几行代码，却发现双击打开后显示的还是文字本身，或者干脆弹出了编辑器窗口，这其实就是没有完成从文本文件到网页文件的转换。本文把用文本写HTML代码并运行的完整步骤拆开讲清楚，让你不装任何专业软件也能顺利跑出自己的第一个页面。
第一步：准备工作与编写HTML代码
Windows系统自带一个叫记事本的工具，按快捷键Win+R，输入notepad后回车就能打开。macOS用户则可以使用文本编辑器，打开后需要在偏好设置里把格式切换为纯文本模式，否则保存出来的文件会带上富文本格式信息，导致浏览器无法正常解析。
打开编辑器后，先写一个标准的基础结构。HTML文档有自己的固定骨架，最外层是<html>标签，内部包含<head>和<body>两个部分，前者存放编码声明和标题等信息，后者是真正显示在页面上的内容。可以复制下面这段代码到记事本里：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界</h1>
<p>这是我用记事本写的第一个HTML页面。</p>
</body>
</html>这里要特别解释一下<meta charset="UTF-8">这一行的作用。它告诉浏览器这份文档使用UTF-8编码。如果缺少这一行，而系统默认编码不是UTF-8，页面上的中文就可能出现乱码，变成一串看不懂的符号。这是新手最容易忽略的一个细节，建议每个页面都保留这行声明。
第二步：保存文件并修改后缀名
代码写完之后，点击文件菜单里的另存为。这一步有两个关键点：第一，文件名可以自定义，比如叫index，但要确保后缀名是.htm或.html；第二，保存类型要选择所有文件，编码选择UTF-8，然后点击保存。
保存后如果你看到的文件名是index.txt，说明后缀名没改对，需要手动重命名为index.html。这里会遇到一个经典坑：Windows默认隐藏已知文件的扩展名，你以为是index.html，实际上可能是index.html.txt。解决办法是打开文件资源管理器，点击查看菜单，勾选文件扩展名选项，让后缀显示出来，再确认修改是否正确。
改好后缀之后，文件的图标通常会从记事本图标变成浏览器图标，这是判断转换是否成功最直观的方法。如果图标没变，多半是后缀名还有问题，或者文件关联被修改过，此时可以右键文件，选择打开方式，再挑选电脑上安装的任意一款浏览器。
第三步：在浏览器中运行页面
双击index.html文件，系统会用默认浏览器打开它，你就能看到页面上显示的标题和段落文字了。到这里，用文本写HTML代码并运行的流程就跑通了。常用的浏览器如Chrome、Edge、Firefox都能完美解析HTML文件，效果基本一致。
运行起来之后还有一件重要的事：调试。在页面上按F12或者右键选择检查，可以打开浏览器的开发者工具。其中Elements面板能实时查看HTML结构，你修改记事本里的代码并保存后，回到浏览器按F5刷新就能看到变化。这套保存加刷新的循环，是前端开发最基本的日常工作节奏。
如果页面显示空白，可以按下面的思路排查：先确认文件后缀确实是.html而不是.txt；再检查标签是否正确闭合，比如<body>有没有对应的</body>；最后看看DOCTYPE声明是否写在了文档第一行。逐项排查基本都能找到问题。
进阶技巧：搭建更顺手的工作环境
记事本虽然能用，但没有任何语法高亮和自动补全，代码量一大就容易出错。等你熟悉了基本流程，可以换成Visual Studio Code这类免费编辑器。它安装一个Live Server插件后，右键文件选择Open with Live Server，代码一保存浏览器就自动刷新，省去了手动按F5的步骤，效率提升非常明显。
另一个进阶方向是理解本地路径的概念。当你开始引用图片、CSS文件时，浏览器会根据HTML文件所在的位置去找资源。比如在同级目录放一张pic.jpg，用<img src="pic.jpg">就能引用，如果放在子文件夹里则要写成<img src="images/pic.jpg">。路径写错导致图片显示不出来，也是新手高频问题之一。
总的来说，文本写HTML的核心就三步：写代码、改后缀、浏览器打开。整个过程不需要任何编程环境配置，是理解网页运行原理最好的入门方式。等你把这几步练熟，再去学习CSS美化页面和JavaScript增加交互，就会顺畅很多。