WebStorm作为JetBrains推出的专业前端开发IDE，对HTML文件的运行支持非常完善，开发者可以通过多种方式快速在浏览器中预览HTML页面效果，下面详细介绍具体的操作方法。
方法一：右键直接运行HTML文件
这是最基础也最常用的运行方式，操作步骤非常简单：
- 在WebStorm的项目目录中找到需要运行的HTML文件
- 右键点击该HTML文件，在弹出的菜单中选择Run '文件名.html'选项
- WebStorm会自动调用系统默认浏览器打开该HTML页面，同时底部会显示运行日志
如果系统没有默认浏览器，或者想指定使用某个浏览器运行，可以先在WebStorm中配置默认浏览器：打开File - Settings - Tools - Web Browsers，勾选需要使用的浏览器并设置为默认即可。
方法二：通过运行配置自定义运行参数
如果需要自定义运行参数，比如指定端口、添加启动参数，可以通过运行配置实现：
- 点击顶部菜单栏的Run - Edit Configurations
- 在弹出的窗口中点击左上角的加号，选择JavaScript Debug或者HTML File
- 在配置页面中填写HTML文件的路径，选择需要使用的浏览器，还可以设置额外的启动参数
- 点击Apply保存配置后，点击右上角的运行按钮即可启动
方法三：使用内置服务器运行
WebStorm内置了简单的HTTP服务器，适合需要模拟服务器环境的场景，操作如下：
- 右键点击HTML文件，选择Open in Browser，然后选择Built-in Server
- 此时页面会通过
http://localhost:63342/项目名/文件路径的地址打开，支持相对路径的资源加载
内置服务器的默认端口是63342，如果需要修改端口，可以在Settings - Build, Execution, Deployment - Debugger中修改Built-in server port的值。
常见问题排查
1. 点击运行后浏览器没有反应
首先检查WebStorm中是否配置了可用的浏览器，如果浏览器路径错误会导致无法启动。可以在Settings - Tools - Web Browsers中重新指定浏览器的可执行文件路径，比如Chrome的默认路径在Windows下是C:Program FilesGoogleChromeApplicationchrome.exe。
2. 页面资源加载失败
如果是使用内置服务器运行，需要确认资源的引用路径是相对路径，避免使用绝对路径。如果是直接打开本地文件，浏览器会因为安全策略限制部分资源的加载，此时建议使用内置服务器运行。
3. 修改代码后页面没有更新
可以在浏览器中开启强制刷新，Windows下按Ctrl+F5，Mac下按Cmd+Shift+R。也可以在WebStorm中开启自动保存，在Settings - Appearance & Behavior - System Settings中勾选Save files on frame deactivation，切换窗口时自动保存代码。
代码示例：简单HTML文件测试
可以创建一个简单的HTML文件测试运行效果，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebStorm运行测试</title>
</head>
<body>
<h1>WebStorm运行HTML测试</h1>
<p>如果能在浏览器中看到这段内容，说明运行成功</p>
<script>
// 控制台输出测试信息
console.log("WebStorm运行HTML成功");
</script>
</body>
</html>