搭建HTML开发及运行环境是学习网页制作的第一步，整个过程并不需要复杂的工具链。本质上，HTML是一种由浏览器直接解析的标记语言，只要能生成符合语法的文本文件，并在浏览器中打开，环境就算就绪。下面从开发工具的选择到运行方式的配置，逐步说明具体做法。
一、HTML开发环境的三种选择
开发环境指的是用来编写和编辑HTML代码的工具集合。最基础的形式是操作系统自带的纯文本编辑器，例如Windows的记事本或macOS的文本编辑。这类工具没有任何语法高亮，但胜在零安装、随时可用。新建文件后，输入HTML结构，通过“另存为”把编码设为UTF-8，文件名写成index.html，就得到了一个合法的网页源文件。
如果希望提升效率，可以使用专门的代码编辑器，如VS Code、Sublime Text或Notepad++。它们提供标签自动闭合、颜色区分和错误提醒。以VS Code为例，安装后新建文件并保存为html后缀，输入叹号加Tab即可生成标准文档骨架。这类工具不强制联网，离线也能完成全部本地开发工作。
对于大型项目，部分团队会引入集成开发环境（IDE）如WebStorm，它内置了浏览器同步、版本控制面板等。但对单纯练习HTML而言，IDE显得过重。初学者用轻量编辑器反而更容易理解文件与浏览器的直接关系，不被额外功能干扰。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第一个页面</title>
</head>
<body>
<h1>你好，HTML</h1>
</body>
</html>
二、HTML运行环境的本地配置
运行环境是指让HTML文件被解析并显示出来的条件。最简单的运行方式是找到本地html文件，双击后用默认浏览器打开。此时浏览器地址栏显示的是file协议，例如file:///C:/Users/test/index.html。这种方式适合静态页面，但当用户尝试用JavaScript读取本地其他文件时，会受到浏览器安全策略限制。
为了避免file协议导致的跨域问题，可以启动一个本地静态服务器。不需要安装大型软件，使用Python自带的模块就能完成。在文件所在目录打开终端，执行对应命令，终端会提示访问地址，把该地址填入浏览器即可像真实网站一样加载页面。这种环境更接近线上部署情形，也方便后续引入CSS和脚本资源。
另一种常见做法是使用编辑器配套的实时预览插件。例如在VS Code中安装Live Server，右键选择启动，编辑器会自动开启端口并刷新页面。它的底层同样是小型HTTP服务，但隐藏了命令细节，对不熟悉终端的新手更友好。三种方式中，双击打开用于快速验证，命令行服务用于规范开发，插件方案用于日常编码。
# Python 3 启动简易服务器 python -m http.server 8000 # 浏览器访问 http://127.0.0.1:8000/index.html
三、环境验证与常见问题
搭建完成后，应当验证环境是否正常工作。写一个包含标题和段落的最小页面，分别在双击打开和服务器打开两种情况下查看。若浏览器显示纯文本而非渲染结果，多半是文件后缀误存为txt，需在资源管理器开启扩展名显示并修正。若中文出现乱码，检查<meta charset="UTF-8">是否遗漏，以及保存编码是否匹配。
还有一个易混淆点：开发环境与运行环境不必是同一台机器。你可以把写好的html文件传到任意支持静态托管的空间，用其他设备浏览器访问。但在学习阶段，保持本地编写加本地浏览，能最快建立“代码改变即时反映”的认知，减少环境排查成本。
| 方式 | 协议 | 适用场景 | 跨域限制 |
|---|---|---|---|
| 双击打开 | file | 快速预览静态页 | 严格 |
| 命令行服务 | http | 规范本地开发 | 宽松 |
| 编辑器插件 | http | 日常编码刷新 | 宽松 |
四、总结与后续扩展
HTML的开发环境核心是一个能写纯文本的工具，运行环境核心是一个能解析HTML的浏览器。二者结合，不需要数据库或后端语言就能完成基础页面。当你的页面需要引入外部接口或模块化脚本时，再补充对应的服务配置即可。
理解这套最小环境后，可以进一步学习如何在编辑器中集成CSS预处理器、如何用浏览器开发者工具检查元素。那时你会发现，最初用记事本写出的html文件，和复杂工程里的页面，在运行原理上并没有本质区别。