Emmet语法

神器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用作 “缩写解析” 的停止标志。

而在属性值中，如果有空格，也需要使用""（双引号）进行包括。