首先，想要快速編碼需 要在編輯器中安裝常用插件，下面是emmet插件的使用：

html5文檔結構的生成方式：

　　1）、!+tab鍵

　　2）、html:5 +tab鍵

頭部head中meta字符集的生成：

　　1）、 meta:utf + tab鍵 生成：<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

　　2）、meta:vp +tab鍵 生成 ： <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 瀏覽器視口

　　3）、meta:compat + tab鍵 生成 ： <meta http-equiv="X-UA-Compatible" content="IE=8"> 兼容到瀏覽器IE8

　　4）、link:css +tab 鍵 生成 ： <link rel="stylesheet" href="style.css">

　　5）、script:src + tab 鍵 生成：<script src=""></script>

內容body中emmet插件的使用：

　　1）、生成帶類樣式的標簽 p.text +tab鍵

　　　　生成 <p class="text"></p>

　　2）、生成帶ID樣式的標簽 p#text +tab鍵

　　　　生成 <p id="text"></p>

　　3）、 a標簽生成url前綴 a:link+tab鍵

　　　　生成： <a href="http://"></a>

　　　　a標簽是郵箱地址 a:mail+tab鍵

　　　　<a href="mailto:"></a>

　　4）、根據標簽間位置關系生成標簽

　　　　a)、生成同級，兄弟標簽，p標簽後第一個兄弟元素 p.box+span.box +tab 鍵

　　　　　　生成：

　　　　　　　　<p class="box"></p>
　　　　　　　　<span class="box"></span>

　　　　b)、後代標簽 ul > li +tab鍵

　　　　　　如果生成多個相同的後代標簽 eg ul > li*4 +tab鍵 ；表示生成4個li

　　　　c)、生成當前標簽的父級，也叫上級標簽 h2 > span.haha^div.info +tab鍵 即h2與 div是同級元素

　　　　　　生成 ：

　　　　　　　　<h2><span class="haha"></span></h2>
　　　　　　　　<div class="info"></div>

　5)、生成標簽時同時生成內部文本 a{文本內容}+tab鍵

　　生成： <a href="">php中文網</a>
　6）、生成標簽時，同時生成一些屬性 p[title = ‘這是一段說明‘] +tab鍵

　　　　生成 ：<p title="這是一段說明" ></p>

　　生成標簽時，屬性與文本內容也直接生成 例如 a[href=‘www.baidu.com‘]{百度搜索} +tab 鍵

　　生成 ： <a href="www.baidu.com">百度搜索</a>

　　7）、快速生成一個有8個列表項的導航 例如 ul.list>li.items*8>a{導航欄信息} +tab鍵

　　　　生成 ：　　

<ul class="list">
	<li class="items"><a href="">導航欄信息</a></li>
	<li class="items"><a href="">導航欄信息</a></li>
	<li class="items"><a href="">導航欄信息</a></li>
	<li class="items"><a href="">導航欄信息</a></li>
	<li class="items"><a href="">導航欄信息</a></li>
	<li class="items"><a href="">導航欄信息</a></li>
	<li class="items"><a href="">導航欄信息</a></li>
	<li class="items"><a href="">導航欄信息</a></li>
</ul>

　　8）、給標簽自動添加編號或者排序: $,@

　　　　a)、ul.list>li.items*5>a{導航欄$}+tab鍵

<ul class="list">
	<li class="items"><a href="">導航欄1</a></li>
	<li class="items"><a href="">導航欄2</a></li>
	<li class="items"><a href="">導航欄3</a></li>
	<li class="items"><a href="">導航欄4</a></li>
	<li class="items"><a href="">導航欄5</a></li>
</ul>

　　　　　　ul.list>li.items*5>a{導航欄$$} +tab鍵

<ul class="list">
	<li class="items"><a href="">導航欄01</a></li>
	<li class="items"><a href="">導航欄02</a></li>
	<li class="items"><a href="">導航欄03</a></li>
	<li class="items"><a href="">導航欄04</a></li>
	<li class="items"><a href="">導航欄05</a></li>
</ul>

　　　　ul.list>li.items*5>a{導航欄$$$} +tab 鍵

//給標簽自動添加編號或者排序: $,@
<ul class="list">
	<li class="items"><a href="">導航欄001</a></li>
	<li class="items"><a href="">導航欄002</a></li>
	<li class="items"><a href="">導航欄003</a></li>
	<li class="items"><a href="">導航欄004</a></li>
	<li class="items"><a href="">導航欄005</a></li>
</ul>

　　b) ul.list>li.items*5>a{導航欄$$@-} + tab鍵 ----表示降序顯示列表項

//ul.list>li.items*5>a{導航$$@-}+tab鍵
<ul class="list">
	<li class="items"><a href="">導航欄05</a></li>
	<li class="items"><a href="">導航欄04</a></li>
	<li class="items"><a href="">導航欄03</a></li>
	<li class="items"><a href="">導航欄02</a></li>
	<li class="items"><a href="">導航欄01</a></li>
</ul>

　　c)、從指定的編號開始，@後跟數字 ul.list>li.items*5>a{導航欄$$@100} ---表示從100開始

<ul class="list">
	<li class="items"><a href="">導航欄100</a></li>
	<li class="items"><a href="">導航欄101</a></li>
	<li class="items"><a href="">導航欄102</a></li>
	<li class="items"><a href="">導航欄103</a></li>
	<li class="items"><a href="">導航欄104</a></li>
</ul>

　　更多emmet的 用法可以去官網了解

sublime text3中emmet插件的使用