Emmet

Emmet 通过缩写和tab键快速生成基础结构

 >　后代 

<!-- div>div -->
<div>
    <div></div>
</div>

 

+　兄弟（同级）

<!-- p+p -->
<p></p>
<p></p>

 

^　上级 可多次跳

<!-- div>div>span^span -->
<div>
    <div><span></span></div>
    <span></span>
</div>
        
        
<!-- div>div>span^^span -->
<div>
    <div><span></span></div>
</div>
<span></span>

 

{}　内容

<!-- div{123} -->
<div>123</div>

 

()　分组

<!-- div>p+div>p -->
<div>
    <p></p>
    <div>
        <p></p>
    </div>
</div>

<!-- (div>p)+(div>p) -->
<div>
    <p></p>
</div>
<div>
    <p></p>
</div>

 

[]　属性

<!-- a[href=#] -->
<a href="#"></a>

 

.　类

<!-- div.box -->
<div class="box"></div>

 

#　id

<!-- div#box -->
<div id="box"></div>

 

*　乘 生成多份

<!-- div*3 -->
<div></div>
<div></div>
<div></div>

 

$　编号 有一个从1开始自增  多个从0开始

<!-- div{$}*3 -->
<div>1</div>
<div>2</div>
<div>3</div>
<!-- div{$$}*3 -->
<div>01</div>
<div>02</div>
<div>03</div>

 

$@n 　指定开始的数字

<!-- div{$@4}*3 -->
<div>4</div>
<div>5</div>
<div>6</div>