Emmet语法

1.Emmet语法
Emmet语法的前身是Zen coding,它使用缩写,来提高HTML/CSS的编写速度,VScode内部已经集成该语法.

 ①快速生产HTML结构语法
 ②快速生产CSS样式语法

2.快速生成HTML结构语法
①生成标签 直接输入标签名 按tab键即可 比如 div 然后tab键,就可以生成


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

3.快速生成CSS样式语法
CSS基本采取简写形式即可

     ①比如w200 按tab 可以生成 width:200px;
     ②比如lh26 按tab 可以生成 line-height:26px;

4.快速格式化代码
VScode 快速格式化代码: shift+alt+f

 也可以设置当我们 保存页面的时候自动格式化代码;
posted @ 2022-08-24 08:09  arrowolf  阅读(30)  评论(0)    收藏  举报