作为非前端开发，表示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>
是不是很爽？！
以上主要涉及到几个操作符，简要做下解释：
-
>： 子节点，如div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
-
+： 并行节点，同胞节点，如div+ul>li
<div></div>
<ul>
<li></li>
</ul>
-
^： 父节点，可以叠加使用，比如ul>li>a^^div上级多层
<ul>
<li><a href=""></a></li>
</ul>
<div></div>
-
*：重复，即节点重复几次 -
()：分组，将多个节点组合，如div>(p>span)*2
<div>
<p><span></span></p>
<p><span></span></p>
</div>
6.属性操作：
- 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.item$$*3
//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>
-
{}：字符操作：a{click}
//a{click}
<a href="">click</a>
