emmet
 
 Emmet 将代码片断的思想提升到全新的高度
 书写类似于 CSS 的表达式 后实时解析展开
 Emmet 是为了HTML/XML 与 CSS  开发 也能与编程语言一块使用
 
 
一 快速编写HTML代码
1 初始化
HTML文档需要包含一些固定的标签 如<html> <head> <body>等 现在你只需要1秒钟就可以输入这些标签 如输入 ! 或 html:5  然后按Tab键：  
html:5 或!：用于HTML5文档类型 html:xt：用于XHTML过渡文档类型 html:4s：用于HTML4严格文档类型

2 轻松添加类 id 文本和属性
连续输入元素名称和ID Emmet会自动为你补全 如输入p#foo：  
连续输入类和id 如p.bar#foo 会自动生成：
Html代码  <p id="foo"></p>   下面来看看如何定义HTML元素的内容和属性 你可以通过输入h1{foo}和a[href=#] 就可以自动生成如下代码：
Html代码  <h1>foo</h1>   <a href="#"></a>   

3 嵌套
现在你只需要1行代码就可以实现标签的嵌套  
>：子元素符号 表示嵌套的元素 +：同级标签符号 ^：可以使该符号前的标签提升一行
效果如下图所示：  

4 分组
你可以通过嵌套和括号来快速生成一些代码块 如输入(.foo>h1)+(.bar>h2) 会自动生成如下代码：
Html代码  <div>     <h1></h1>   </div>   <div>     <h2></h2>   </div>   

5 隐式标签
声明个带类的标签 只需输入div.item 就会生成<div></div>  
在过去版本中 可以省略掉div 即输入.item即可生成<div></div> 现在如果只输入.item 则Emmet会根据父标签进行判定 如在<ul>中输入.item 就会生成<li></li>   
下面是所有的隐式标签名称：
li：用于ul和ol中 tr：用于table tbody thead和tfoot中 td：用于tr中 option：用于select和optgroup中

6 定义多个元素
要定义多个元素 可以使用*符号 如 ul>li*3可以生成如下代码：
Html代码  <ul>     <li></li>     <li></li>     <li></li>   </ul>    7 定义多个带属性的元素
如果输入 ul>li.item$*3 将会生成如下代码：
Html代码  <ul>     <li></li>     <li></li>     <li></li>   </ul>    二 CSS缩写

1 值
如要定义元素的宽度 只需输入w100 即可生成
Css代码  width: 100px;   
除了px 也可以生成其 单位 如输入h10p+m5e 结果如下：
Css代码  height: 10%;   margin: 5em;   单位别名列表：
p 表示% e 表示 em x 表示 ex

2 附加属性
可能你之前已经了解了一些缩写 如 @f 可以生成：
Css代码  @font-face {     font-family:;     src:url();   }   一些其 的属性 如background-image border-radius font @font-face,text-outline text-shadow等额外的选项 可以通过 + 符号来生成 如输入@f+ 将生成：
Css代码  @font-face {     font-family: 'FontName';     src: url('FileName.eot');     src: url('FileName.eot?#iefix') format('embedded-opentype'),        url('FileName.woff') format('woff'),        url('FileName.ttf') format('truetype'),        url('FileName.svg#FontName') format('svg');     font-style: normal;     font-weight: normal;   }   

3 模糊匹配
如果有些缩写你拿不准 Emmet会根据你的输入内容匹配最接近的语法 如输入ov:h ov-h ovh和oh 生成的代码是相同的：
Css代码  overflow: hidden;   

4 供应商前缀
如果输入非W3C标准的CSS属性 Emmet会自动加上供应商前缀 如输入trs 则会生成：
Css代码  -webkit-transform: ;   -moz-transform: ;   -ms-transform: ;   -o-transform: ;   transform: ;   
你也可以在任意属性前加上 - 符号 也可以为该属性加上前缀 如输入-super-foo：
Css代码  -webkit-super-foo: ;   -moz-super-foo: ;   -ms-super-foo: ;   -o-super-foo: ;   super-foo: ;   如果不希望加上所有前缀 可以使用缩写来指定 如-wm-trf表示只加上-webkit和-moz前缀：
Css代码  -webkit-transform: ;   -moz-transform: ;   transform: ;   前缀缩写如下：
w 表示 -webkit- m 表示 -moz- s 表示 -ms- o 表示 -o-

5 渐变
输入lg(left, #fff 50%, #000) 会生成如下代码：
Css代码  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));   background-image: -webkit-linear-gradient(left, #fff 50%, #000);   background-image: -moz-linear-gradient(left, #fff 50%, #000);   background-image: -o-linear-gradient(left, #fff 50%, #000);   background-image: linear-gradient(left, #fff 50%, #000);   
三 附加功能
生成Lorem ipsum文本
Lorem ipsum指一篇常用于排版设计领域的拉丁文文章 主要目的是测试文章或文字在不同字型 版型下看起来的效果 通过Emmet 你只需输入lorem 或 lipsum即可生成这些文字 还可以指定文字的个数 如lorem10 将生成：
引用 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.
四 定制
你还可以定制Emmet插件：
添加新缩写或更新现有缩写 可修改snippets.json文件 更改Emmet过滤器和操作的行为 可修改preferences.json文件 定义如何生成HTML或XML代码 可修改syntaxProfiles.json文件 五 针对不同编辑器的插件
Emmet支持的编辑器如下（链接为针对该编辑器的Emmet插件）：  Sublime Text 2 TextMate 1.x Eclipse/Aptana Coda 1.6 and 2.x Espresso Chocolat （通过 Install Mixin 对话框添加) Komodo Edit/IDE （通过Tools → Add-ons菜单添加) Notepad++ PSPad <textarea> CodeMirror2/3 Brackets 语法及标签缩写方法如下： 后代：>
缩写：nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
兄弟：+
缩写：div+p+bq
<div></div> <p></p> <blockquote></blockquote>
上级：^
缩写：div+div>p>span+em^bq
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
缩写：div+div>p>span+em^^bq
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
分组：()
缩写：div>(header>ul>li*2>a)+footer>p
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
缩写：(div>dl>(dt+dd)*3)+footer>p
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>
乘法：*
缩写：ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
自增符号：$
缩写：ul>li.item$*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
缩写：h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>
缩写：ul>li.item$$$*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
缩写：ul>li.item$@-*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
缩写：ul>li.item$@3*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
ID和类属性
缩写：#header
<div id="header"></div>
缩写：.title
<div></div>
缩写：form#search.wide
<form id="search"></form>
缩写：p.class1.class2.class3
<p class="class1 class2 class3"></p>
自定义属性
缩写：p[title="Hello world"]
<p title="Hello world"></p>
缩写：td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
缩写：[a='value1' b="value2"]
<div a="value1" b="value2"></div>
文本：{}
缩写：a{Click me}
<a href="">Click me</a>
缩写：p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
隐式标签
缩写：.class
<div></div>
缩写：em>.class
<em><span></span></em>
缩写：ul>.class
<ul> <li></li> </ul>
缩写：table>.row>.col
<table> <tr> <td></td> </tr> </table>
HTML
所有未知的缩写都会转换成标签 例如 foo → <foo></foo>
缩写：!
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
缩写：a
<a href=""></a>
缩写：a:link
<a href="http://"></a>
缩写：a:mail
<a href="mailto:"></a>
缩写：abbr
<abbr title=""></abbr>
缩写：acronym
<acronym title=""></acronym>
缩写：base
&l