摘要
安裝請看上一篇Sublime Text—安裝，和sublime自帶快捷鍵一起用曲聂，寫html簡直快的飛起佑惠。
下面整理的是常用的，完整的可看emmet官方文檔旭咽。
一赌厅、生成標簽
1.快速生成文檔結(jié)構(gòu)
-
!或html:5，快速生成 HTML5 結(jié)構(gòu)(都需要再按tab鍵)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html:xt生成 HTML4 過渡型html:4s生成 HTML4 嚴格型
2.生成帶 id 的元素
標簽 # ID名仲墨，如：div#header
<div id="header"></div>
3.生成帶 class 的元素
標簽 . 類名揍障，如：div.title
<div class="title"></div>
4.生成后代元素：>
如：nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
5.生成兄弟元素：+
如：div+p+div
<div></div>
<p></p>
<div></div>
6.生成上級元素：^
如：p^div
<p></p>
<div></div>
7.重復生成多個元素：*
如：ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
8.生成帶自定義屬性：[attr]
如：div[value=1]
<div value="1"></div>
9.生成帶文本內(nèi)容：{}
如：a{Click me}
<a href="">Click me</a>
10.加編號：$
- 從1開始：加$
如：div.item${$$}*3
<div class="item1">01</div>
<div class="item2">02</div>
<div class="item3">03</div>
- 倒序： $ 后面增加 @-
如：div.item$@-{$$@-}*3
<div class="item3">03</div>
<div class="item2">02</div>
<div class="item1">01</div>
- 指定序號：可以使用 @N
如：div.item$@4{$$@4}*3
<div class="item4">04</div>
<div class="item5">05</div>
<div class="item6">06</div>
11.分組：()
如：(ul>ol)*3
<ul>
<ol></ol>
</ul>
<ul>
<ol></ol>
</ul>
<ul>
<ol></ol>
</ul>
12.來個綜合案例
table#tab[value=1].a>tr*3>(td{$$}>span)*3
<table id="tab" value="1" class="a">
<tr>
<td>01<span></span></td>
<td>02<span></span></td>
<td>03<span></span></td>
</tr>
<tr>
<td>01<span></span></td>
<td>02<span></span></td>
<td>03<span></span></td>
</tr>
<tr>
<td>01<span></span></td>
<td>02<span></span></td>
<td>03<span></span></td>
</tr>
</table>
二癌蚁、生成css
css樣式多，縮寫自然也很多礼旅，列舉常用的舉一反三即可洽洁。
其中css縮寫是采用模糊搜索匹配的，比如ov:h == ov-h == ovh == oh汰翠。
- w10
width: 10px;w10pwidth: 10%;w10ewidth: 10em;w10xwidth: 10xe; - h10
height: 10px; - por
position: relative;poaposition: absolute; - fll
float: left;frfloat: right; - dt
display: table;dbdisplay: block;dibdisplay: inline-block; - ovy
overflow-y: hidden; - cb
clear: both; - mt
margin-top: ;mbmargin-bottom: ; - pt
padding-top: ;pbpadding-bottom: ; - tac
text-align: center; - lh
line-height:; - tsn
text-shadow: none; - tja
text-justify: auto; - c
color: #000;crcolor: rgb(0, 0, 0);cracolor: rgba(0, 0, 0, .5); - op
opacity: ; - cnt
content: ''; - ol
outline: ; - bd+
border: 1px solid #000;bdb+border-bottom: 1px solid #000; - bd2px#333s
border: 2px #333 solid;
三复唤、快捷鍵
如果沒作用請檢查快捷鍵是否沖突
- 快速生成包裹標簽：Ctrl+Shift+G
只有文本沒有結(jié)構(gòu)時烛卧，如下
首頁
簡介
動態(tài)
選中文本按快捷鍵Ctrl+Shift+G总放，再彈出的：Enter Wrap Abbreviation（輸入擴展縮寫）中輸入nav>ul>li.item$*>a就會生成
<nav>
<ul>
<li class="item1"><a href="">首頁</a></li>
<li class="item2"><a href="">簡介</a></li>
<li class="item3"><a href="">動態(tài)</a></li>
</ul>
</nav>
如果原先的文本帶編號，不想要則可以在上面的基礎(chǔ)上加|t,nav>ul>li.item$*>a|t即可生成如上結(jié)果甥啄。
1首頁
2簡介
3動態(tài)
自動添加/更新圖片尺寸：ctrl+U （光標移到標簽上任意位置炬搭，按下快捷鍵即可）
刪除標簽：shift+ctrl+;
定位到上個編輯點：ctrl+alt+left
定位到下個編輯點：ctrl+alt+right
選中下一項：shift+ctrl+.
加/減1：ctrl+up/ctrl+down
加/減10：shift+alt+up/shift+alt+down
展開縮寫：ctrl+e（和tab鍵作用相同）
重命名標簽(rename_tag)：ctrl+shift+'
更換標簽(update_as_you_type)：ctrl+Shift+U
匹配標簽對：ctrl+alt+j
四、生成測試文本
輸入lorem再按tab會隨機生成一段英文融虽，默認是生成30個單詞灼芭，可以加上數(shù)字控制單詞數(shù)量，如lorem5。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt, expedita voluptates ratione praesentium error a accusamus corporis deleniti. Cum, debitis id, in rem exercitationem at voluptatum illum minima corporis!
Lorem ipsum dolor sit amet.
2017.09.18補充內(nèi)容
如上輸入lorem再按tab擴展的代碼是已經(jīng)設置好的倒源，sublime還提供自定義代碼片段的功能笋熬，詳細內(nèi)容請移步Sublime Text3—自定義代碼片段(Code Snippets)。
參考
掘金：Sublime Text3—常用插件Emmet
簡書：Sublime Text3—常用插件Emmet
博客園：Sublime Text3—常用插件Emmet
