Emmet (Zen Coding) HTML基本语法

1. 嵌套操作----------

 

子操作： >

 

div>ul>li

 

< div >

     < ul >

         < li ></ li >

     </ ul >

</ div >

 

并列：+

 

div+ul>li

 

< div ></ div >

< ul >

     < li ></ li >

</ ul >

 

上级：^

 

ul>li^div

 

< ul >

     < li ></ li >

</ ul >

< div ></ div >

 

ul>li>a^^div 上级多层

 

< ul >

     < li >< a href = "" ></ a ></ li >

</ ul >

< div ></ div >

 

重复：*

 

ul>li*3

 

< ul >

     < li ></ li >

     < li ></ li >

     < li ></ li >

</ ul >

 

分组：()

         

div>(p>span)*2

 

< div >

     < p >< span ></ span ></ p >

     < p >< span ></ span ></ p >

</ div >

 

2. 属性操作----------

 

id和类

 

div#header+div.main+div#footer

 

< div id = "header" ></ div >

< div class = "main" ></ div >

< div id = "footer" ></ div >

 

属性值

 

a[title=test target=_self]

 

< a title = "test" target = "_self" href = "" ></ a >

 

数列值：$

 

p.item$*3

 

< p class = "item1" ></ p >

< p class = "item2" ></ p >

< p class = "item3" ></ p >

 

p.item$$*3

 

< p class = "item01" ></ p >

< p class = "item02" ></ p >

< p class = "item03" ></ p >

 

数列操作符：@

 

p.item$@-*3   @- = -1

 

< p class = "item3" ></ p >

< p class = "item2" ></ p >

< p class = "item1" ></ p >

 

p.item$@3*3  @3 = 从3开始3次

 

< p class = "item3" ></ p >

< p class = "item4" ></ p >

< p class = "item5" ></ p >

 

p.item$@-3*3 @-3 = 3次后到3结束

 

< p class = "item5" ></ p >

< p class = "item4" ></ p >

< p class = "item3" ></ p >

 

3. 字符操作----------       

 

字符操作：{}

 

a{click}

         

< a href = "" >click</ a >  

         

a>{click}+span{me}

 

< a href = "" >click< span >me</ span ></ a >

 

4. 缺省元素----------

 

.header+.footer  ---------------  div.header+div.footer

 

ul>.item*3 -------------- ul>li.item*3

 

table>.row*4>.cell*3 -------------- table>tr.row*4>td.cell*3

 

 

最后注意：如果搞不清楚顺序了，多用()。就像1+2×3，实际上是(1+2)×3







原文地址：http://www.oschina.net/code/snippet_66036_18625