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