WebStorm新建HTML文件为空或结构不全，根本原因是未正确识别HTML类型、Emmet未启用或模板配置错误；需确保右键选“HTML File”、勾选“Enable Emmet for HTML”，并自定义模板添加viewport和CDN。
WebStorm 新建 HTML 文件本身不难，但新手常卡在“点了新建却没生成结构”“写了 ! 按 Tab 没反应”“生成了但缺 viewport 或 CDN”这几处——根本不是软件问题，而是 Emmet 未启用、模板被改坏、或路径配置错位导致的。
为什么新建 HTML 文件后是空的，或者只有一行 <!DOCTYPE html>
这是最常见误解：WebStorm 默认确实会生成完整 HTML5 结构，但前提是文件类型被识别为 HTML File，且 Emmet 处于启用状态。如果右键新建选的是 File 而非 HTML File，它就真只是个空白文本文件；如果在空文件里输 ! 按 Tab 没反应，大概率是 Emmet 被关了。
- 检查路径：
Settings→Editor→General→Emmet，确认勾选了Enable Emmet for HTML - 新建时务必右键目录 →
New→HTML File（不是File） - 若已建错，可手动在空文件中输入
html:5再按Tab，也能触发 Emmet 补全
如何让每次新建都自动带 <meta name="viewport"> 和 Bootstrap CDN
默认模板不包含这些，硬记或手敲容易漏。直接改模板最稳妥，但别动原始模板——先复制一份再改，避免后续升级或重置出问题。
- 路径：
Settings→Editor→File and Code Templates→Files→ 找到HTML File，点右侧Copy - 在新模板里粘贴以下内容（注意保留
${PROJECT_NAME}和${NAME}变量）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${NAME}</title>
<!-- CDN: bootstrap@5.3.2 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p></body>
</html>保存后，下次新建就自动带上了。CDN 地址写死更可靠，比本地 node_modules 引用不易因路径错乱报 404。
!+Tab 不生效？检查这三处关键设置
这个快捷键依赖多个开关同时打开，缺一不可。很多教程只说“按 Tab”，却不提前置条件。
-
Settings→Editor→General→Emmet→ 确保Enable Emmet for HTML已勾选 -
Settings→Editor→Live Templates→ 展开HTML→ 确认!模板状态为 enabled（右侧开关是蓝色） - 文件后缀必须是
.html—— 如果当前文件名是index没加后缀，WebStorm 不识别语言类型，Emmet 就不会响应
生成的 HTML 在浏览器打不开？路径和预览方式搞错了
WebStorm 自带的“在浏览器中打开”功能（右键 → Open in Browser）只适用于静态文件，且要求路径不能含中文、空格或特殊符号。很多小白把项目建在 桌面\我的网页 这类路径下，一点击就白屏或报错。
- 项目根目录建议设在纯英文路径下，例如
C:\projects\my-site或~/dev/my-site - 不要双击 HTML 文件用系统默认浏览器打开（可能加载不到相对路径的 CSS/JS），而要用 WebStorm 的
Open in Browser或启动内置服务器 - 更推荐：右键 HTML 文件 →
Copy Path/Reference→ 粘贴进浏览器地址栏，确保看到的是file:///开头的绝对路径，而不是http://
真正容易被忽略的，是模板里写的 src="/node_modules/xxx" 这类路径——它依赖本地开发服务器（如 Vite 或 Webpack）才能解析，直接双击打开必然 404。静态页就老实用 CDN 或相对路径，比如 ./js/main.js。
