ABP

这样写Html很快

2018-04-10  本文已影响644人  圣杰

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

<div class="container">
  <h1></h1>
  <form action="">
    <div class="form-group">
      <label for=""></label>
      <input type="text">
    </div>
    <div class="form-group">
      <label for=""></label>
      <input type="text">
    </div>
    <select name="" id="">
      <option value="" id="id1"></option>
      <option value="" id="id2"></option>
      <option value="" id="id3"></option>
    </select>
    <button type="submit">submit</button>
  </form>
</div>

是不是很爽?!

以上主要涉及到几个操作符,简要做下解释:

  1. >: 子节点,如div>ul>li
<div>
  <ul>
      <li></li>
  </ul>
</div>
  1. +: 并行节点,同胞节点,如div+ul>li
<div></div>
<ul>
  <li></li>
</ul>
  1. ^: 父节点,可以叠加使用,比如ul>li>a^^div 上级多层
<ul>
    <li><a href=""></a></li>
</ul>
<div></div>
  1. *:重复,即节点重复几次
  2. ():分组,将多个节点组合,如div>(p>span)*2
<div>
   <p><span></span></p>
   <p><span></span></p>
</div>

6.属性操作

<div id="header"></div>
<div class="main"></div>
<div id="footer"></div>
<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>
  1. {}:字符操作:a{click}
//a{click}          
<a href="">click</a>  
上一篇 下一篇

猜你喜欢

热点阅读