写好HTML代码后，运行文件查看效果是开发过程中必不可少的环节，不同的运行方式对应不同的开发需求，下面介绍几种常用的运行方法。
方法一：直接用浏览器打开本地HTML文件
这是最简单直接的运行方式，适合静态HTML页面调试，不需要额外安装任何工具。
操作步骤
- 找到你保存好的HTML文件，确认文件后缀是
.html或者.htm - 右键点击该文件，在弹出的菜单中选择打开方式，选择你常用的浏览器，比如Chrome、Edge等
- 浏览器会自动加载文件内容，你就可以在页面上看到代码的运行效果
这种方式的缺点是如果页面中引用了本地相对路径的资源，比如图片、CSS文件，可能会出现路径加载错误的问题，而且无法模拟网络请求场景。
方法二：使用代码编辑器自带的运行功能
现在主流的前端代码编辑器都内置了运行HTML文件的功能，不需要手动找文件打开，操作更便捷。
以VS Code为例的操作步骤
- 在VS Code中打开你的HTML文件
- 安装Live Server插件，这是VS Code中常用的HTML运行插件
- 右键点击编辑区域的空白处，选择Open with Live Server选项
- 插件会自动启动一个本地服务器，并且在默认浏览器中打开你的HTML页面，修改代码后页面会自动刷新
这种方式的好处是修改代码后不需要手动刷新浏览器，页面会自动同步更新，提升开发效率。
<!-- 简单的HTML示例代码 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
</head>
<body>
<h1>这是测试内容</h1>
<p>运行后可以在浏览器看到这段文字</p>
</body>
</html>
方法三：搭建本地服务器运行
如果你的HTML页面涉及到AJAX请求、跨域资源访问等场景，直接用浏览器打开本地文件会报错，这时候就需要搭建本地服务器来运行。
使用Node.js搭建简单服务器
首先确保你已经安装了Node.js，然后按照以下步骤操作：
- 在项目文件夹下打开终端，执行命令安装http-server工具：
npm install -g http-server - 安装完成后，在终端执行
http-server命令 - 终端会显示服务器启动的地址，一般是
http://127.0.0.1:8080，在浏览器中访问这个地址就可以看到你的HTML文件列表，点击对应的文件即可运行
# 安装http-server npm install -g http-server # 启动服务器 http-server # 输出示例 Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.0.1:8080 Hit CTRL-C to stop the server
常见问题及解决办法
| 常见问题 | 解决办法 |
|---|---|
| 浏览器打开后页面显示空白 | 检查HTML代码是否有语法错误，比如标签没有闭合，或者文件路径引用错误 |
| 本地图片无法加载 | 确认图片路径是否正确，使用相对路径时注意文件层级关系，或者改用本地服务器运行 |
| 修改代码后浏览器没有更新 | 如果是直接打开本地文件，需要手动刷新浏览器；如果是用Live Server运行，检查插件是否正常工作 |
掌握以上几种运行HTML代码的方法，基本可以满足日常前端开发的需求，你可以根据自己的开发场景选择合适的方式。