安裝請看上一篇Sublime Text—安裝，和sublime自備快捷鍵一起用，寫html簡直快的飛起。
下面整理的是常用的，完整的可看emmet官方文件。
#!或html:5，快速產生HTML5 結構(都需要再按tab鍵)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
html:xt 產生HTML4 過渡型
html:4s 產生HTML4 嚴格類型
p#header
<p id="header"></p>
p.title
<p class="title"></p>
nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
p+p+p
<p></p> <p></p> <p></p>
p^p
<p></p> <p></p>
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
p[value=1]
<p value="1"></p>
a{Click me}
<a href="">Click me</a>
p.item${$$}*3#
<p class="item1">01</p> <p class="item2">02</p> <p class="item3">03</p>
p.item$@-{$$@-}*3#
<p class="item3">03</p> <p class="item2">02</p> <p class="item1">01</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p class="item4">04</p>
<p class="item5">05</p>
<p class="item6">06</p></pre><div class="contentsignin">登入後複製</div></div>11.
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul>
<ol></ol>
</ul>
<ul>
<ol></ol>
</ul>
<ul>
<ol></ol>
</ul></pre><div class="contentsignin">登入後複製</div></div>來個
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">登入後複製</div></div>產生css
其中css縮寫是採用模糊搜尋匹配的，例如ov:h == ov-h == ovh == oh。
width: 10px;<a href="//m.sbmmt.com/wiki/835.html" target="_blank"> w10p </a>width: 10%; w10e width: 10em; w10x width: 10xe;
height: 10px;<a href="//m.sbmmt.com/wiki/836.html" target="_blank"></a>
position: relative;<a href="//m.sbmmt.com/wiki/902.html" target="_blank"> poa </a>position: absolute;
float: left;<a href="//m.sbmmt.com/wiki/919.html" target="_blank"> fr </a>float: right;<a href="//m.sbmmt.com/wiki/905.html" target="_blank"></a>
display: table;<a href="//m.sbmmt.com/wiki/927.html" target="_blank"> db </a>display: block; dib display: inline-block;
overflow-y: hidden;<a href="//m.sbmmt.com/wiki/926.html" target="_blank"></a>
clear: both;<a href="//m.sbmmt.com/wiki/917.html" target="_blank"></a>
margin-top: ;<a href="//m.sbmmt.com/wiki/933.html" target="_blank"> mb </a>margin-bottom: ;<a href="//m.sbmmt.com/wiki/935.html" target="_blank"></a>
pt <a href="//m.sbmmt.com/wiki/949.html" target="_blank">padding-top</a>: ; pb <a href="//m.sbmmt.com/wiki/951.html" target="_blank">padding-bottom</a>: ;
tac <a href="//m.sbmmt.com/wiki/870.html" target="_blank">text-align</a>: center;
lh <a href="//m.sbmmt.com/wiki/864.html" target="_blank">line-height</a>:;
tsn <a href="//m.sbmmt.com/wiki/861.html" target="_blank">text-shadow</a>: none;
tja <a href="//m.sbmmt.com/wiki/881.html" target="_blank">text-justify</a>: auto;
c color: #000; cr color: rgb(0, 0, 0); cra color: rgba(0, 0, 0, .5);
op opacity: ;
cnt content: '';
ol <a href="//m.sbmmt.com/wiki/938.html" target="_blank">outline</a>: ;
bd+ border: 1px solid #000; bdb+ border-bottom: 1px solid #000;
bd2px#333s border: 2px #333 solid;
如果没作用请检查快捷键是否冲突
快速生成包裹标签：Ctrl+Shift+G
只有文本没有结构时，如下
首页 简介 动态
选中文本按快捷键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="">动态</a></li> </ul> </nav>
如果原先的文本带编号，不想要则可以在上面的基础上加|t,nav>ul>li.item$*>a|t即可生成如上结果。
1首页 2简介 3动态
自动添加/更新图片尺寸：ctrl+U
光标移到标签上的任意位置，按下快捷键ctrl+U即可。
<img src="img/x1.png" /> <img src="img/x1.png" width="100" height="200" />
删除标签：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个单词，可以加上数字控制单词数量，如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.
以上是詳解Sublime Text 外掛程式Emmet的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
