空文件首行输入!后按Tab即可生成标准HTML5骨架，依赖默认开启的Emmet插件，输出含<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body></body>，光标定位在<title>内。
空文件里输 ! 再按 Tab 就能生成 HTML5 骨架
这是最快、最可靠的起步方式，不需要任何配置前置动作，只要 Emmet 插件开着（WebStorm 默认开启）。生成结果是干净的最小可用结构：<!DOCTYPE html>、<html lang="en">、<head>含<meta charset="UTF-8">和<title></title>、<body></body>，没冗余 script 或 viewport。
常见错误包括：
- 在非首行或已有内容后输
!→ 只会补局部片段，甚至触发其他 Emmet 行为 - 误用
html:5或html:4s→ 这些旧写法可能带过时 meta 或 doctype，且在部分新版 WebStorm 中已弱支持 - 光标不在行首 → 补全失败或生成错位标签
失效时优先检查：Settings → Editor → General → Emmet 是否勾选了 Enable Emmet for HTML。
别依赖右键 New → HTML File 做日常新建
右键菜单新建确实能出基础结构，但效率低、路径控制弱、不支持模糊匹配。真正高频场景下，Ctrl+Shift+N（macOS 是 Cmd+Shift+O）才是主力：
立即学习“前端免费学习笔记（深入）”；
- 输
ind就能命中index.html，不用拼全名 - 输
src/views会直接跳转到该目录，再敲文件名即可新建 - 已打开的文件自动置顶，适合边写
Home.vue边建Home.test.html - 默认不搜隐藏文件（如
.htaccess），要搜必须用完整搜索：Ctrl+Alt+Shift+N
自定义模板时，viewport 和 CDN 别写死
很多人把 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 或 Bootstrap CDN 直接塞进模板，短期省事，长期埋雷：
- 硬编码版本号（如
bootstrap@5.3.2）→ 模板一用就过期，团队不同步时容易引入不兼容行为 - 写死相对路径（如
../css/reset.css）→ 在子目录新建文件时路径立刻失效 -
script src="/node_modules/xxx"→ Vite/Webpack 开发服务器下根本不存在这个路径，运行即 404
更稳妥的做法是用占位符：<!-- VIEWPORT --> 或 <!-- CDN: bootstrap@latest -->，靠构建脚本或团队约定注入，而不是让 IDE 模板承担版本和部署逻辑。
改模板前务必点 Copy 备份原模板
Settings → Editor → File and Code Templates → Files → HTML File 这个入口看着简单，但改崩了会导致所有新建 HTML 文件结构异常，且没有“恢复默认”按钮。
真实踩坑点：
- 改完没测试就关设置 → 新建文件空白或报错，排查半天才发现是模板语法错误（比如漏了
$或变量名写错） - 覆盖原模板后想回退 → 只能重装 WebStorm 或手动从备份配置里抠，没备份就只能手敲
- 变量如
${NAME}、${DATE}能用，但${PROJECT_NAME}在某些项目类型下为空，别盲目依赖
复杂点在于：模板生效是全局的，影响所有项目；而不同项目对骨架的要求可能完全不同——一个用 Vite 的项目不该和一个纯静态站点共享同一套 HTML 模板。
