emmet使用方法简介

作为一名前端开发，需要写大量的html标签，还要闭合这些标签，面对大工作量时，一个标签一个标签的写就显得效率很低。而emmet的出现恰恰可以有效提高我们的工作效率。

Emmet的前身为zend coding，前端开发的神器。下面是我目前用到的一些emmet语法。将将算是入个门吧。

首先，我是在sublime text2中通过包安装了emmet。

之后，同通过快捷键ctrl+alt+enter打开emmet命令行。

再然后，你就可以按照emmet的语法自由发挥了。但是要注意在命令之间不能有空格。

1.生成文档结构

html:5 或者 ! 生成 HTML5 结构

html:xt 生成 HTML4 过渡型

html:4s 生成 HTML4 严格型

2.基本语法

#:  id

.:   class

>： 后代元素

+： 同级兄弟元素

^:   上一级元素

():   分组

*: 生成几个元素 li*5 会生成5个li标签

$: 排序

$@- :倒序

$@4：序号从4开始

3.将图片资源转换成 data url 形式

将光标移动到 background: url() 中的图片位置的地方，按下 Ctrl+’（就是那个引号） 即可将图片编码成 data url 格式。

4.选择标签的快捷键

使用 Shift+Ctrl+. 和 Shift+Ctrl+,分别向下或者向上移动，选取的是一整块，先从标签开始，再是整个属性，再是属性值。

我在这里呢，只写了能基本满足要求的简单语法，http://blog.wpjam.com/m/emmet/这里面介绍的很详细，更多的功能，你还可以看官方的文档http://docs.emmet.io/actions/。