神器webstrom好用的功能太多。最近发布的8.0版本，内置grunt非常舒心。通过Alt+鼠标来实现多点编辑，更是让人心旷神怡。
当然这些都是锦上添花的，单是它强大的JS编码提示，以及支持通过安装插件来监听并编译less这两项功能，就已经让人欲罢不能了。
css3属性一键补全前缀，又给我不上了狠狠的一刀，嗯...我喜欢上它了。
今天，来说说它另一个锦上添花的功能，默认集成的Emmet插件。
说起来小弟惭愧，Emmet在业界早已享誉盛名，但我却是不久前才知晓其功能，至于其大名，还是托一位TX的大虾指点才得以知晓。
然后，说起Emmet，有着一套说简单不简单，说复杂不复杂的语法。
作为初学者的我，表示虽然不难记，但在没习惯之前，要记住还是有困难。
故mark之，以备查阅。
在webstrom里，当你在一个html文档里输入了一些列语句后，光标停留在语句尾端，然后按tab键，就能执行命令，生成html代码。
下面通过一系列例子，来讲述其语句的语法。
1.子节点操作符 >
<!-- 执行前 -->
div>ul>li
<!-- 执行后 -->
<div>
<ul>
<li></li>
</ul>
</div>
2.兄弟节点操作符 +
<!-- 执行前 -->
ul>li+li+li
<!-- 执行后 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
3.父节点操作符 ^
<!-- 执行前 -->
div>ul>li+li+li^div
<!-- 执行后 -->
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</div>
4.多个兄弟节点操作符 *
<!-- 执行前 -->
ul>li*5
<!-- 执行后 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
5.分组操作符 ()
<!-- 执行前 -->
div>(div>ul>li)+(div>p)+(div>form)
<!-- 执行后 -->
<div>
<div>
<ul>
<li></li>
</ul>
</div>
<div>
<p></p>
</div>
<div>
<form action=""></form>
</div>
</div>
6.Id和Class操作符 #和.
<!-- 执行前 -->
div#wrap>div.content
<!-- 执行后 -->
<div id="wrap">
<div class="content"></div>
</div>
7.自定义属性操作符 []
<!-- 执行前 -->
div[myAttr="something"]
<!-- 执行后 -->
<div myAttr="something"></div>
8.计数器 $
<!-- 执行前，请配合 * 操作符一起使用，否则 $ 的值只会是 0 -->
ul>li.img_$*5
<!-- 执行后 -->
<ul>
<li class="img_1"></li>
<li class="img_2"></li>
<li class="img_3"></li>
<li class="img_4"></li>
<li class="img_5"></li>
</ul>
9.文本内容操作符 {}
<!-- 执行前 -->
ul>li{列表内容$}*5
<!-- 执行后 -->
<ul>
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
<li>列表内容4</li>
<li>列表内容5</li>
</ul>
10.关于空格
从上面的命令都能看得出来，操作符与tags之间，都没有空格。
因为，空格被Emmet用作 “缩写解析” 的停止标志。
而在属性值中，如果有空格，也需要使用""（双引号）进行包括。