（本內(nèi)容基于Windows環(huán)境）
一、已安裝有Sublime Text3

二、安裝Package Control
?? ?安裝這個(gè)后，可以在線安裝所需的插件
?? ?方法1、Ctrl+~打開(kāi)控制臺(tái)，在控制臺(tái)輸入如下的Python命令
import ?urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
?? ?等待下載安裝。
?? ?方法2、下載Package Control插件包到插件目錄
?? ??? ?插件目錄在菜單中打開(kāi)Preference--Browse Packages，沒(méi)有自己新建一個(gè)
?? ?按照提示重啟Sublime Text3，如果在Preferences->package settings中有看到package control這一項(xiàng)，則安裝成功，如果沒(méi)有，參照方法2可以下載package Control手動(dòng)安裝

三、安裝插件
?? ?常用的命令：Install Package（安裝擴(kuò)展）
?? ??? ??? ??? ?List Package（列出全部擴(kuò)展）
?? ??? ??? ??? ?Remove Package（移除擴(kuò)展）
?? ??? ??? ??? ?Upgrade Package（升級(jí)擴(kuò)展）
?? ?1、Emmet插件的安裝
?? ??? ?1）Ctrl+Shift+P：調(diào)出控制面板
?? ??? ?2）搜索框鍵入Install Package命令（也可以簡(jiǎn)寫(xiě)）并回車，然后在列表選擇Emmet（也可以直接搜索Emmett進(jìn)行檢索）
?? ??? ?3）點(diǎn)擊確定等待安裝
?? ??? ?4）自動(dòng)安裝結(jié)束會(huì)自動(dòng)彈出一個(gè)插件的安裝信息的文件。重新調(diào)出控制面板，鍵入List Package列出全部擴(kuò)展，查看是否已經(jīng)安裝成功。
?? ??? ?
?? ??? ?Emmet常用技巧：（輸入下面簡(jiǎn)寫(xiě)，按Tab鍵可觸發(fā)效果）
?? ??? ??? ?
?? ??? ??? ?生成 HTML 文檔初始結(jié)構(gòu)

?? ??? ??? ??? ?html:5 或者 ! 生成 HTML5 結(jié)構(gòu)
?? ??? ??? ??? ?html:xt 生成 HTML4 過(guò)渡型
?? ??? ??? ??? ?html:4s 生成 HTML4 嚴(yán)格型

?? ??? ??? ?生成帶有 id 、class 的 HTML 標(biāo)簽

?? ??? ??? ??? ?Emmet 默認(rèn)的標(biāo)簽為 div ，如果我們不給出標(biāo)簽名稱的話，默認(rèn)就生成 div 標(biāo)簽。

?? ??? ??? ??? ?編寫(xiě)一個(gè) class 為 bbb 的 span 標(biāo)簽，我們需要編寫(xiě)下面指令：
?? ??? ??? ??? ??? ?span.bbb
?? ??? ??? ??? ?編寫(xiě)一個(gè) id 為 ccc 的 class 為 ddd 的 ul 標(biāo)簽
?? ??? ??? ??? ??? ?ul#ccc.ddd

?? ??? ??? ?生成后代：>
?? ??? ??? ??? ?大于號(hào)表示后面要生成的內(nèi)容是當(dāng)前標(biāo)簽的后代。

?? ??? ??? ??? ?要生成一個(gè)無(wú)序列表，而且被 class 為 aaa 的 div 包裹
?? ??? ??? ??? ??? ?div.aaa>ul>li
?? ??? ??? ??? ?生成一個(gè)有序列表
?? ??? ??? ??? ??? ?.abc>ol>li

?? ??? ??? ?生成兄弟：+
?? ??? ??? ??? ?上面是生成下級(jí)元素，如果想要生成平級(jí)的元素，就需要使用 + 號(hào)
?? ??? ??? ??? ??? ?div+p+bq

