Emmet语法

Emmet语法

Emmet语法使用缩写，来提高html、css的编写速度，Vscode内部已经集成该语法

1 快速生成HTML结构语法

1. 生成标签：直接输入标签名按下tab键即可，例如 div tab，就可以生成<div></div>

2. 生成多个标签：加上*即可，例如 div*3 （无空格）可以快速生成3个div

3. 如果有父子关系的标签，可以用>, 比如 ul > li 就可以了

4. 如果有兄弟关系的标签，用 + 就可以，比如 div + p；

5. 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了。默认生成div标签的，其他标签需要在前面指定

   .nav        <div class="nav"></div>
   #nav        <div id="nav"></div>
   p.one       <p class="one"></p>
   

6. 如果生成的div类名是有顺序的，可以用自增符号 $,

   例如 .demo*5$ 生成类名增序排列(demo1,demo5)的5个div

7. 如果想在生成的标签内部写内容可以用{}表示，例如demo{$}*5 ，生成5个div，里面内容为数字1-5递增

2. 快速生成CSS样式

1. tec + tab 快速生成 text-align：center；ti2em + tab 快速生成 text-indent：2em；
2. w100 + tab 快速生成 width：100px；h200 + tab 快速生成 height：200px；等等

3. 快速格式化代码

方法1：右键单击格式化代码 或者 快捷键“Shift+Alt+F”

方法2：可以设置保存页面的时候自动格式化代码

选择 “文件” → “首选项” → “设置” ，搜索：format ，在Format on Save 框前选中对钩即可