曾经也为写HTML/CSS代码而烦恼过，不愿再写下去，感觉很烦琐，写那么多的尖括号，用的标签都是在重复写，而且绝大多数标题都需要闭合标签，再多几个无序列表就更头疼。
如果在编写代码时可以简写这些标签，符号，提高我们在写HTML/CSS代码时的效率，这一定是件幸福的事。而有了Emmet，前端开发人员都会比以前更幸福。
Emmet，一个强大的插件，可以为我们解决这些问题，是前端开发人员必备的工具包。可以在许多流行的文本编辑器中安装使用，大大提高了编写HTML和CSS代码的工作效率。
Emmet是用纯JavaScript编写的，是一款跨平台的强大HTML/CSS代码编辑插件，超高速的完成HTML/CSS的开发。
最初知道有这样神奇的插件是寻找Sublime Text插件时，知道Zen Coding，一个可以快速编写HTML/CSS代码的工具，看到演示效果，只有用神奇来表达，现在有了Emmet，而且是在Zen Coding基础上再次开发，功能各方面肯定是更加强大。
下面就在Sublime Text和Notepad++这两款编辑器中安装，一些代码编写还是以Sublime Text为例（推荐大家使用Sublime Text编辑器，用了你肯定会喜欢，而Notepad++是相当好的开源文本编辑器，舍不得删除。）
Emmet的安装：
1、在Sublime Text安装：
没有用过Sublime Text编辑器的朋友可以先到网上搜索一下，有很多相关的教程，个人相当推荐的一款跨平台的编辑器。
在Sublime Text中按“Ctrl+Shift+p”快捷键或在菜单-工具中打开“命令面板”，输入：Install Package (安装扩展)后回车，弹出新的窗口，再查找“Emmet”确定安装：
2、在Notepad++安装：
打开菜单：插件-Plugin Manager-Show Plugin Manager面板，找到“Emmet”勾选后，点击“Install”，中途会弹窗提示需要安装或更新文件，确定就OK。
用Emmet编写时需要再转换成HTML/CSS代码，而Sublime Text和Notepad++的快捷键是不一样，分别是：Tab和Ctrl+Alt+Enter。
Emmet快速编写HTML/CSS：
缩写是Emmet的核心，Emmet中特殊的表达式在运行时解析和转化为结构化代码块，缩写的语法看起来就是CSS选择器和一些特定的HTML代码，所以稍微了解了就能看明白和如果使用。
我们先举个例，在编辑器中输入：
- #page>div.logo+ul#navigation>li*5>a{Item $}
再按Tab键你会看到它神奇的效果，得到的HTML代码是：
- <div id="page">
- <div class="logo"></div>
- <li><a href="">Item 1</a></li>
- <li><a href="">Item 2</a></li>
- <li><a href="">Item 3</a></li>
- <li><a href="">Item 4</a></li>
- <li><a href="">Item 5</a></li>
- </ul>
- </div>
神奇吧，仅需一行简单的代码，就可以生成完美的HTML代码结构，对应的class、id都写好了，如果不用Emmet编写，估计你也会有点头疼。
而编写CSS也一样的让人惊叹，比如：
- bdrs6
得到的CSS代码是：
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
连浏览器兼容性都考虑在其中，让人爱不释手。
其实了解了Emmet的原理，看下插件的js代码，你会更明白，而插件的核心是缩写，所有的HTML/CSS标签缩写都存储在js文件的代码片段中，例如下面的js文件中一段代码：
- {
- "html": {
- "abbreviations": {
- "a": "<a href=\"\">",
- "link": "<link rel=\"stylesheet\" href=\"\" />"
- ...
- },
- "snippets": {
- "cc:ie6": "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->"
- ...
- }
- },
- "css": {
- ...
- }
- }
基本的思路：打开/新建 HTML/CSS 文件，按照基本的语法编写Emmet代码，再按Tab键生成HTML/CSS代码。
按Tab键生成HTML/CSS代码时需要光标停靠在Emmet代码的后面，不能有空格，Emmet代码之前也不能有空格，不然只会生成一个tab制表符。如果光标在Emmet代码内部任意位置，按Tab键只会生成光标前面的代码，而后面的Emmet代码还是原样，跟随在生成的HTML/CSS代码后面。