?? ??? ??? ?生成上級(jí)元素：^
?? ??? ??? ??? ?上級(jí) （Climb-up）元素是什么意思呢？前面咱們說(shuō)過(guò)了生成下級(jí)元素的符號(hào)“>”，當(dāng)使用 div>ul>li 的指令之后，再繼續(xù)寫(xiě)下去，那么后續(xù)內(nèi)容都是在 li 下級(jí)的。如果我想編寫(xiě)一個(gè)跟 ul 平級(jí)的 span 標(biāo)簽，那么我需要先用 “^” 提升一下層次
?? ??? ??? ??? ??? ?div>ul>li^span

?? ??? ??? ?重復(fù)生成多份：*
?? ??? ??? ??? ?重復(fù)生成多份：*
?? ??? ??? ??? ?特別是一個(gè)無(wú)序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個(gè) li 標(biāo)簽。那么我們可以直接在 li 后面 * 上一些數(shù)字：
?? ??? ??? ??? ??? ?ul>li*5

?? ??? ??? ?生成分組：()
?? ??? ??? ??? ?用括號(hào)進(jìn)行分組，這樣可以更加明確要生成的結(jié)構(gòu)，特別是層次關(guān)系
?? ??? ??? ??? ??? ?div>(header>ul>li*2>a)+footer>p

?? ??? ??? ?生成自定義屬性：[attr]
?? ??? ??? ??? ?a 標(biāo)簽中往往需要附帶 href 屬性和 title 屬性，如果我們想生成一個(gè) href 為 “http://blog.wpjam.com” ，title 為“我愛(ài)水煮魚(yú)”的 a 標(biāo)簽
?? ??? ??? ??? ??? ?a[href="http://blog.wpjam.com" title="我愛(ài)水煮魚(yú)"]

?? ??? ??? ?對(duì)生成內(nèi)容編號(hào)：$
?? ??? ??? ??? ?如無(wú)序列表，我想為五個(gè) li 增加一個(gè) class 屬性值 item1 ，然后依次遞增從 1-5，那么就需要使用 $ 符號(hào)：
?? ??? ??? ??? ??? ?ul>li.item$*5
?? ??? ??? ??? ?$ 就表示一位數(shù)字，只出現(xiàn)一個(gè)的話，就從1開(kāi)始。如果出現(xiàn)多個(gè)，就從0開(kāi)始。如果我想生成三位數(shù)的序號(hào)，那么要寫(xiě)三個(gè) $
?? ??? ??? ??? ??? ?ul>li.item$$$*5
?? ??? ??? ??? ?只能這樣單調(diào)的生成序號(hào)？對(duì)于強(qiáng)大的 Emmet 來(lái)說(shuō)，肯定不會(huì)會(huì)了，我們也可以在 $ 后面增加 @- 來(lái)實(shí)現(xiàn)倒序排列
?? ??? ??? ??? ??? ?ul>li.item$@-*5
?? ??? ??? ??? ?同樣，我們也可以使用 @N 指定開(kāi)始的序號(hào)：
?? ??? ??? ??? ??? ?ul>li.item$@3*5

?? ??? ??? ?生成文本內(nèi)容：{}
?? ??? ??? ??? ?上面講解了如何生成 HTML 標(biāo)簽，那里面的內(nèi)容呢？當(dāng)然也可以生成了：
?? ??? ??? ??? ??? ?a[href="http://blog.wpjam.com"]{點(diǎn)擊這里到 我愛(ài)水煮魚(yú)}
?? ??? ??? ??? ?在生成內(nèi)容的時(shí)候，特別要注意前后的符號(hào)關(guān)系，雖然 a>{Click me} 和 a{Click me} 生成的結(jié)構(gòu)是相同的，但是加上其他的內(nèi)容就不一定了
?? ??? ??? ??? ??? ?<!-- a{click}+b{here} -->
?? ??? ??? ??? ??? ?<a href="">click</a><b>here</b>
?? ??? ??? ??? ??? ?<!-- a>{click}+b{here} -->
?? ??? ??? ??? ??? ?<a href="">click<b>here</b></a>

?? ??? ??? ?不要有空格
?? ??? ??? ??? ?在寫(xiě)指令的時(shí)候，你可能為了代碼的可讀性，使用一些空格什么的排版一下。這就會(huì)導(dǎo)致代碼無(wú)法使用。

