IntelliJ IDEA 中 HTML5 文件可借助内置浏览器、外部浏览器、内置 HTTP 服务器或 Live Edit 插件实现预览：一、右键选 Open in Built-in Preview；二、配置外部浏览器后右键打开；三、通过 JavaScript Debug 配置本地服务器访问；四、安装 Live Edit 插件实现保存即刷新。
如果您在 IntelliJ IDEA 中编写 HTML5 文件，但无法直接查看其运行效果，则可能是由于未正确配置内置浏览器或缺少必要的预览插件。以下是实现 HTML5 文件在 IDEA 中实时预览的多种方法：
一、使用 IDEA 内置浏览器预览
IntelliJ IDEA 自带轻量级内置浏览器（基于 JavaFX WebView），无需启动外部程序即可快速查看 HTML 渲染效果，适用于基础结构与样式验证。
1、确保 HTML 文件已保存，且文件扩展名为 .html 或 .htm。
2、在项目文件树中右键点击目标 HTML 文件。
立即学习“前端免费学习笔记（深入）”；
3、在弹出菜单中选择 Open in Browser → Open in Built-in Preview。
4、IDEA 右侧或新标签页中将自动打开内置预览窗口，支持刷新（Ctrl+R）和缩放。
二、配置并使用外部浏览器预览
通过绑定 Chrome、Firefox 或 Edge 等主流浏览器，可获得完整的 HTML5 运行环境（含 JavaScript 调试、响应式工具等），适合开发阶段深度测试。
1、进入 File → Settings → Tools → Web Browsers（Windows/Linux）或 IntelliJ IDEA → Preferences → Tools → Web Browsers（macOS）。
2、在浏览器列表中勾选已安装的浏览器，如 Google Chrome，并确认路径正确。
3、返回 HTML 文件编辑界面，右键文件，选择 Open in Browser → Chrome（或其他已启用浏览器）。
4、浏览器将以本地文件协议（file://）方式打开页面；若需完整服务器行为（如 AJAX 请求），应配合内置服务器使用。
三、启用内置静态服务器并预览
当 HTML5 页面依赖相对路径资源（CSS/JS 图片）、AJAX 或 Service Worker 时，直接双击打开会因 file:// 协议限制导致跨域或加载失败，此时需启用 IDEA 内置 HTTP 服务器模拟真实环境。
1、在 HTML 文件编辑器右上角点击绿色三角形图标旁的下拉箭头，选择 Edit Configurations…。
2、点击左上角加号（+），选择 Templates → JavaScript Debug。
3、在右侧配置中，将 URL 字段填写为 http://localhost:63342/your-project-name/path/to/file.html（端口默认为 63342，路径需与项目结构一致）。
4、点击 OK 保存，再点击绿色三角形运行该配置，IDEA 将自动启动服务并在默认浏览器中打开对应 URL。
四、安装并使用 Live Edit 插件实现热更新预览
Live Edit 插件可监听 HTML/CSS/JavaScript 文件变更，并在已打开的浏览器中自动刷新或局部更新 DOM，显著提升前端调试效率。
1、进入 File → Settings → Plugins，搜索 Live Edit，点击安装并重启 IDEA。
2、确保已通过“外部浏览器”方式在 Chrome 中打开了目标 HTML 页面（需启用 Chrome 的远程调试端口）。
3、在 HTML 编辑器中修改任意内容后保存（Ctrl+S），IDEA 底部状态栏将显示 Live Edit connected，页面自动刷新或热重载。
4、如需手动触发，可右键编辑器空白处，选择 Reload page in browser。
