输入简短缩写按Tab可快速生成HTML，如div.container创建带类名的div，ul>li*3生成三个列表项，!生成HTML5模板，支持属性[a[href="#"]]和文本{Hello}填充，VSCode中需确保Emmet启用并正确设置语言模式。
在VSCode中使用Emmet快捷键能大幅提升编写HTML的效率。只要输入简短的缩写，按Tab或Enter就能生成完整的HTML结构。
基本语法与常用缩写
Emmet基于CSS选择器的语法，支持嵌套、重复、编号等操作。
-
生成标签：输入
div后按Tab，会变成 -
添加类名：输入
div.container，生成带class的div -
添加ID：输入
nav#main-nav，生成指定ID的元素 -
父子嵌套：用
>符号，如ul>li*3生成无序列表包含3个列表项 -
兄弟并列：用
+，如h1+p生成标题和段落 -
重复元素：用
*，如section*2生成两个section -
自动编号：在*后面自动递增数字，
li.item$*3生成item1、item2、item3
快速生成完整页面结构
输入!或html:5再按Tab，就能快速创建标准HTML5模板：
属性与文本填充
Emmet也支持直接设置属性和内容。
立即学习“前端免费学习笔记（深入）”；
-
添加属性：用
[]，如a[href="#"][title="link"] -
添加文本：用
{}，如p{Hello World}生成带文字的段落 -
组合使用：如
ul>li*3>a[href="#"]{Item $}生成三个带链接的列表项
VSCode中的实用技巧
确保Emmet在VSCode中正常工作，注意以下几点：
- 默认情况下Emmet已启用，输入缩写后按Tab即可展开
- 如果Tab被其他功能占用，可改用Enter
- 在非HTML文件中（如JSX），需确认语言模式正确，Emmet才会生效
- 可通过设置
"emmet.triggerExpansionOnTab": true确保Tab可用
基本上就这些。熟练掌握几个常用缩写后，写HTML会快很多，不用反复打标签了。
