介紹快速編寫 HTML/CSS 代碼的方法：
1、新建html文件
使用 !+Tab或者html:5 可以快速生成HTML文檔類型；
2、輕松添加類、id、文本和屬性
連續輸入元素名稱和ID，Emmet會自動為你補全，比如輸入p#foo；連續輸入類和id，比如p.bar#foo，自動生成如下代碼：
<p class="bar" id="foo"></p>
輸入h1{foo}和a[href=#]，就可以自動生成如下代碼：
<h1>foo</h1> <a href="#"></a>
3. 嵌套
現在你只需要1行代碼就可以實現標簽的嵌套：
- >：子元素符號，表示嵌套的元素
- +：同級標簽符號
- ^：可以使該符號前的標簽提升一行
4. 分組
你可以通過嵌套和括號來快速生成一些代碼塊，比如輸入(.foo>h1)+(.bar>h2)，會自動生成如下代碼：
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
5. 隱式標簽
聲明一個帶類的標簽，只需輸入div.item，就會生成<div class="item"></div>。
在過去版本中，可以省略掉div，即輸入.item即可生成<div class="item"></div>。現在如果只輸入.item，則Emmet會根據父標簽進行判定。比如在<ul>中輸入.item，就會生成<li class="item"></li>。
6. 定義多個元素
要定義多個元素，可以使用*符號。比如，ul>li*3可以生成如下代碼：li*3
<ul> <li></li> <li></li> <li></li> </ul>
7. 定義多個帶屬性的元素
如果輸入 ul>li.item$*3，將會生成如下代碼：
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul>
二、CSS縮寫
1. 值
比如要定義元素的寬度，只需輸入w100，即可生成。除了px，也可以生成其他單位，比如輸入h10p+m5e，結果如下：
height: 10%;
margin: 5em;
單位別名列表：
- p 表示%
- e 表示 em
- x 表示 ex
2. 模糊匹配
如果有些縮寫你拿不准，Emmet會根據你的輸入內容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：
overflow: hidden;
3. 供應商前綴
這里介紹一個網站：https://autoprefixer.github.io/
4. 漸變
輸入lg(left, #fff 50%, #000)，會生成如下代碼：
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);
參考鏈接：https://www.iteye.com/news/27580