这样写Html很快

作为非前端开发,表示html的书写真心很慢。无意了解到Emmet插件,发现可以像下面这种方式书写html,简直不要太爽。
div.container>h1+form>(div.form-group>label+input)*2+select>option#id$*3^button[type=submit]{submit}
这样一句简单的代码,就可以生成以下dom结构:


是不是很爽?!
以上主要涉及到几个操作符,简要做下解释:
  1. >: 子节点,如div>ul>li

  1. +: 并行节点,同胞节点,如div+ul>li

  1. ^: 父节点,可以叠加使用,比如ul>li>a^^div 上级多层

  1. *:重复,即节点重复几次
  2. ():分组,将多个节点组合,如div>(p>span)*2



6.属性操作
  • id和类:div#header+div.main+div#footer

  • 属性值,如a[title=test target=_self]

  • 数列值:$,如 p.item$*3p.item$$*3
//p.item$*3


//p.item$$*3

【这样写Html很快】

  1. {}:字符操作:a{click}
//a{click} click

    推荐阅读