emmet 基本使用方法

官网：http://docs.emmet.io/

 

返回上级：^

输入： div+div>p>span+em  

输出：

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

 

添加多个类

输入： div.a1.a2.a3 

输出： <div class="a1 a2 a3"></div> 

 

自定义属性：[]

输入： td[title="Hello world!" colspan=3] 

输出： <td title="Hello world!" colspan="3"></td> 

 

计数：$

用来计数重复元素

通过使用@n来改变计数的起始数据

在$后添加@- 是数据递减

	demo1	demo2	demo3	demo4
输入	ul>li.item$*3	ul>li.item$$$*3	ul>li.item$@3*3	ul>li.item$@-*3
输出	<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul>	<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> </ul>	<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>	<ul> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>

 

插入文字：{}

输入： a{Click me} 

输出： <a href="">Click me</a> 

 

emmet无法使用的解决方法

在文件里输入html：xt，然后ctrl+e，回车。就出来了