输入简短缩写按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></div> - 添加类名：输入
div.container，生成带class的div - 添加ID：输入
nav#main-nav，生成指定ID的元素 - 父子嵌套：用
>符号，如ul>li*3生成无序列表包含3个列表项 - 兄弟并列：用
+，如h1+p生成标题和段落 - 重复元素：用
*，如section*2生成两个section - 自动编号：在*后面自动递增数字，
<div></div>0生成item1、item2、item3
快速生成完整页面结构
输入<div></div>1或<div></div>2再按Tab，就能快速创建标准HTML5模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
属性与文本填充
Emmet也支持直接设置属性和内容。
立即学习“前端免费学习笔记（深入）”；
- 添加属性：用
<div></div>3，如<div></div>4 - 添加文本：用
<div></div>5，如<div></div>6生成带文字的段落 - 组合使用：如
<div></div>7生成三个带链接的列表项
VSCode中的实用技巧
确保Emmet在VSCode中正常工作，注意以下几点：
- 默认情况下Emmet已启用，输入缩写后按Tab即可展开
- 如果Tab被其他功能占用，可改用Enter
- 在非HTML文件中（如JSX），需确认语言模式正确，Emmet才会生效
- 可通过设置
<div></div>8确保Tab可用
基本上就这些。熟练掌握几个常用缩写后，写HTML会快很多，不用反复打标签了。
css vscode html js html5 ai html文件 css选择器 html5 css html class href 选择器 ul li vscode