Emmet使用手册

介绍

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:

基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。

Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。

使用示例：

在编辑器中输入缩写代码：ul>li*5 ，然后按下拓展键（默认为tab），即可得到代码片段：

<ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul>

下载和安装

1. Emmet为大部分流行的编辑器都提供了安装插件，下面是它们的下载链接：

   •  Sublime Text
   •  Eclipse/Aptana
   •  TextMate
   •  Coda
   •  Espresso
   •  Chocolat
   •  Komodo Edit
   •  Notepad++
   •  PSPad
   •  textarea
   •  CodeMirror
   •  Brackets
   •  NetBeans
   •  Adobe Dreamweaver

2. 在线编辑器的支持：

   •  JSFiddle
   •  JS Bin
   •  CodePen
   •  ICEcoder
   •  Divshot
   •  Codio

3. 第三方插件的支持

   下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。

   •  SynWrite
   •  WebStorm
   •  PhpStorm
   •  Vim
   •  HTML-Kit
   •  HippoEDIT
   •  CodeLobster PHP Edition
   •  TinyMCE

因为我也是Sublime Text的使用者，所以下面为大家介绍一下sublime text中Emmet的安装方法：

步骤一：首先你需要为sublime text安装Package Control组件：

1.  按Ctrl+`调出sublime text的console
2.  粘贴以下代码到底部命令行并回车： import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
3.  重启Sublime Text
4.  在Perferences->package settings中看到package control，则表示安装成功

步骤二：使用Package Control安装Emmet插件：

1.  按Ctrl+Shift+P命令板
2.  输入install然后选择install Package，然后输入emmet找到 Emmet Css Snippets，点击就可以自动完成安装。

使用方法

emmet的使用方法也非常简单，以sublime text为例，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。（如果与已有的快捷键有冲突的话，可以自行在编辑器中将拓展键设为其他快捷键）

语法:

关于更多的HTML以及CSS的缩写请查看：

下载 API表直击官网文档

特别声明：文中演示代码来自于官网API：http://docs.emmet.io/cheat-sheet/

出处：http://www.w3cplus.com/tools/emmet-cheat-sheet.html