emmet严格绑定tab键展开缩写,enter仅换行;需确保右下角显示html语法、文件已保存为.html后缀,且缩写格式正确(如div.container无空格、属性用方括号、嵌套用>而非+)。

输入缩写后按Tab才生效,不是Enter
很多人输完div.container>ul>li*3就按Enter,结果只换行——Emmet严格绑定Tab键展开,Enter永远只是换行。这是最常卡住的点,和语法无关,纯操作习惯问题。
如果Tab没反应,先检查右下角状态栏是否显示HTML(不是Plain Text或JavaScript),再确认文件后缀是.html;.htm有时不被识别为HTML语法。
-
div.container>ul>li*3→ 生成带class="container"的div,里面嵌套ul,再含3个li -
section#main>p.text$*2→$是序号变量,生成<p class="text1"></p>和<p class="text2"></p> - 中间不能有空格:
div .container(带空格)会被解析成两个独立标签,不会加class
class和id写法必须紧贴标签名,无空格
Emmet把.和#当作语法符号,不是CSS选择器的视觉等价物。它要求div.container,而不是div .container;div#app合法,div #app会报no matching abbreviation。
多个class用连续点号:div.header.main.nav → <div class="header main nav"></div>;混用id和class:div#page.header → <div id="page" class="header"></div>。
- 属性必须用方括号:
div[lang="zh-CN"]→<div lang="zh-CN"></div> - 文本内容用花括号:
h1{标题}→<h1>标题</h1> - 重复+文本组合:
li.item$*3{菜单项$}→<li class="item1">菜单项1</li>等
嵌套层级用>,并列用+,别混淆
>表示父子关系,+表示同级兄弟。写错符号会导致结构完全不对:比如header+main+footer生成三个并列块,而header>main>footer会变成header里套main,main里再套footer——这显然不是你想要的页面骨架。
-
nav>ul>li*5>a→ 导航内列表,每个li包一个a -
div#header+div.content+div#footer→ 三个同级div,分别带id和class -
table>tr*2>td*3→ 2行3列表格,>逐层深入,不能写成table+tr*2+td*3
自定义缩写要改JSON,别在GUI里瞎填
想让myheader展开成<header class="site-header"></header>?别在设置界面乱点。正确路径是:Preferences → Package Settings → Emmet → Settings – User,然后写:
{
"snippets": {
"html": {
"abbreviations": {
"myheader": "<header class='\"site-header\"'></header>"
}
}
}
}
注意:"html"是语法作用域名,写成"htm"或"html5"无效;双引号必须转义为\",否则JSON解析失败,Emmet会静默禁用整个自定义片段;改完不用重启,但已输完的myheader不会重解析,得删掉重打再按Tab。
真正容易被忽略的是:Sublime Text 3/4 默认已内置Emmet,装第三方Emmet插件反而可能冲突,导致Tab失效或报KeyError: 'html'。确认是否启用,优先查Preferences → Package Settings → Emmet → Settings是不是空文件——非空就说明你手动改过,很可能引入了废弃字段。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











