Emmet 语法

• 孩子节点 >

nav>ul>li
    

        

            

        
    
 

• 兄弟节点 +

div+p+bq
    

    

    
 

• 上级节点 ^

div+div>p>span+em^bq
    

    

        

        

    
div+div>p>span+em^^bq
    

    

        

    
    
 

• 倍增 *

ul>li*5
    

        

        

        

        

        

    
 

• ID属性 #

form#search
    
 

• CLASS属性 .

form.search
    
 

• 自定义属性

p[title="Hello world" a="value"]
    

• 文本 {}

p{Click}>a{here}+{to continue}
    
Clickhereto continue
 

• 组 ()

(div>dl>(dt+dd)*3)+footer>p
    

        

            

            

            

            

            

            

        
    
    

        

    
 

• 数字序列 $

ul>li.item$*5
    

        

        

        

        

        

    
h$[title=item$]{Header $}*3
    
Header 1
    
Header 2
    
Header 3
ul>li.item$$$*5
    

        

        

        

        

        

    
ul>li.item$@-*5
    

        

        

        

        

        

    
ul>li.item$@3*5
    

        

        

        

        

        

    
  

• HTML模板 !

还有HTML及CSS语法 因存在更快捷的书写方式 只列举上述常用语法 更多语法详见 Cheat Sheet