Emmet语法
Less than 1 minute
1. 简介
Emmet 语法的前身是 Zen coding, 它使用缩写, 来提高 html/css 的编写速度, Vscode 内部已经集成该语法
2. 快速生成HTML结构语法
- 生成标签直接输入标签名按
tab
键即可比如div
然后tab
键,就可以生成<div></div>
- 如果想要生成多个相同标签加上
*
就可以了比如div*3
就可以快速生成 3 个div
- 如果有父子级关系的标签,可以用
>
比如ul > li
就可以了 - 如果有兄弟关系的标签,用
+
就可以了比如div+p
- 如果生成带有类名或者 id 名字的,直接写
.demo
或者#two
然后按tab
键即可生成<div class="demo"></div>
或<div id="demo"></div>
- 如果生成的 div 类名是有顺序的,可以用自增符号
$
- 如果想要在生成的标签内部写内容可以用
{ }
表示
3. 快速生成CSS样式语法
CSS 基本采取简写形式即可
比如 w 200
按 tab 可以生成 width: 200 px;
比如 lh 26 px
按 tab 可以生成 line-height: 26 px;