Emmet语法

47 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法

1.快速生成HTML结构语法
①生成标签 直接输入标签名按tab键即可 比如div 然后tab键,就可以生成<div></div>
②如果想要生成多个相同的标签 加上*就可以了 比如div*3就可以快速生成3div
③如果有父子级关系的标签 可以用 > 比如 ul > li 就可以了
④如果有兄弟关系的标签 用 + 就可以了 比如div+p
⑤如果生成带有类名或者id名字的 直接写.demo 或者 #two tab就可以了 (demo和two是类名)
⑥如果生成的div类名是有顺序的,可以用自增符号$
⑦如果想要在生成的标签内部写内容可以用{}表示

2.快速生成CSS样式语法
CSS基本样式采取简写形式即可.
①比如w200 按tab可以生成 width: 200px;
②比如lh26 按tab可以生成 line-height: 26px;

快速格式化代码 Vscode快速格式化代码: shift+alt+f