Emmet语法速查表

Emmet可以快速的编写HTML代码,输入缩写,按tab即可生成相应代码。

嵌套操作

>: Child
+: Sibling
^: Climb-up
*: 乘法, 如 ul 
  
  • (): 分组,如 (header>ul>li*2)+footer>p,结果如下

    属性操作

    ID和Class,如div#header.class1.class2.class3, 结果如下:

    
    

    也可以自定义属性,如td[title="hello" colspan=3],属性可以不用引号,结果如下:

    
    

    序列

    结合之前的嵌套操作和属性操作, 通过和$可以输出数字序列, 如ul>li.item$3,结果如下:

    通过@, 可以改变数字序列的顺序以及基数,如ul>li$@2-*3

    文字

    {}: 通过大括号(curly braces)在元素中插入文字, 如a{Click me}:

    Click me
    

    注意 a{click}+b{here} 和 a>{click}+b{here} 的区别:

    
    clickhere
    
    
    clickhere
    

    其他

    官方语法介绍:http://docs.emmet.io/
    官方语法速查表:http://docs.emmet.io/cheat-sheet/

    你可能感兴趣的:(Emmet语法速查表)