?? ??? ?CSS中的應(yīng)用
?? ??? ??? ?編寫(xiě) position: absolute; 這一個(gè)屬性，我們只需要輸入 posa 這四個(gè)字母即可
?? ??? ??? ?1、簡(jiǎn)寫(xiě)屬性和屬性值
?? ??? ??? ??? ?如果你想生成 width:100px; 你只需要輸入 w100 就可以了，因?yàn)?Emmet 的默認(rèn)設(shè)置 w 是 width 的縮寫(xiě)，后面緊跟的數(shù)字就是屬性值。默認(rèn)的屬性值單位是 px ，你可以在值的后面緊跟字符生成單位，可以是任意字符。例如，w100foo 會(huì)生成 width:100foo; 這樣一條語(yǔ)句。你同樣也可以簡(jiǎn)寫(xiě)屬性單位，如果你緊跟屬性值后面的字符是 p ，那么將會(huì)生成 width:100%; 這樣的語(yǔ)句，其中 p 表示百分比單位。與此類似的還有：e → em; x → ex

?? ??? ??? ??? ?margin 這樣的屬性，可能并不是一個(gè)屬性值，生成多個(gè)屬性值需要用橫杠（-）連接兩個(gè)屬性值，因?yàn)?Emmet 的指令中是不允許空格的。例如使用 m10-20 這條命令可以生成 margin: 10px 20px; 這樣一條語(yǔ)句。如果你想生成負(fù)值，多加一條橫杠即可。需要注意的是，如果你對(duì)每個(gè)屬性都指定了單位，那么不需要使用橫杠分割。例如使用 m10ff20ff 這條命令可以生成 margin: 10ff 20ff; 這條語(yǔ)句，如果你在 20ff 前面加了橫杠的話，20ff 就會(huì)變成負(fù)值了

?? ??? ??? ??? ?你想一次生成多條語(yǔ)句，可以使用 ‘+’ 連接兩條語(yǔ)句，例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 這兩條語(yǔ)句

?? ??? ??? ??? ?顏色值也是可以快速生成的，例如 c#3 → color: #333;，更復(fù)雜一點(diǎn)的，使用 bd5#0s 可以生成border: 5px #000 solid; 這樣一句
?? ??? ??? ??? ??? ?#1 → #111111
?? ??? ??? ??? ??? ?#e0 → #e0e0e0
?? ??? ??? ??? ??? ?#fc0 → #ffcc00

?? ??? ??? ??? ?生成 !important 這條語(yǔ)句也當(dāng)然很簡(jiǎn)單，只需要一個(gè) ‘!’ 就可以了

?? ??? ??? ?2、增加額外的選項(xiàng)
?? ??? ??? ??? ?使用 @f 即可生成 CSS3 中的 font-face 的代碼結(jié)構(gòu)

?? ??? ??? ??? ?background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，我們可以在生成的時(shí)候輸入 ‘+’ 生成增強(qiáng)的結(jié)構(gòu)，例如我們可以輸入 @f+ 命令，即可輸出選項(xiàng)增強(qiáng)版的 font-face 結(jié)構(gòu)

?? ??? ??? ?3、增加實(shí)驗(yàn)性前綴（Vendor Prefixes）
?? ??? ??? ??? ?CSS3 等現(xiàn)在還沒(méi)有出正式的 W3C 規(guī)范，但是很多瀏覽器已經(jīng)實(shí)現(xiàn)了對(duì)應(yīng)的功能，僅作為測(cè)試只用，所以在屬性前面加上自己獨(dú)特的實(shí)驗(yàn)性前綴，不同的瀏覽器只會(huì)識(shí)別帶有自己規(guī)定前綴的樣式。然而為了實(shí)現(xiàn)兼容性，我們不得不編寫(xiě)大量的冗余代碼，而且要加上對(duì)應(yīng)的前綴。使用 Emmet 可以快速生成帶有前綴的 CSS3 屬性。

?? ??? ??? ??? ?內(nèi)置了一些常見(jiàn)的需要實(shí)驗(yàn)性前綴的 CSS3 屬性，例如輸入 trf 會(huì)彈出提示，然后敲擊回車鍵即可生成。而 Emmet 增強(qiáng)了這個(gè)功能。在任意字符前面加上一條橫杠（-），即可生成該屬性的帶前綴代碼，例如輸入 -foo-css

