sublime text 中输入 ! 并按 tab 可快速生成 html5 基础结构，含 doctype、html、head（含 utf-8 meta）和 body；div.container>ul>li*3 等缩写支持嵌套与重复，但需确保文件类型为 html 且无多余空格。
Sublime Text 用 Emmet 写 HTML，根本不用手动敲 这套 boilerplate —— 只要输入 ! 再按 Tab，立刻生成完整基础结构。
输入 ! 就能生成标准 HTML5 文档结构
这是 Emmet 最常用也最容易被忽略的快捷入口。不是 html:5（旧写法），也不是 html，就是单独一个叹号 !。
- 光标定位在空行，输入
!，按Tab（或Ctrl+E，取决于你的键位设置） - 会自动展开为包含
、<code>、（含<meta charset="UTF-8">）、的完整结构 - 如果当前文件已关联为 HTML 类型（右下角显示
HTML），Emmet 才会生效；否则先按Ctrl+Shift+P→ 输入Set Syntax: HTML
用 div.container>ul>li*3 一次性写出嵌套列表
Emmet 的核心是「缩写语法」，不是模板拼接。符号含义固定：> 表示子元素，* 表示重复，. 表示 class，# 表示 id。
-
div.container>ul>li*3→ 展开后是带 class 的三层嵌套，li恰好生成 3 个 -
section#main>p.text$*2→$是序号变量，生成<p class="text1"></p>和<p class="text2"></p> - 别手抖多打空格：
div .container（中间有空格）会被当成两个独立标签，不会加 class - 如果展开失败，大概率是当前作用域没启用 Emmet —— 检查是否在 HTML 或 JSX 文件中，且未被其他插件禁用
Emmet 默认不支持自定义标签或 Vue/Svelte 语法
Emmet 内置规则只覆盖标准 HTML 标签和常见属性。像 <mycomponent></mycomponent> 或 <template></template> 这类非 HTML 标准标签，原生不识别。
立即学习“前端免费学习笔记（深入）”；
- Vue 单文件组件里写
template>div，需要先确保文件类型设为Vue Component，并安装Emmet for Vue类扩展（纯 Sublime 自带 Emmet 不处理<template></template>） - 想让
btn展开成<button class="btn"></button>？得手动编辑Preferences → Package Settings → Emmet → Settings – User，添加"abbreviations"自定义映射 - JSX 中
div.my-class能用，但div.my-class{hello}（花括号插值）不会渲染成className属性 —— Emmet 不做运行时转换
真正卡住人的往往不是语法记不住，而是文件类型没切对、缩写中间多了空格、或者以为 Emmet 能智能猜框架。它只是高效文本展开器，不是 AI 代码生成器。
