第 30 章使用 Emmet 插件 · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 30 章使用 Emmet 插件學習要點： 1.安裝方式 2.自定義！生成 3.快速生成主講教師：李炎恢本章主要探討了解一下 Sublime Text3?的一個 HTML5?代碼提示插件：Emmet，這個插件比自帶原生的要強大許多。 **一．安裝方式** Emmet 插件安裝一般采用兩種方式，1.通過命令安裝；2.下載離線安裝。我這里直接采用的是下載離線安裝方式。具體步驟： 1.解壓下載好的?Emmet 插件包(這里會提供)； 2.將?Emmet 和?PyV8 兩個文件夾復制到?Sublime Text3 的程序包中； 3.左下角會顯示自動安裝，安裝好后，重啟?Sublime Text3；4.在編輯器輸入英文狀態下的“!”，然后?ctrl+e，出現了?HTML5 的代碼庫，則安裝成功。注：如果安裝失敗或出現其他錯誤，請自行百度選用其他方式安裝，或解決安裝出錯的問題。 **二．自定義！生成** 我們輸入!，然后 ctrl+e，默認情況下會出現如下代碼： //默認代碼 ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> ``` 這里有兩個地方和我們之前生成的代碼不一樣，第一處是：doctype?沒有大寫；第二處：lang?是 en?的。其實這兩處不改也沒有太大關系，但有強迫癥的看了可能會難受。具體修改方法如下： 1.首先，進入程序包?pagkages； 2.其次，進入?Emmet 文件夾，再進入?emmet 文件夾，找到?snippets.json 文件； 3.最后，打開這個文件，找到相應處修改即可。 **三．快速生成** Emmet 提供了非常豐富的?HTML 和?CSS 代碼的快速生成功能，通過使用快速生成代碼，極大的增加了開發速度。只不過，Emmet?提供的生成方式需要二次學習，起初可能還不如手工敲擊的快。所以，需要一定時間的學習磨合。 //快速生成?HTML5 代碼結構 ! + (ctrl + e 或?tab 鍵) 或?html:5 + tab 鍵 ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> ``` 所有代碼生成，都需要通過 tab?鍵來生成代碼，后面不在贅述。 //快速生成標簽代碼?a ``` <a href=""></a> ``` //快速生成標簽相應的屬性值a:link、a:mail ``` <a href="http://"></a> <a href="mailto:"></a> ``` //生成標簽內的值a{超鏈接} ``` <a href="">超鏈接</a> ``` //生成?CSS 鏈接?link link ``` <link rel="stylesheet" href=""> ``` //生成表單控件input、input:hidden ``` <input type="text"> <input type="hidden" name=""> ``` //生成帶子標簽的一組標簽ul+、ol+、dl+、table+ ``` <ul> <li></li> </ul> <ol> <li></li> </ol> <dl> <dt></dt> <dd></dd> </dl> <table> <tr> <td></td> </tr> </table> ``` //生成嵌套子標簽?nav>ul>li ``` <nav> <ul> <li></li> </ul> </nav> ``` //生成相鄰兄弟標簽?div+p+h1 ``` <div></div> <p></p> <h1></h1> ``` //生成乘積數量的標簽?ul>li*5 ``` <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> ``` //創建具有?ID 的標簽?div#header ``` <div id="header"></div> ``` //創建具有?class 的標簽 div.header、div.header.sidebar ``` <div class="header"></div> <div class="header sidebar"></div> ``` 以上是 HTML?部分的代碼生成功能，下面來看下 CSS?的快速生成功能： //生成?position: relative pos 輸入 pos?即可出現 position:relative?這組 CSS?樣式，并且 relative?是選定狀態，有助于你更換屬性值。但是我們發現使用 sublime?結合 Emmet?插件的 CSS?提示非常的靈活，不會死板的必須要輸入 pos。下面的輸入都可以得到相應的值： po = position: relative 只要輸入 po?或者大于 po?字母量的值，都可以得到 position:relative。當然，如果你只是輸入 p，那么由于優先級的考慮，出現的是 padding: |。如果你輸入有誤，它也會自動糾錯，比如下面這個： pod = position: relative 如果你想一開始得到的是 absolute?這個屬性值，那么直接輸入： poa = position: absolute; 當然，上門的標準寫法是這樣的： pos:a = position: absolute; 如果想輸入背景的屬性，直接使用 bg?即可： bg = background: |; 使用 bg+可以展開背景屬性的完整形式： bg+ = background: #fff url() 0 0 no-repeat; 使用 bg:n?可以設置背景屬性值為 none： bg:n = background: none; 備注：HTML?和 CSS?其他大部分代碼生成方案，可以參考如下網址： **http://docs.emmet.io/cheat-sheet/**