Zen Coding – 超快地写网页代码（注：已更名为Emmet）

这篇博客能帮助快速上手这款插件,极大地提高开发效率废话不多说直接上例子

zen codeing的缩写规则

E
  元素名 (div, p);

  实例：（输入完<按快捷键ctrl+E>就会显示）
    输入：div
    显示：<div></div>

E#id
   带id的元素 (div#content, p#intro, span#error);
    输入：div#wrap
    显示：<div id="wrap"></div>

E.class
   带class的元素 (div.header, p.error.critial). id 和 class 可以连写，如：      div#content.column.width;
    输入：div#content.column.width
    显示：<div id="content" class="column width"></div>

E>N
    子元素 (div>p, div#footer>p>span);
    输入：ul>li>a>img
    显示：
     <ul>
	<li><a href=""><img src="" alt="" /></a></li>
    </ul>

E+N
     兄弟元素 (h1+p, div#header+div#content+div#footer);
     输入:div#wrap>div.header+div.main+div.footer
     显示:
    <div id="wrap">
	<div class="header"></div>
	<div class="main"></div>
	<div class="footer"></div>
    </div> 

E*N
     多项元素 (ul#nav>li*5>a);
     输入：ul>li*4>a>img
     显示:
     <ul>
	<li><a href=""><img src="" alt="" /></a></li>
	<li><a href=""><img src="" alt="" /></a></li>
	<li><a href=""><img src="" alt="" /></a></li>
	<li><a href=""><img src="" alt="" /></a></li>
     </ul>

E$*N
      带序号的元素 (ul#nav>li.item-$*5);
     输入：ul>li.item-$*4>a>img
     显示：
     <ul>
	<li class="item-1"><a href=""><img src="" alt="" /></a></li>
	<li class="item-2"><a href=""><img src="" alt="" /></a></li>
	<li class="item-3"><a href=""><img src="" alt="" /></a></li>
	<li class="item-4"><a href=""><img src="" alt="" /></a></li>
     </ul>

｛｝标签内容
     输入：div#wrap>div.header{我是头部}+div.main{我是主体}+div.footer{我是尾部}
     显示:
     <div id="wrap">
	<div class="header">我是头部</div>
	<div class="main">我是主体</div>
	<div class="footer">我是尾部</div>
     </div>

   [] 属性
    输入:ul>li>a[href="#"][title="logo"]>img[src="imgs/logo.jpg"][alt="logo"]
   显示如下：
    <ul>
	<li><a href="#" title="logo"><img src="imgs/logo.jpg" alt="logo" />   </a></li>
</ul>

   ()同级范围
    输入：div>(div.header>ul>li+p)+(div.main>ul>li+p)+(div.footer>ul>li+p)
    显示:
    <div>
 	<div class="header">
 		<ul>
 			<li></li>
 			<p></p>
 		</ul>
 	</div>
 	<div class="main">
 		<ul>
 			<li></li>
 			<p></p>
 		</ul>
 	</div>
 	<div class="footer">
 		<ul>
 			<li></li>
 			<p></p>
 		</ul>
 	</div>
   </div>