!+tab 是最通用的 html5 骨架生成方式，输入 ! 后按 tab 即生成含 doctype、charset、viewport 和 lang 的标准结构，但需确保文件为 html 语法、emmet profile 设为 html5，并检查三处硬性节点：doctype 必为首行、charset 必在 viewport 前、lang 需按实际语言显式声明。
! + Tab 是最通用的 HTML5 骨架生成方式
几乎所有主流编辑器（VS Code、Sublime Text、WebStorm）都默认支持 Emmet，只要文件后缀是 .html 且语法识别为 HTML，输入 ! 再按 Tab 就能生成完整骨架。这个缩写等价于 html:5，但更短、更不容易输错。
常见错误现象：
- 按了
Tab没反应 → 文件未设为 HTML 语法（Sublime 中需手动执行Set Syntax: HTML；WebStorm/VS Code 通常靠后缀自动识别） - 生成的是 XHTML 或 HTML4 结构 → 检查 Emmet 的 HTML profile 是否设为
html5（WebStorm 在Settings > Editor > Emmet > HTML中调整） - 生成内容缺
lang或viewport→ 这不是 bug，是 Emmet 默认行为；后续需手动补全或自定义模板
VS Code 和 Sublime 的 Emmet 行为差异
VS Code 默认启用 emmet.triggerExpansionOnTab，且对 .html 文件自动激活；Sublime 则依赖 Package Control 安装的 Emmet 插件是否启用。两者都要求光标必须在空行开头、无前置空格，否则 ! 不会被识别为缩写。
关键参数差异：
-
lang属性：VS Code 默认输出lang="en"；Sublime 默认同理，但可通过修改 Emmet 配置或自定义 snippet 覆盖 -
charset和viewport顺序：Emmet 严格按 HTML5 规范生成，charset必须在viewport前；若顺序颠倒，Lighthouse 会报charset not declared - 缩写兼容性：
html:5在所有版本都可用，!在较老版本 Sublime 中可能需更新 Emmet 插件
生成后必须检查的三个硬性节点
骨架生成只是起点，浏览器解析行为对这几处极其敏感，漏掉任一都会引发实际渲染问题：
必须是文件第一行，前面不能有任何字符（包括 BOM、空格、注释），否则触发 Quirks Mode，导致 <code>box-sizing、margin: 0 auto失效-
<meta charset="UTF-8">必须出现在最靠前位置（在viewport之前），否则中文可能乱码，且 Lighthouse 直接扣分 -
若页面面向中文用户，必须显式声明，不能依赖浏览器默认；lang="en"会导致屏幕阅读器发音错误、SEO 语义弱化
自定义模板比临时修改更可靠
每次手改 lang 或加 favicon 很低效。WebStorm 和 VS Code 都支持编辑 HTML File 模板：WebStorm 在 Editor > File and Code Templates > Files > HTML File；VS Code 需配合插件（如 HTML Boilerplate）或配置 emmet.variables。Sublime 则推荐直接修改 Emmet.sublime-settings 中的 snippets 字段。
容易被忽略的细节：
- 模板里写的
<title>{{title}}</title>不会自动替换，只是占位符；真要动态注入需构建工具配合 - 加 CDN 的
<link>或<script></script>可写进模板，但要注意加载顺序 —— CSS 必须在viewport后、JS 应在前 - 用
<header></header>替代<div class="header"> 不是可选项，而是语义化刚需；Lighthouse 会检测结构合理性，纯 <code>div堆砌影响可访问性和 SEO