?? ??? ??? ??? ?雖然 foo-css 并不是什么屬性，但是照樣可以生成。此外，你還可以詳細(xì)的控制具體生成哪幾個(gè)瀏覽器前綴或者先后順序，使用 -wm-trf 即可生成

?? ??? ??? ??? ?w 就是 webkit 前綴的縮寫(xiě)，m 是 moz 前綴縮寫(xiě)，s 是 ms 前綴縮寫(xiě)，o 就是 opera 瀏覽器前綴的縮寫(xiě)。如果使用 -osmw-abc 即可生成

?? ??? ??? ?4、生成漸變背景
?? ??? ??? ??? ?CSS3 中新增加了一條屬性 linear-gradient 使用這個(gè)屬性可以直接制作出漸變的效果。但是這個(gè)屬性的參數(shù)比較復(fù)雜，而且需要添加實(shí)驗(yàn)性前綴，無(wú)疑需要生成大量代碼。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用 lg(left, #fff 50%, #000) 可以直接生成：

?? ??? ??? ?Emmet高級(jí)功能介紹：
?? ??? ??? ?5、生成 Lorem Ipsum
?? ??? ??? ??? ?Lorem Ipsum 表示一段隨機(jī)看不懂的文字。Lorem Ipsum的文字讓人看不懂，這樣才能忽略內(nèi)容的含義而專注內(nèi)容的排版，作為測(cè)試數(shù)據(jù)填充用的。使用 Emmet 生成Lorem Ipsum 文本非常簡(jiǎn)單，只需要使用 lorem 這一條命令即可，敲擊 Tab 鍵之后

?? ??? ??? ??? ?Emmet 的 lorem 命令不僅僅只有輸出這么一段文字這樣一個(gè)簡(jiǎn)單的功能，它既然作為測(cè)試數(shù)據(jù)，可以加上參數(shù)指定要輸出的字符數(shù)量。例如，我們?nèi)绻胼敵鲆粋€(gè)十個(gè)單詞的 h1 標(biāo)題，我們就可以使用如下命令 h1>lorem10 。但是這項(xiàng)功能對(duì)于使用中文的網(wǎng)頁(yè)測(cè)試來(lái)說(shuō)，好像沒(méi)有多大用處，畢竟中文和英語(yǔ)單詞的排版是不同的。

?? ??? ??? ?6、跳轉(zhuǎn)編輯區(qū)域
?? ??? ??? ??? ?用 Shift+Ctrl+. 和 Shift+Ctrl+,分別向下或者向上移動(dòng)，選取的是一整塊，先從標(biāo)簽開(kāi)始，再是整個(gè)屬性，再是屬性值。

?? ??? ??? ?7、增加圖片的尺寸大小
?? ??? ??? ??? ?將光標(biāo)移動(dòng)到代碼段，摁下 Ctrl+U 即可讓 Emmet 自動(dòng)讀取圖片的尺寸添加上。前提條件是圖片比較存在并且正確引用進(jìn)來(lái)了

?? ??? ??? ??? ?針對(duì) <img> 標(biāo)簽的，會(huì)在后面加上 width、height 屬性，如果是 background 引入的，會(huì)在下面加上 width、height 的 CSS 屬性

?? ??? ??? ?8、更新 CSS 的屬性值
?? ??? ??? ??? ?想修改一下旋轉(zhuǎn)的角度值，那么我們就需要依次修改或者按住 Ctrl 多個(gè)選中進(jìn)行修改。使用 Emmet 的話，就方便多了，我們只需要修改其中一個(gè)，然后摁下 Shift+Ctrl+R 鍵即可更新其他的相關(guān)屬性值

?? ??? ??? ?9、將圖片資源轉(zhuǎn)換成 data url 形式
?? ??? ??? ??? ?將光標(biāo)移動(dòng)到 background: url() 中的圖片位置的地方，按下 Ctrl+’ 即可將圖片編碼成 data url 格式。當(dāng)然，前提條件是圖片資源引用正確。

總結(jié)

以上是生活随笔為你收集整理的sublime使用教程及快捷方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。