写好HTML代码之后，下一步就是让它真正在浏览器里跑起来。很多初学者以为代码写完了就万事大吉，结果保存成txt或者放在错误目录，双击打开是一片乱码或样式全无。要顺利运行本地HTML文件，核心是搞清楚文件保存格式、路径关系以及浏览器加载机制。
一、确认文件保存格式与扩展名
首先必须保证代码文件确实是HTML格式，而不是被记事本自动存成了带txt后缀的文件。在Windows资源管理器里，如果设置了隐藏已知文件扩展名，你看到的“index”实际可能是“index.html.txt”。这种文件浏览器会当成纯文本，不会解析标签。
正确的做法是在保存时手动输入完整文件名，例如index.html，并且保存类型选“所有文件”。在macOS或Linux里，直接用代码编辑器保存为.html即可。下面是一段用Python脚本批量检查并修正扩展名的小工具思路：
import os
def fix_html_ext(folder):
for name in os.listdir(folder):
# 找出伪装成txt的html文件
if name.endswith('.txt'):
base = name[:-4]
if base.lower().endswith('.html'):
os.rename(os.path.join(folder, name), os.path.join(folder, base))
print('已重命名:' + base)
return
fix_html_ext('./web')
上面的代码会扫描指定目录，把“xxx.html.txt”重命名为“xxx.html”。虽然简单，但能避免新手因扩展名问题打不开页面。实际开发中更建议直接用VS Code等编辑器，从一开始就建对文件类型。
二、直接双击与右键打开浏览器
最直观的运行方式是在文件管理器里找到html文件，双击它，系统会调用默认浏览器加载。此时地址栏通常显示file:///C:/Users/Test/index.html这类file协议路径。file协议告诉浏览器从本地磁盘读取，不需要服务器。
如果双击没反应或用了不对的程序打开，可以右键文件，选择“打开方式”，再指定Chrome、Edge或Firefox。这种方式适合纯静态页面，也就是只包含HTML、内联CSS和JS，不依赖后端接口的场景。但要注意，若代码里写了fetch('/api/data')这类绝对路径请求，file协议下会报跨域或找不到资源的错，因为本地并没有服务器响应该路由。
常见路径错误
当HTML引用了外部文件，例如<link rel="stylesheet" href="css/style.css">，浏览器会基于当前html文件位置去拼路径。如果你把html放在桌面，而css文件夹在D盘，相对路径自然失效。正确做法是把html、css、js、图片放在同一项目文件夹内，保持目录结构一致。
也可以用绝对file路径写死位置，例如href="file:///D:/web/css/style.css"，但这样换台电脑就崩了，不利于协作。因此本地运行静态页时，相对路径才是最稳的方案。
三、使用本地服务器运行
当页面需要AJAX、ES模块（import语法）或Service Worker时，file协议会因安全策略被拦。此时要起一个本地HTTP服务器。不懂命令行也能用工具：VS Code装Live Server插件，点右下角“Go Live”，自动开http://127.0.0.1:5500/index.html。
命令行派可以用Python自带模块，在项目根目录执行：
# Python 3 启动简易服务器 python -m http.server 8000 # 浏览器访问 http://127.0.0.1:8000/
这段命令会在当前目录开启8000端口的HTTP服务，地址栏变成http协议，模块加载和接口请求都正常。相比双击，服务器方式更接近线上环境，能提前暴露路径和跨域问题。下表演示两种运行方式差异：
| 对比项 | 双击(file协议) | 本地服务器(http协议) |
|---|---|---|
| 外部CSS/JS相对路径 | 支持 | 支持 |
| ES模块import | 报错 | 正常 |
| fetch本地接口 | 失败 | 可配合后端 |
| 适用场景 | 纯静态demo | 开发调试 |
从表里能看出，只要涉及现代前端工程化，本地服务器就是必选项。即便是初学者，早点习惯Live Server也能少踩很多坑。
四、浏览器中的调试与刷新
页面跑起来后，如果效果不对，右键“检查”打开开发者工具，切到Console看报错。常见如404就是文件路径写错，MIME类型错乱则是服务器没认出.html。在file协议下，有时js不执行是因为被浏览器当成文本，这时也必须转用服务器。
另外，写HTML时如果用到<input>这类表单标签，本地运行同样正常，只是提交后没有后端接收。你可以先把表单action指向mailto或者留空做前端校验练习。总之，运行HTML文件并不难，难的是理解它背后的加载逻辑，选对打开方式，你的代码才能变成真正看得见的网页。