运行HTML源代码是前端开发中最基础的操作，不需要依赖复杂的开发环境，根据使用场景选择对应的方法就能快速查看页面渲染效果。
方法一：直接通过浏览器打开本地HTML文件
这是最简单直接的方式，适合单个静态HTML文件的快速预览。操作步骤如下：
- 找到本地存储的HTML源代码文件，文件后缀通常为.html或者.htm
- 右键点击该文件，在弹出的菜单中选择打开方式，选择任意一款主流浏览器，比如Chrome、Edge、Firefox等
- 浏览器会自动加载并渲染HTML内容，展示最终的页面效果
这种方式不需要任何额外配置，但是存在局限性，如果HTML中引用了本地其他资源文件，比如CSS、JS、图片等，部分浏览器可能会因为跨域限制导致资源加载失败。
方法二：使用代码编辑器的内置预览功能
现在主流的代码编辑器都内置了HTML预览功能，能更方便地边写代码边查看效果，常用的编辑器比如VS Code、Sublime Text等都支持。以VS Code为例，操作步骤如下：
- 在VS Code中打开HTML源代码文件
- 安装Live Server插件，这是VS Code中非常常用的HTML预览插件
- 右键点击编辑区域的HTML文件内容，选择Open with Live Server选项
- 浏览器会自动打开页面，并且当你修改源代码保存后，页面会自动刷新展示最新效果
使用这种方式的好处是支持自动刷新，不需要每次修改代码后手动刷新浏览器，同时能避免直接打开文件的跨域问题。
<!-- 这是一个简单的HTML示例文件 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页面</title>
</head>
<body>
<h1>Hello World</h1>
<p>这是一个用于测试运行的HTML页面</p>
</body>
</html>
方法三：搭建本地服务器运行
如果HTML项目结构比较复杂，引用了大量本地资源，或者涉及AJAX请求等需要服务器环境的场景，就需要搭建本地服务器来运行源代码。常用的本地服务器搭建方式有以下几种：
1. 使用Node.js的http-server
首先确保本地已经安装了Node.js环境，然后执行以下命令：
# 全局安装http-server npm install -g http-server # 进入HTML文件所在的目录 cd /path/to/your/html/folder # 启动服务器，默认端口是8080 http-server
启动后打开浏览器访问http://127.0.0.1:8080就能看到页面效果。
2. 使用Python内置的简易服务器
如果本地安装了Python环境，也可以直接使用Python的内置模块启动服务器，不需要额外安装依赖：
# Python 3.x版本 python -m http.server 8080 # Python 2.x版本 python -m SimpleHTTPServer 8080
同样进入HTML文件所在目录执行命令后，访问http://127.0.0.1:8080即可。
不同运行方法的适用场景
可以根据实际需求选择对应的运行方式，以下是不同场景的推荐选择：
| 场景 | 推荐运行方法 |
|---|---|
| 单个简单静态HTML文件快速预览 | 直接浏览器打开本地文件 |
| 日常开发调试，需要自动刷新 | 代码编辑器内置预览功能（如VS Code+Live Server） |
| 复杂项目，涉及跨域请求、多资源引用 | 搭建本地服务器运行 |
运行过程中的常见问题
- 页面样式或脚本不生效：检查资源文件的引用路径是否正确，直接打开本地文件时如果路径是绝对路径可能会出现加载失败，建议改用相对路径
- 修改代码后页面没有更新：清除浏览器缓存后再刷新，或者使用Live Server等支持自动刷新的工具
- 端口被占用：启动本地服务器时如果提示端口被占用，可以更换其他端口，比如把8080改成8081