Sublime Text3經常使用插件安裝（Emmet插件指令介紹）

最近在使用sublime text3，這個功能真真是強大的。

按照網上的操做方式，作了兩次嘗試：

第一次：

先關閉Sublime text 3：

第一步：下載sublime_package_control-master.zip ，解壓命名文件夾爲Package Control。(注意大小寫)

第二步：下載sublime_package_control-python3.zip，解壓後覆蓋到剛剛的Package Control中，完成插件API函數的更新。

第三步：打開Sublime Text 3，選擇菜單：Preference-->Browse Package... 瀏覽插件

第四步：把Package Control複製到此目錄，重啓 Sublime text 3。

而後菜單Preferences就會多了兩個Package..的東西以下： Package Control 安裝成功

第五步：點擊菜單Preference-->Package Control

點擊Install Package

這時就出現問題了，根本找不到Install Package這個命令。

重啓以後有這個命令了，可是點擊以後，彈窗提示no  avliable package .

第一種方式失敗

第二種嘗試：

2、安裝Package Control

    安裝這個後，能夠在線安裝所需的插件

    方法一、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())

    等待下載安裝。

    方法二、下載Package Control插件包到插件目錄

        插件目錄在菜單中打開Preference--Browse Packages，沒有本身新建一個

    按照提示重啓Sublime Text3，若是在Preferences->package settings中有看到package control這一項，則安裝成功，若是沒有，參照方法2能夠下載package Control手動安裝

3、安裝插件

    經常使用的命令：Install Package（安裝擴展）

                List Package（列出所有擴展）

                Remove Package（移除擴展）

                Upgrade Package（升級擴展）

    一、Emmet插件的安裝

        1）Ctrl+Shift+P：調出控制面板

        2）搜索框鍵入Install Package命令（也能夠簡寫）並回車，而後在列表選擇Emmet（也能夠直接搜索Emmett進行檢索）

        3）點擊肯定等待安裝

        4）自動安裝結束會自動彈出一個插件的安裝信息的文件。從新調出控制面板，鍵入List Package列出所有擴展，查看是否已經安裝成功。

第二種方式ok

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 這四個字母便可
            一、簡寫屬性和屬性值
                若是你想生成 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 這條語句也固然很簡單，只須要一個 ‘!’ 就能夠了
            二、增長額外的選項
                使用 @f 便可生成 CSS3 中的 font-face 的代碼結構
                background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，咱們能夠在生成的時候輸入 ‘+’ 生成加強的結構，例如咱們能夠輸入 @f+ 命令，便可輸出選項加強版的 font-face 結構
            三、增長實驗性前綴（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 便可生成
            四、生成漸變背景
                CSS3 中新增長了一條屬性 linear-gradient 使用這個屬性能夠直接製做出漸變的效果。可是這個屬性的參數比較複雜，並且須要添加實驗性前綴，無疑須要生成大量代碼。而在 Emmet 中使用 lg() 指令便可快速生成，例如：使用 lg(left, #fff 50%, #000) 能夠直接生成：
            Emmet高級功能介紹：
            五、生成 Lorem Ipsum
                Lorem Ipsum 表示一段隨機看不懂的文字。Lorem Ipsum的文字讓人看不懂，這樣才能忽略內容的含義而專一內容的排版，做爲測試數據填充用的。使用 Emmet 生成Lorem Ipsum 文本很是簡單，只須要使用 lorem 這一條命令便可，敲擊 Tab 鍵以後
                Emmet 的 lorem 命令不只僅只有輸出這麼一段文字這樣一個簡單的功能，它既然做爲測試數據，能夠加上參數指定要輸出的字符數量。例如，咱們若是想輸出一個十個單詞的 h1 標題，咱們就可使用以下命令 h1>lorem10 。可是這項功能對於使用中文的網頁測試來講，好像沒有多大用處，畢竟中文和英語單詞的排版是不一樣的。
            六、跳轉編輯區域
                用 Shift+Ctrl+. 和 Shift+Ctrl+,分別向下或者向上移動，選取的是一整塊，先從標籤開始，再是整個屬性，再是屬性值。
            七、增長圖片的尺寸大小
                將光標移動到代碼段，摁下 Ctrl+U 便可讓 Emmet 自動讀取圖片的尺寸添加上。前提條件是圖片比較存在而且正確引用進來了
                針對 <img> 標籤的，會在後面加上 width、height 屬性，若是是 background 引入的，會在下面加上 width、height 的 CSS 屬性
            八、更新 CSS 的屬性值
                想修改一下旋轉的角度值，那麼咱們就須要依次修改或者按住 Ctrl 多個選中進行修改。使用 Emmet 的話，就方便多了，咱們只須要修改其中一個，而後摁下 Shift+Ctrl+R 鍵便可更新其餘的相關屬性值
            九、將圖片資源轉換成 data url 形式
                將光標移動到 background: url() 中的圖片位置的地方，按下 Ctrl+’ 便可將圖片編碼成 data url 格式。固然，前提條件是圖片資源引用正確

輸入完命令以後，須要點擊Ctrl+E，實現效果