vscode 常用 Emmet Abbreviation 快捷方式

输入快捷指令后， 按“tab”键或者回车键 即可

1. .box*5：生成 5 个 class 为 box 的 div 元素

<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">div>

2. p.box*5：生成 5 个 class 为 box 的 p 元素

<p class="box">p>
<p class="box">p>
<p class="box">p>
<p class="box">p>
<p class="box">p>

3. .box$*5：生成 5 个 class 为 box 自增长索引 的 div 元素

<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
<div class="box4">div>
<div class="box5">div>

4. .box{$}*5：生成 5 个 class 为 box 的 div 元素，内容自增长

<div class="box">1div>
<div class="box">2div>
<div class="box">3div>
<div class="box">4div>
<div class="box">5div>

5. div+p：生成 兄弟元素

<div>div>
<p>p>

6. div>p：生成 父子元素

<div>
  <p>p>
div>

7. .wrap>.box.box${$}*5：综合练习

<div class="wrap">
<div class="box box1">1div>
 <div class="box box2">2div>
 <div class="box box3">3div>
 <div class="box box4">4div>
 <div class="box box5">5div>
div>