sublime使用教程及快捷方式
生活随笔
收集整理的這篇文章主要介紹了
sublime使用教程及快捷方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
（本內容基于Windows環境）
一、已安裝有Sublime Text3
二、安裝Package Control
?? ?安裝這個后，可以在線安裝所需的插件
?? ?方法1、Ctrl+~打開控制臺，在控制臺輸入如下的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插件包到插件目錄
?? ??? ?插件目錄在菜單中打開Preference--Browse Packages，沒有自己新建一個
?? ?按照提示重啟Sublime Text3，如果在Preferences->package settings中有看到package control這一項，則安裝成功，如果沒有，參照方法2可以下載package Control手動安裝
三、安裝插件
?? ?常用的命令：Install Package（安裝擴展）
?? ??? ??? ??? ?List Package（列出全部擴展）
?? ??? ??? ??? ?Remove Package（移除擴展）
?? ??? ??? ??? ?Upgrade Package（升級擴展）
?? ?1、Emmet插件的安裝
?? ??? ?1）Ctrl+Shift+P：調出控制面板
?? ??? ?2）搜索框鍵入Install Package命令（也可以簡寫）并回車，然后在列表選擇Emmet（也可以直接搜索Emmett進行檢索）
?? ??? ?3）點擊確定等待安裝
?? ??? ?4）自動安裝結束會自動彈出一個插件的安裝信息的文件。重新調出控制面板，鍵入List Package列出全部擴展，查看是否已經安裝成功。
?? ??? ?
?? ??? ?Emmet常用技巧：（輸入下面簡寫，按Tab鍵可觸發效果）
?? ??? ??? ?
?? ??? ??? ?生成 HTML 文檔初始結構
?? ??? ??? ??? ?html:5 或者 ! 生成 HTML5 結構
?? ??? ??? ??? ?html:xt 生成 HTML4 過渡型
?? ??? ??? ??? ?html:4s 生成 HTML4 嚴格型
?? ??? ??? ?生成帶有 id 、class 的 HTML 標簽
?? ??? ??? ??? ?Emmet 默認的標簽為 div ，如果我們不給出標簽名稱的話，默認就生成 div 標簽。
?? ??? ??? ??? ?編寫一個 class 為 bbb 的 span 標簽，我們需要編寫下面指令：
?? ??? ??? ??? ??? ?span.bbb
?? ??? ??? ??? ?編寫一個 id 為 ccc 的 class 為 ddd 的 ul 標簽
?? ??? ??? ??? ??? ?ul#ccc.ddd
?? ??? ??? ?生成后代：>
?? ??? ??? ??? ?大于號表示后面要生成的內容是當前標簽的后代。
?? ??? ??? ??? ?要生成一個無序列表，而且被 class 為 aaa 的 div 包裹
?? ??? ??? ??? ??? ?div.aaa>ul>li
?? ??? ??? ??? ?生成一個有序列表
?? ??? ??? ??? ??? ?.abc>ol>li
?? ??? ??? ?生成兄弟：+
?? ??? ??? ??? ?上面是生成下級元素，如果想要生成平級的元素，就需要使用 + 號
?? ??? ??? ??? ??? ?div+p+bq
?? ??? ??? ?生成上級元素：^
?? ??? ??? ??? ?上級 （Climb-up）元素是什么意思呢？前面咱們說過了生成下級元素的符號“>”，當使用 div>ul>li 的指令之后，再繼續寫下去，那么后續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標簽，那么我需要先用 “^” 提升一下層次
?? ??? ??? ??? ??? ?div>ul>li^span
?? ??? ??? ?重復生成多份：*
?? ??? ??? ??? ?重復生成多份：*
?? ??? ??? ??? ?特別是一個無序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個 li 標簽。那么我們可以直接在 li 后面 * 上一些數字：
?? ??? ??? ??? ??? ?ul>li*5
?? ??? ??? ?生成分組：()
?? ??? ??? ??? ?用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關系
?? ??? ??? ??? ??? ?div>(header>ul>li*2>a)+footer>p
?? ??? ??? ?生成自定義屬性：[attr]
?? ??? ??? ??? ?a 標簽中往往需要附帶 href 屬性和 title 屬性，如果我們想生成一個 href 為 “http://blog.wpjam.com” ，title 為“我愛水煮魚”的 a 標簽
?? ??? ??? ??? ??? ?a[href="http://blog.wpjam.com" title="我愛水煮魚"]
?? ??? ??? ?對生成內容編號：$
?? ??? ??? ??? ?如無序列表，我想為五個 li 增加一個 class 屬性值 item1 ，然后依次遞增從 1-5，那么就需要使用 $ 符號：
?? ??? ??? ??? ??? ?ul>li.item$*5
?? ??? ??? ??? ?$ 就表示一位數字，只出現一個的話，就從1開始。如果出現多個，就從0開始。如果我想生成三位數的序號，那么要寫三個 $
?? ??? ??? ??? ??? ?ul>li.item$$$*5
?? ??? ??? ??? ?只能這樣單調的生成序號？對于強大的 Emmet 來說，肯定不會會了，我們也可以在 $ 后面增加 @- 來實現倒序排列
?? ??? ??? ??? ??? ?ul>li.item$@-*5
?? ??? ??? ??? ?同樣，我們也可以使用 @N 指定開始的序號：
?? ??? ??? ??? ??? ?ul>li.item$@3*5
?? ??? ??? ?生成文本內容：{}
?? ??? ??? ??? ?上面講解了如何生成 HTML 標簽，那里面的內容呢？當然也可以生成了：
?? ??? ??? ??? ??? ?a[href="http://blog.wpjam.com"]{點擊這里到 我愛水煮魚}
?? ??? ??? ??? ?在生成內容的時候，特別要注意前后的符號關系，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，但是加上其他的內容就不一定了
?? ??? ??? ??? ??? ?<!-- a{click}+b{here} -->
?? ??? ??? ??? ??? ?<a href="">click</a><b>here</b>
?? ??? ??? ??? ??? ?<!-- a>{click}+b{here} -->
?? ??? ??? ??? ??? ?<a href="">click<b>here</b></a>
?? ??? ??? ?不要有空格
?? ??? ??? ??? ?在寫指令的時候，你可能為了代碼的可讀性，使用一些空格什么的排版一下。這就會導致代碼無法使用。
?? ??? ?CSS中的應用
?? ??? ??? ?編寫 position: absolute; 這一個屬性，我們只需要輸入 posa 這四個字母即可
?? ??? ??? ?1、簡寫屬性和屬性值
?? ??? ??? ??? ?如果你想生成 width:100px; 你只需要輸入 w100 就可以了，因為 Emmet 的默認設置 w 是 width 的縮寫，后面緊跟的數字就是屬性值。默認的屬性值單位是 px ，你可以在值的后面緊跟字符生成單位，可以是任意字符。例如，w100foo 會生成 width:100foo; 這樣一條語句。你同樣也可以簡寫屬性單位，如果你緊跟屬性值后面的字符是 p ，那么將會生成 width:100%; 這樣的語句，其中 p 表示百分比單位。與此類似的還有：e → em; x → ex
?? ??? ??? ??? ?margin 這樣的屬性，可能并不是一個屬性值，生成多個屬性值需要用橫杠（-）連接兩個屬性值，因為 Emmet 的指令中是不允許空格的。例如使用 m10-20 這條命令可以生成 margin: 10px 20px; 這樣一條語句。如果你想生成負值，多加一條橫杠即可。需要注意的是，如果你對每個屬性都指定了單位，那么不需要使用橫杠分割。例如使用 m10ff20ff 這條命令可以生成 margin: 10ff 20ff; 這條語句，如果你在 20ff 前面加了橫杠的話，20ff 就會變成負值了
?? ??? ??? ??? ?你想一次生成多條語句，可以使用 ‘+’ 連接兩條語句，例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 這兩條語句
?? ??? ??? ??? ?顏色值也是可以快速生成的，例如 c#3 → color: #333;，更復雜一點的，使用 bd5#0s 可以生成border: 5px #000 solid; 這樣一句
?? ??? ??? ??? ??? ?#1 → #111111
?? ??? ??? ??? ??? ?#e0 → #e0e0e0
?? ??? ??? ??? ??? ?#fc0 → #ffcc00
?? ??? ??? ??? ?生成 !important 這條語句也當然很簡單，只需要一個 ‘!’ 就可以了
?? ??? ??? ?2、增加額外的選項
?? ??? ??? ??? ?使用 @f 即可生成 CSS3 中的 font-face 的代碼結構
?? ??? ??? ??? ?background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，我們可以在生成的時候輸入 ‘+’ 生成增強的結構，例如我們可以輸入 @f+ 命令，即可輸出選項增強版的 font-face 結構
?? ??? ??? ?3、增加實驗性前綴（Vendor Prefixes）
?? ??? ??? ??? ?CSS3 等現在還沒有出正式的 W3C 規范，但是很多瀏覽器已經實現了對應的功能，僅作為測試只用，所以在屬性前面加上自己獨特的實驗性前綴，不同的瀏覽器只會識別帶有自己規定前綴的樣式。然而為了實現兼容性，我們不得不編寫大量的冗余代碼，而且要加上對應的前綴。使用 Emmet 可以快速生成帶有前綴的 CSS3 屬性。
?? ??? ??? ??? ?內置了一些常見的需要實驗性前綴的 CSS3 屬性，例如輸入 trf 會彈出提示，然后敲擊回車鍵即可生成。而 Emmet 增強了這個功能。在任意字符前面加上一條橫杠（-），即可生成該屬性的帶前綴代碼，例如輸入 -foo-css
?? ??? ??? ??? ?雖然 foo-css 并不是什么屬性，但是照樣可以生成。此外，你還可以詳細的控制具體生成哪幾個瀏覽器前綴或者先后順序，使用 -wm-trf 即可生成
?? ??? ??? ??? ?w 就是 webkit 前綴的縮寫，m 是 moz 前綴縮寫，s 是 ms 前綴縮寫，o 就是 opera 瀏覽器前綴的縮寫。如果使用 -osmw-abc 即可生成
?? ??? ??? ?4、生成漸變背景
?? ??? ??? ??? ?CSS3 中新增加了一條屬性 linear-gradient 使用這個屬性可以直接制作出漸變的效果。但是這個屬性的參數比較復雜，而且需要添加實驗性前綴，無疑需要生成大量代碼。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用 lg(left, #fff 50%, #000) 可以直接生成：
?? ??? ??? ?Emmet高級功能介紹：
?? ??? ??? ?5、生成 Lorem Ipsum
?? ??? ??? ??? ?Lorem Ipsum 表示一段隨機看不懂的文字。Lorem Ipsum的文字讓人看不懂，這樣才能忽略內容的含義而專注內容的排版，作為測試數據填充用的。使用 Emmet 生成Lorem Ipsum 文本非常簡單，只需要使用 lorem 這一條命令即可，敲擊 Tab 鍵之后
?? ??? ??? ??? ?Emmet 的 lorem 命令不僅僅只有輸出這么一段文字這樣一個簡單的功能，它既然作為測試數據，可以加上參數指定要輸出的字符數量。例如，我們如果想輸出一個十個單詞的 h1 標題，我們就可以使用如下命令 h1>lorem10 。但是這項功能對于使用中文的網頁測試來說，好像沒有多大用處，畢竟中文和英語單詞的排版是不同的。
?? ??? ??? ?6、跳轉編輯區域
?? ??? ??? ??? ?用 Shift+Ctrl+. 和 Shift+Ctrl+,分別向下或者向上移動，選取的是一整塊，先從標簽開始，再是整個屬性，再是屬性值。
?? ??? ??? ?7、增加圖片的尺寸大小
?? ??? ??? ??? ?將光標移動到代碼段，摁下 Ctrl+U 即可讓 Emmet 自動讀取圖片的尺寸添加上。前提條件是圖片比較存在并且正確引用進來了
?? ??? ??? ??? ?針對 <img> 標簽的，會在后面加上 width、height 屬性，如果是 background 引入的，會在下面加上 width、height 的 CSS 屬性
?? ??? ??? ?8、更新 CSS 的屬性值
?? ??? ??? ??? ?想修改一下旋轉的角度值，那么我們就需要依次修改或者按住 Ctrl 多個選中進行修改。使用 Emmet 的話，就方便多了，我們只需要修改其中一個，然后摁下 Shift+Ctrl+R 鍵即可更新其他的相關屬性值
?? ??? ??? ?9、將圖片資源轉換成 data url 形式
?? ??? ??? ??? ?將光標移動到 background: url() 中的圖片位置的地方，按下 Ctrl+’ 即可將圖片編碼成 data url 格式。當然，前提條件是圖片資源引用正確。
一、已安裝有Sublime Text3
二、安裝Package Control
?? ?安裝這個后，可以在線安裝所需的插件
?? ?方法1、Ctrl+~打開控制臺，在控制臺輸入如下的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插件包到插件目錄
?? ??? ?插件目錄在菜單中打開Preference--Browse Packages，沒有自己新建一個
?? ?按照提示重啟Sublime Text3，如果在Preferences->package settings中有看到package control這一項，則安裝成功，如果沒有，參照方法2可以下載package Control手動安裝
三、安裝插件
?? ?常用的命令：Install Package（安裝擴展）
?? ??? ??? ??? ?List Package（列出全部擴展）
?? ??? ??? ??? ?Remove Package（移除擴展）
?? ??? ??? ??? ?Upgrade Package（升級擴展）
?? ?1、Emmet插件的安裝
?? ??? ?1）Ctrl+Shift+P：調出控制面板
?? ??? ?2）搜索框鍵入Install Package命令（也可以簡寫）并回車，然后在列表選擇Emmet（也可以直接搜索Emmett進行檢索）
?? ??? ?3）點擊確定等待安裝
?? ??? ?4）自動安裝結束會自動彈出一個插件的安裝信息的文件。重新調出控制面板，鍵入List Package列出全部擴展，查看是否已經安裝成功。
?? ??? ?
?? ??? ?Emmet常用技巧：（輸入下面簡寫，按Tab鍵可觸發效果）
?? ??? ??? ?
?? ??? ??? ?生成 HTML 文檔初始結構
?? ??? ??? ??? ?html:5 或者 ! 生成 HTML5 結構
?? ??? ??? ??? ?html:xt 生成 HTML4 過渡型
?? ??? ??? ??? ?html:4s 生成 HTML4 嚴格型
?? ??? ??? ?生成帶有 id 、class 的 HTML 標簽
?? ??? ??? ??? ?Emmet 默認的標簽為 div ，如果我們不給出標簽名稱的話，默認就生成 div 標簽。
?? ??? ??? ??? ?編寫一個 class 為 bbb 的 span 標簽，我們需要編寫下面指令：
?? ??? ??? ??? ??? ?span.bbb
?? ??? ??? ??? ?編寫一個 id 為 ccc 的 class 為 ddd 的 ul 標簽
?? ??? ??? ??? ??? ?ul#ccc.ddd
?? ??? ??? ?生成后代：>
?? ??? ??? ??? ?大于號表示后面要生成的內容是當前標簽的后代。
?? ??? ??? ??? ?要生成一個無序列表，而且被 class 為 aaa 的 div 包裹
?? ??? ??? ??? ??? ?div.aaa>ul>li
?? ??? ??? ??? ?生成一個有序列表
?? ??? ??? ??? ??? ?.abc>ol>li
?? ??? ??? ?生成兄弟：+
?? ??? ??? ??? ?上面是生成下級元素，如果想要生成平級的元素，就需要使用 + 號
?? ??? ??? ??? ??? ?div+p+bq
?? ??? ??? ?生成上級元素：^
?? ??? ??? ??? ?上級 （Climb-up）元素是什么意思呢？前面咱們說過了生成下級元素的符號“>”，當使用 div>ul>li 的指令之后，再繼續寫下去，那么后續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標簽，那么我需要先用 “^” 提升一下層次
?? ??? ??? ??? ??? ?div>ul>li^span
?? ??? ??? ?重復生成多份：*
?? ??? ??? ??? ?重復生成多份：*
?? ??? ??? ??? ?特別是一個無序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個 li 標簽。那么我們可以直接在 li 后面 * 上一些數字：
?? ??? ??? ??? ??? ?ul>li*5
?? ??? ??? ?生成分組：()
?? ??? ??? ??? ?用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關系
?? ??? ??? ??? ??? ?div>(header>ul>li*2>a)+footer>p
?? ??? ??? ?生成自定義屬性：[attr]
?? ??? ??? ??? ?a 標簽中往往需要附帶 href 屬性和 title 屬性，如果我們想生成一個 href 為 “http://blog.wpjam.com” ，title 為“我愛水煮魚”的 a 標簽
?? ??? ??? ??? ??? ?a[href="http://blog.wpjam.com" title="我愛水煮魚"]
?? ??? ??? ?對生成內容編號：$
?? ??? ??? ??? ?如無序列表，我想為五個 li 增加一個 class 屬性值 item1 ，然后依次遞增從 1-5，那么就需要使用 $ 符號：
?? ??? ??? ??? ??? ?ul>li.item$*5
?? ??? ??? ??? ?$ 就表示一位數字，只出現一個的話，就從1開始。如果出現多個，就從0開始。如果我想生成三位數的序號，那么要寫三個 $
?? ??? ??? ??? ??? ?ul>li.item$$$*5
?? ??? ??? ??? ?只能這樣單調的生成序號？對于強大的 Emmet 來說，肯定不會會了，我們也可以在 $ 后面增加 @- 來實現倒序排列
?? ??? ??? ??? ??? ?ul>li.item$@-*5
?? ??? ??? ??? ?同樣，我們也可以使用 @N 指定開始的序號：
?? ??? ??? ??? ??? ?ul>li.item$@3*5
?? ??? ??? ?生成文本內容：{}
?? ??? ??? ??? ?上面講解了如何生成 HTML 標簽，那里面的內容呢？當然也可以生成了：
?? ??? ??? ??? ??? ?a[href="http://blog.wpjam.com"]{點擊這里到 我愛水煮魚}
?? ??? ??? ??? ?在生成內容的時候，特別要注意前后的符號關系，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，但是加上其他的內容就不一定了
?? ??? ??? ??? ??? ?<!-- a{click}+b{here} -->
?? ??? ??? ??? ??? ?<a href="">click</a><b>here</b>
?? ??? ??? ??? ??? ?<!-- a>{click}+b{here} -->
?? ??? ??? ??? ??? ?<a href="">click<b>here</b></a>
?? ??? ??? ?不要有空格
?? ??? ??? ??? ?在寫指令的時候，你可能為了代碼的可讀性，使用一些空格什么的排版一下。這就會導致代碼無法使用。
?? ??? ?CSS中的應用
?? ??? ??? ?編寫 position: absolute; 這一個屬性，我們只需要輸入 posa 這四個字母即可
?? ??? ??? ?1、簡寫屬性和屬性值
?? ??? ??? ??? ?如果你想生成 width:100px; 你只需要輸入 w100 就可以了，因為 Emmet 的默認設置 w 是 width 的縮寫，后面緊跟的數字就是屬性值。默認的屬性值單位是 px ，你可以在值的后面緊跟字符生成單位，可以是任意字符。例如，w100foo 會生成 width:100foo; 這樣一條語句。你同樣也可以簡寫屬性單位，如果你緊跟屬性值后面的字符是 p ，那么將會生成 width:100%; 這樣的語句，其中 p 表示百分比單位。與此類似的還有：e → em; x → ex
?? ??? ??? ??? ?margin 這樣的屬性，可能并不是一個屬性值，生成多個屬性值需要用橫杠（-）連接兩個屬性值，因為 Emmet 的指令中是不允許空格的。例如使用 m10-20 這條命令可以生成 margin: 10px 20px; 這樣一條語句。如果你想生成負值，多加一條橫杠即可。需要注意的是，如果你對每個屬性都指定了單位，那么不需要使用橫杠分割。例如使用 m10ff20ff 這條命令可以生成 margin: 10ff 20ff; 這條語句，如果你在 20ff 前面加了橫杠的話，20ff 就會變成負值了
?? ??? ??? ??? ?你想一次生成多條語句，可以使用 ‘+’ 連接兩條語句，例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 這兩條語句
?? ??? ??? ??? ?顏色值也是可以快速生成的，例如 c#3 → color: #333;，更復雜一點的，使用 bd5#0s 可以生成border: 5px #000 solid; 這樣一句
?? ??? ??? ??? ??? ?#1 → #111111
?? ??? ??? ??? ??? ?#e0 → #e0e0e0
?? ??? ??? ??? ??? ?#fc0 → #ffcc00
?? ??? ??? ??? ?生成 !important 這條語句也當然很簡單，只需要一個 ‘!’ 就可以了
?? ??? ??? ?2、增加額外的選項
?? ??? ??? ??? ?使用 @f 即可生成 CSS3 中的 font-face 的代碼結構
?? ??? ??? ??? ?background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，我們可以在生成的時候輸入 ‘+’ 生成增強的結構，例如我們可以輸入 @f+ 命令，即可輸出選項增強版的 font-face 結構
?? ??? ??? ?3、增加實驗性前綴（Vendor Prefixes）
?? ??? ??? ??? ?CSS3 等現在還沒有出正式的 W3C 規范，但是很多瀏覽器已經實現了對應的功能，僅作為測試只用，所以在屬性前面加上自己獨特的實驗性前綴，不同的瀏覽器只會識別帶有自己規定前綴的樣式。然而為了實現兼容性，我們不得不編寫大量的冗余代碼，而且要加上對應的前綴。使用 Emmet 可以快速生成帶有前綴的 CSS3 屬性。
?? ??? ??? ??? ?內置了一些常見的需要實驗性前綴的 CSS3 屬性，例如輸入 trf 會彈出提示，然后敲擊回車鍵即可生成。而 Emmet 增強了這個功能。在任意字符前面加上一條橫杠（-），即可生成該屬性的帶前綴代碼，例如輸入 -foo-css
?? ??? ??? ??? ?雖然 foo-css 并不是什么屬性，但是照樣可以生成。此外，你還可以詳細的控制具體生成哪幾個瀏覽器前綴或者先后順序，使用 -wm-trf 即可生成
?? ??? ??? ??? ?w 就是 webkit 前綴的縮寫，m 是 moz 前綴縮寫，s 是 ms 前綴縮寫，o 就是 opera 瀏覽器前綴的縮寫。如果使用 -osmw-abc 即可生成
?? ??? ??? ?4、生成漸變背景
?? ??? ??? ??? ?CSS3 中新增加了一條屬性 linear-gradient 使用這個屬性可以直接制作出漸變的效果。但是這個屬性的參數比較復雜，而且需要添加實驗性前綴，無疑需要生成大量代碼。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用 lg(left, #fff 50%, #000) 可以直接生成：
?? ??? ??? ?Emmet高級功能介紹：
?? ??? ??? ?5、生成 Lorem Ipsum
?? ??? ??? ??? ?Lorem Ipsum 表示一段隨機看不懂的文字。Lorem Ipsum的文字讓人看不懂，這樣才能忽略內容的含義而專注內容的排版，作為測試數據填充用的。使用 Emmet 生成Lorem Ipsum 文本非常簡單，只需要使用 lorem 這一條命令即可，敲擊 Tab 鍵之后
?? ??? ??? ??? ?Emmet 的 lorem 命令不僅僅只有輸出這么一段文字這樣一個簡單的功能，它既然作為測試數據，可以加上參數指定要輸出的字符數量。例如，我們如果想輸出一個十個單詞的 h1 標題，我們就可以使用如下命令 h1>lorem10 。但是這項功能對于使用中文的網頁測試來說，好像沒有多大用處，畢竟中文和英語單詞的排版是不同的。
?? ??? ??? ?6、跳轉編輯區域
?? ??? ??? ??? ?用 Shift+Ctrl+. 和 Shift+Ctrl+,分別向下或者向上移動，選取的是一整塊，先從標簽開始，再是整個屬性，再是屬性值。
?? ??? ??? ?7、增加圖片的尺寸大小
?? ??? ??? ??? ?將光標移動到代碼段，摁下 Ctrl+U 即可讓 Emmet 自動讀取圖片的尺寸添加上。前提條件是圖片比較存在并且正確引用進來了
?? ??? ??? ??? ?針對 <img> 標簽的，會在后面加上 width、height 屬性，如果是 background 引入的，會在下面加上 width、height 的 CSS 屬性
?? ??? ??? ?8、更新 CSS 的屬性值
?? ??? ??? ??? ?想修改一下旋轉的角度值，那么我們就需要依次修改或者按住 Ctrl 多個選中進行修改。使用 Emmet 的話，就方便多了，我們只需要修改其中一個，然后摁下 Shift+Ctrl+R 鍵即可更新其他的相關屬性值
?? ??? ??? ?9、將圖片資源轉換成 data url 形式
?? ??? ??? ??? ?將光標移動到 background: url() 中的圖片位置的地方，按下 Ctrl+’ 即可將圖片編碼成 data url 格式。當然，前提條件是圖片資源引用正確。
總結
以上是生活随笔為你收集整理的sublime使用教程及快捷方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mac 如何使用外部存储设备，移动硬盘备
- 下一篇： python入门小程序之列表练习