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

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



posted @ 2014-04-12 15:51  前端攻城师-CZF  阅读(...)  评论(...编辑  收藏