Emmet快速生成html结构

• 1、生成标签直接输入标签名按tab键 。

`div`+ tab键或者回车 =>生成 `<div></div>`

• 2、生成多个相同标签 加*

div*3 + tab键或者回车  => 三个相同div标签

• 3、有父子级关系的使用 >

ul>li*3 
=> 得到如下
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

• 4、兄弟标签使用 +

 header+section+footer + tab键或者回车
 =>
<header></header>
<section></section>
<footer></footer>

• 5、生成带有类名或id的元素

div.nav => <div class="nav"></div>
直接 .nav 一样效果

div#header => <div id="header"></div>
直接 #header 一样效果

• 6、带自增的class类名

div.tab$*3  ===  .tab$*3
=>
<div class="tab1"></div>
<div class="tab2"></div>
<div class="tab3"></div>

<!-- 倒叙生成 -->
 .nav$@-*3
<div class="nav3"></div>
<div class="nav2"></div>
<div class="nav1"></div>

<!-- 不从1开始 使用 @N 放在 $ 后面 -->
.nav$@3*3
<div class="nav3"></div>
<div class="nav4"></div>
<div class="nav5"></div>

• 7、标签默认内容 {}

div{会Emmett太帅了吧 $}*3

<div>会Emmett太帅了吧 1</div>
<div>会Emmett太帅了吧 2</div>
<div>会Emmett太帅了吧 3</div>

• 8、()分组 () 操作符对复杂的子元素进行分组，简而言之，每个()中都是一个独立的子元素

div>(header>ul>li*2>a)+footer>p

<div>
<header>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</header>
<footer>
    <p></p>
</footer>
</div>

• 9、[attr]

a[name='linkhref'] 

<a href="" name="linkhref"></a>

快速生成css

宽 w100 => width:100px 高 h100 => height:100px 宽+高 w100+h100 => width:100px;height:100px ... 其他根据简写自行探索加快编码脚步