WebStorm新建HTML项目应选Static Web模板而非Empty Project，以自动生成含index.html、styles.css、script.js的标准骨架并启用内置HTTP服务（默认端口63342），确保CSS/JS正常加载和热重载；右键“Open in Browser”仅用file://协议易触发CORS，须点击绿色三角形▶️或Ctrl+Shift+F10启动服务。
直接双击保存的 index.html 文件就能在浏览器里打开，但这样无法加载本地 CSS/JS 文件（会触发 CORS 或路径错误），也不能预览动态行为——用 WebStorm 自带服务器才是零基础最稳的起步方式。
WebStorm 新建 HTML 项目时必须选对模板
新建项目不要点 “Empty Project”，否则没有默认 HTML 结构和服务器支持。正确路径是：File → New Project → Static Web → Next → 填写项目名和路径 → Finish。这会自动生成含 index.html、styles.css、script.js 的标准骨架，并启用内置 HTTP 服务。
- 如果误选了 Empty Project，后续要手动创建
index.html，且需右键文件 → “Open in Browser” 才能预览（仍不支持本地资源跨域） - “Static Web” 模板底层调用的是 WebStorm 内置的 lightweight HTTP server，端口默认为 63342，无需额外配置 Node.js 环境
- 别选 “HTML” 单文件模板——它只建一个空 HTML，不带配套样式和脚本文件，对初学者反而更难组织
运行前必须确认编码和文件后缀
中文乱码、样式不生效、点击无反应，八成出在这两处。WebStorm 默认用 UTF-8 编码，但如果你从记事本复制粘贴过代码，或保存时没选对格式，就容易崩。
- 检查右下角状态栏：显示 “UTF-8” 是正常；若显示 “GBK” 或 “ISO-8859-1”，点它 → “Reload as UTF-8”
-
index.html文件名必须以.html结尾，不能是.txt或无后缀；Windows 资源管理器默认隐藏扩展名，务必在文件夹选项中勾选“显示文件扩展名” - 在
<head>中确认有这行：<meta charset="UTF-8">，缺了它，中文标题、段落全变方块
右键 “Open in Browser” 和 “Run” 的本质区别
很多新手以为点右键菜单里的 “Open in Browser” 就等于启动服务，其实不是。这个操作只是用系统默认浏览器打开本地 file:// 协议地址，所有相对路径（如 href="style.css"）在 Chrome/Firefox 下会被拦截——报错 net::ERR_FILE_NOT_FOUND 或样式空白。
- 真正可靠的方式是点右上角绿色三角形 ▶️（或按
Ctrl+Shift+F10），它会启动 WebStorm 内置服务，地址形如http://localhost:63342/your-project-name/index.html - 该地址下，CSS/JS 图片等相对路径全部可解析，且支持热重载（改完保存自动刷新）
- 如果点 ▶️ 后浏览器打不开，检查是否被杀毒软件拦截了端口 63342，或换用 Chrome（Edge 有时对本地服务响应慢）
最容易被忽略的一点：WebStorm 的内置服务只对当前项目根目录下的文件生效。把 index.html 放在子文件夹里（比如 /src/index.html），再点 ▶️ 运行，浏览器打开的仍是根目录，路径就断了——要么把 HTML 放到项目根，要么右键该文件单独 “Run”，它会生成对应子路径地址。
