Emmet快捷键

Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。Emmet在webstorm中无需安装即可使用。
总结了对于个人来说经常使用的html标签和css样式的缩写，tab键自动生成，完整的请参考http://docs.emmet.io/cheat-sheet/

例如：ctrl+/快捷键就可以添加与删除注释

一、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;