Emmet的前身是Zen coding,它使用縮寫,來提高html/css的編寫速度。Emmet在webstorm中無需安裝即可使用,sublime則需要在Preferences-->Package Control輸入Emmet確定安裝，如果安裝不成功，請參考http://www.cnblogs.com/tinyphp/p/3217457.html。
下面我總結了對於個人來說經常使用的html標簽和css樣式的縮寫，完整的請參考
http://docs.emmet.io/cheat-sheet/
一、HTML
1. link:css -- 快捷引入外部css文件
2. cc:ie -- 編寫在ie情況下
3. script:src -- 快捷引入外部js文件
4. h1{text} -- <h1>text</h1>
5. a[href=#] -- <a href="#"></a>
6. ul>li.item$*3 --
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
7. a.link{click} -- <a href="" class="link">click</a>
8. input:button.btn -- <input type="button" class="btn">
9. lorem定制文本 （用於測試）
lorem30 -- 生成30個word
二、CSS（個人認為比html更有用）
1. w100 -- width:100px;
2. h5p -- height:5%;
3. oh / ovh /ov-h -- overflow:hidden;
zm1 -- zoom:1;
4. o0 -- opacity:0;
op+ -- opacity: ;
filter: alpha(opacity=);
op:ie -- -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
5. db -- display:block;
dib -- display:inline-block;
6. trf -- transform各種兼容
trf:sc -- transform:scale();
trs -- transition
bdrs -- border-radius及各種前綴
bxsh -- box-shadow
7. bdb -- border-bottom
bdt -- border-top
bdl -- border-left
bdr -- border-right
8. fz -- font-size
fw -- font-weight
fw400 -- font-weight:400;
ff -- font-family
9. m-10-2-0-12 -- margin:10px 2px 0 12px;
10. c#0 -- color:#000;
cra -- color: rgba(0,0,0.5);
11. bd1-s-red -- border:1px solid red;
bd+ -- border: 1px solid #000;
bdb+ -- border-bottom: 1px solid #000;
12. m0-auto-0 -- margin:0 auto 0;
13. lh1.6 -- line-height:1.6;
vam -- vertical-align:middle;
tac -- text-align: center;
td -- text-decoration:none;
tdu -- text-decoration:underline;
ti -- text-indent
14. z10 -- z-index:10;
15. bg -- background
bgc -- background-color
bgsz:cv -- background-size:cover;
bg+ -- background:#fff url() 0 0 no-repeat;
16. pos: a -- position:absolute;
pos: r -- position: relative;
pos: f -- position: fixed;
17. fl -- float:left;
fr -- float:right;
18. curp -- cursor: pointer;
暫時寫這么多，以后若還有的話，再補充~