visual studio emmet使用

哇塞，今天发现原来写html有个emmet插件，可以整合到各大开发工具中，简直帅呆了。

以vs2013为例，可在以下地址下载：

https://visualstudiogallery.msdn.microsoft.com/427e078e-4885-424b-8667-6485b7937145

下载后双击安装，打开vs,在菜单栏会看见多了emmet项

在html任意位置写上这么一串：

 (header.header>div.top+div.middle+div#footer)+(div.content>article.item$${item$$}*3>h1{Title}+a[href="#"])+(footer.footer>ul>(li>a+img)*3)

把光标移到末尾，按ctrl+1,duang!出来这么多代码：

<header class="header">  	
<div class="top"></div>  	
<div class="middle"></div>  	
<div id="footer"></div>  
</header>  
<div class="content">  	
<article class="item01">
item01
 <h1>Title</h1>  		
 <a href="#"></a>  	
 </article>  	
 <article class="item02">item02
  <h1>Title</h1>  	
  <a href="#"></a>  	
  </article>  	
  <article class="item03">item03
  <h1>Title</h1>  		
  <a href="#"></a>  	
  </article>  
  </div>  
  <footer class="footer">  	
  <ul>  		
  <li><a href=""></a><img src="" alt=""></li>  		
  <li><a href=""></a><img src="" alt=""></li>  		
  <li><a href=""></a><img src="" alt=""></li>  	
  </ul>  
  </footer>

以简驭繁，这才叫编程.

关于emmet的语法：

http://www.wzsky.net/html/Website/htmlcss/116906.html