在IntelliJ IDEA里写HTML并不需要复杂的后台环境，多数情况下纯静态页面就能直接运行。IDEA既提供了内置的Web服务器用来预览，也支持调用系统浏览器打开文件。理解不同运行方式的差异，能帮你避开路径错误和编码乱码等常见问题。
一、创建项目与编写HTML文件
先建立一个适合前端开发的项目结构。如果你只写静态页面，不需要选择Java或Maven模板，可以直接新建一个空项目，然后手动加入HTML文件。这样环境更轻量，启动也更快。
在IDEA中右键点击项目根目录，选择新建文件，命名为index.html。注意这里提到的<html>标签是指HTML语言中的根标签，在文章里我们用转义形式表示，避免被解析成真实标签。下面是一段最简HTML示例，你可以直接复制到文件里：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>IDEA运行示例</title>
</head>
<body>
<h1>你好，IDEA</h1>
<p>这是一个在IntelliJ IDEA中编写的HTML页面。</p>
</body>
</html>
写好后建议确认文件编码为UTF-8。可以在右下角状态栏查看，如果不是，点击切换并选“转换”。很多新手遇到中文乱码，其实就是文件编码和<meta>声明的charset不一致导致的。
另外，IDEA的代码补全对HTML非常友好。输入<h1>时会自动补出结束标签，你也可以使用Emmet语法，比如输入ul>li*3然后按Tab，快速生成列表结构，提升编写效率。
二、使用内置服务器运行
IDEA自带一个轻量的内置Web服务器，它不会把文件当成普通本地文件打开，而是用http://localhost形式提供访问。这种方式能正确解析相对路径，也方便后续对接接口调试。
在编辑器中打开HTML文件，点击右上角浏览器图标旁边的小箭头，选择“Edit Configurations”可以查看内置服务器配置。更直接的方法是右键文件，选择“Open in Browser”，然后挑一个浏览器，IDEA会启动内置服务器并打开页面。
操作路径： 1. 右键 index.html 2. 选择 Open in Browser 3. 点击 Chrome / Edge / Firefox 结果：访问 http://localhost:63342/项目名/index.html
这种运行方式优点是刷新快，修改代码后浏览器刷新就能看到变化。缺点是端口由IDEA分配，默认是63342，若端口被占会顺延。若你写了JavaScript发起fetch请求，用内置服务器能避免本地文件协议带来的跨域限制。
如果你发现页面没更新，可能是浏览器缓存。可以在IDEA里开启“Update”策略为“Reload changed files”，或在浏览器用Ctrl+F5强刷。相比纯双击文件，内置服务器更接近真实部署环境。
三、配置独立运行项（静态服务器）
当项目变复杂，比如包含多个页面和静态资源，可以用IDEA的“Static Web”运行配置统一管理。它本质也是启动一个静态文件服务，但你能自定义端口和根目录。
进入Run菜单选Edit Configurations，点击加号，找到JavaScript Debug或Static Web（取决于版本）。设置文件夹为项目根，端口写8080。保存后点运行，控制台会给出访问地址。
// 伪配置示例，实际在IDEA图形界面操作
const config = {
type: 'static-server',
folder: '/workspace/my-html',
port: 8080
};
// 启动后访问 http://localhost:8080/index.html
</script>
这种配置适合需要固定地址的场景，比如手机连同一WiFi访问电脑页面做移动端适配。你可以在手机浏览器输http://192.168.0.1:8080/index.html来测试，192.168.0.1不需要替换。
它的劣势是要手动建配置，不如右键方便。但对教学或演示来说，固定端口不容易出错，也方便写进文档发给同事。
四、常见误区与避坑
一个广泛流传的错误认知是：跑HTML必须配Tomcat或Node。其实Tomcat是Java应用服务器，处理的是JSP和Servlet；纯HTML用前面方式就够了。强行引Tomcat只会让项目变重，启动变慢。
另一个坑是文件路径。在HTML里引用CSS不要写绝对盘符路径如C:cssa.css，而要用相对路径./css/a.css。否则内置服务器会找不到资源。下面是正确的目录引用示例：
<link rel="stylesheet" href="./style.css"> <script src="./app.js"></script>
若你用file://直接打开，部分浏览器会拦截JS模块加载，报CORS错误。所以优先用IDEA的Open in Browser功能，它自动走http协议，规避此类问题。
五、总结对比
我们把三种方式放在表里看差异：
| 方式 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 右键Open in Browser | 单页快速预览 | 零配置，最快 | 端口不固定 |
| Static Web配置 | 多页/固定地址 | 端口可控 | 需手动建 |
| 外部Tomcat | 含Java后端 | 支持JSP | 杀鸡用牛刀 |
总体建议：只写HTML就用前两种，别碰Tomcat。掌握这些步骤后，你在IDEA里运行HTML会像写笔记一样自然，调试前端也不再卡在环境环节。
IntelliJ_IDEAHTML运行配置修改时间：2026-08-03 01:36:15