前端3-Emmet语法

    <!-- Emmet语法 -->

    <!-- 1、快速生成兄弟标签 -->
    <!-- div+p -->
    <div></div>
    <p></p>

    <!-- 快速生成带有类名和id名标签 -->
    <!-- p.name -->
    <p class="name"></p>

    <!-- 快速生成带有序号类名 -->
    <!-- .demo$*4 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    
    <!-- p.demo*4 -->
    <p class="demo"></p>
    <p class="demo"></p>
    <p class="demo"></p>
    <p class="demo"></p>

    <!-- 生成标签中带有文字 -->
    <!-- div{hello} -->
    <div>hello</div>

    <!-- div{.demo$*3} -->
    <!-- div{$}*3 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <!-- .demo$*3{hello} -->
    <div class="demo1">hello</div>
    <div class="demo2">hello</div>
    <div class="demo3">hello</div>

    <!-- .demo$*3{$}*3 -->
    <div class="demo1">1</div>
    <div class="demo2">2</div>
    <div class="demo3">3</div>