输入!或html:5按Tab生成HTML5结构，用>、+、^实现嵌套与同级关系，.、#、[]快速添加类、ID和属性，CSS中m10等简写提升样式编写效率。
VSCode中的Emmet功能能极大提升HTML和CSS的编写效率，通过简写形式快速生成完整代码。只要在HTML或支持的语言文件中输入特定缩写，按Tab或Enter就能展开成结构化标签。
基本HTML结构生成
输入!或html:5，然后按Tab，就会自动生成标准的HTML5文档结构：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>
</body>
</html>
嵌套与父子关系
使用>表示嵌套（子元素），+表示同级（兄弟元素），^向上跳出一层。
例子：
- div>ul>li*3 → 生成一个div包含一个ul，里面有3个li
- header+main+footer → 生成三个并列的块级标签
- div>p^span → p在div内，span在div外与div同级
类、ID与属性快速添加
用.定义class，#定义id，[属性=值]添加自定义属性。
常见写法：
- div.container#myId → <div class=”container” id=”myId”></div>
- a[href=”#”][title=”link”]{点击} → 带属性和文本内容的链接
- input[type=”text”].form-control → 输入框加类名
CSS中的Emmet简写
在CSS文件里也能用Emmet快速写样式。例如输入m10按Tab会变成margin: 10px;。
常用缩写：
- p10 → padding: 10px;
- fw → font-weight: bold;
- posr → position: relative;
- dib → display: inline-block;
基本上就这些核心用法。Emmet在VSCode中默认开启，不需要额外配置。多练几次常用缩写，写前端代码速度会明显提升。
相关标签：
vscode css html 前端 html5 ai html5 css html class href display position margin padding input ul li vscode