前端利器-Emmet

作为一名前端开发人员来说，有一个比较好的工具会提高开发效率，不管是调试还是书写，这里推荐一个快速书写的利器：Emmet.

简介

Emmet的前身是大名鼎鼎的Zen coding，它根据CSS选择器的写法，来提高HTML/CSS的书写速度。
emmet 主要有以下几个特点：
1.快速编写HTML
初始化、轻松添加类和ID等属性、嵌套、分组、隐式标签、定义多个元素、定义多个带属性的元素、
2.CSS缩写
值、附加属性、模糊匹配、浏览器兼容

先看一个例子

** 下面主要介绍下Emmet的语法使用**

一、初始化

我们在创建网页后，需要每次初始化一些标签，比如文档声明、head、body 等，现在我们只需要一个 ！ 就可以实现啦。 具体操作方式：输入“!”或“html:5”，然后按Tab键

是不是很酷哦~~
html:5 或!：用于HTML5文档类型
html:xt：用于XHTML过渡文档类型
html:4s：用于HTML4严格文档类型

二、轻松添加类、属性

比如如果我们要打出这样的一段代码：
<div class="test" name="password"></div>
我们只需要这样:

.test[name=password] 然后按下TAB健即可。

如图：

三、嵌套

我们在编写多层嵌套的时候可以更加的快速，如下面的代码：
<div class="index"> <div class="index-title"></div> </div>
我们只需要这样：

.index>.index-title 然后按下TAB健即可

如图：

>：子元素符号，表示嵌套的元素
+：同级标签符号
^：可以使该符号前的标签提升一行

四、分组

例子：
<div class="index1"> <h1>1</h1> </div> <div class="index2"> <h2>2</h2> </div>
我们只需要要这样子：

(.index1>h1{1})+(.index2>h2{2}) 然后按下TAB键即可。

上图：

五、隐式标签

声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。 在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。
上图：

六、定义多个相同元素

比如我们如果下li标签的时候
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
我们可以这样

ul>li*5 然后按下TAB键。

CSS 快速编写

一、值

比如我们在写 width：100px的时候，只需要 w100 即可。

p 表示%
e 表示 em
x 表示 ex

二、附加属性

可能你之前已经了解了一些缩写，比如 @f，可以生成： Css代码

@font-face {
font-family:;
src:url();
}

一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，将生成：

三、浏览器兼容

在我们书写CSS的时候，经常会有浏览器兼容的写法，比如：-webkit- , -o-等等的时候是不是感觉很无力，各种复制..，有了它我们可以这样：
-transform ,在前面加上一个“-” ，如果只是想某一种的话，可以-webkit-trf,如图：

如何使用？

好啦，前面大体说完啦，不是很全面，大家可以去网上照一下相关资料，这里简单说明下如何使用这个插件。
额，主要就是安装，我现在在两个编辑器上使用这个，一个是sublime text2 一个是MyEclipse .

sublime text2 安装emmet

直接 CTRL+SHIFT+P ,输入 package install ,回车，然后搜索emmet 安装即可，很简单，当然这里说的是如何安装package

MyEclipse 安装emmet

虽然大部分是从网上找的，不过也是一点一滴code来的..