intellij idea 新建 html5 项目需配置 static web 项目结构、启用 ecmascript 6+ 和 html5 schema、引入 lib.dom.d.ts 库、正确关联 js 文件并启用 live edit，最后刷新缓存确保语法识别与 api 提示生效。
如果您在 IntelliJ IDEA 中新建 HTML5 项目后无法正确识别 HTML5 语法、JS 标签未高亮、API 调用无提示或页面无法正常运行，则可能是项目配置缺失、SDK 未关联或文件类型映射错误。以下是解决此问题的步骤：
一、创建正确的 HTML5 项目结构
IntelliJ IDEA 默认不提供纯 HTML5 项目模板，需通过静态 Web 项目模拟 HTML5 开发环境，并手动启用相关语言支持。确保项目根目录包含标准 Web 资源路径，以便编辑器识别 HTML、CSS 和 JavaScript 文件上下文。
1、启动 IDEA，点击 New Project。
2、在左侧选择 Static Web，取消勾选“Create project from template”。
立即学习“前端免费学习笔记（深入）”；
3、设置项目名称和路径，点击 Finish。
4、右键项目根目录 → New → Directory，依次创建 css、js、images 文件夹。
5、右键项目根目录 → New → HTML File，命名为 index.html。
二、启用 HTML5 和 ECMAScript 6+ 支持
IDEA 需明确指定 JavaScript 语言版本并启用 HTML5 Schema，否则标签属性（如 contenteditable、data-*）、新 API（如 fetch、Promise）将无语法提示或校验。
1、进入 File → Settings（Windows/Linux）或 IntelliJ IDEA → Preferences（macOS）。
2、展开 Languages & Frameworks → JavaScript，将 JavaScript language version 设置为 ECMAScript 6+ 。
3、展开 Languages & Frameworks → HTML，勾选 Enable HTML5 schema。
4、点击 Apply 并 OK。
三、配置 JS 文件以支持浏览器 API 智能提示
IDEA 默认不内置浏览器全局对象（如 window、document、fetch、localStorage）的类型定义，需手动引入 DOM 库支持，否则调用 API 时无自动补全与类型检查。
1、进入 File → Project Structure → Libraries。
2、点击 + 号 → Java → 选择 IDEA 安装目录下的 lib/JavaScriptLanguage/lib/typescript/lib.dom.d.ts（路径可能为 plugins/JavaScriptLanguage/lib/typescript/lib.dom.d.ts）。
3、在弹出窗口中，勾选 Attach sources 和 Attach Javadoc（若存在）。
4、点击 OK，确保该库作用域为 Project Libraries。
四、配置 HTML 文件关联 JS 并启用实时预览
HTML 中 script 标签引用外部 JS 文件后，IDEA 需正确解析路径并激活语法联动；同时启用内置服务器可快速验证页面行为。
1、在 index.html 的
中添加： 。2、在
底部添加：<script src="js/main.js"></script>。3、右键 js 目录 → New → JavaScript File，命名为 main.js。
4、安装插件：File → Settings → Plugins，搜索并启用 JetBrains IDE Support（用于 Chrome 调试）及 Live Edit（需搭配 JetBrains IDE Support 使用）。
5、右键 index.html → Open in Browser → Chrome（需已安装 Chrome 浏览器）。
五、修复常见标签与 API 识别异常
当
1、进入 File → Invalidate Caches and Restart → Invalidate and Restart。
2、重启后，进入 Settings → Editor → File Types，查找 HTML Files，确认 Registered Patterns 中包含 *.html。
3、在 same 页面下拉至 JavaScript Files，确认 Registered Patterns 包含 *.js。
4、打开 main.js，输入 document.querySelector，观察是否出现参数提示；若无，检查第三步中 DOM 库是否已加载成功。
