Emmet 插件使用教程

時間 2020-06-03

標籤 emmet 插件使用教程简体版

原文原文鏈接

1）使用 Emmet 生成 HTML 的語法詳解
生成 HTML 文檔初始結構css

HTML 文檔的初始結構，就是包括 doctype、html、head、body 以及 meta 等內容。你只須要輸入一個「!」就能夠生成一個 HTML5 的標準文檔初始結構，你沒有看錯，輸入一個感嘆號（固然是英文符號），而後摁下 TAB 鍵，就會發現生成了下面的結構：html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title>Document</title>
</head>
<body>
<!-- code... -->
</body>
</html>

這就是一個 HTML5 的標準結構，也是默認的 HTML 結構。若是你想生成 HTML4 的過渡型結構，那麼輸入指令 html:xt 便可生成以下結構：git

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    < title>Document</title>
</head>
<body>

</body>
</html>

Emmet 會自動把 doctype 給你補全了，怎麼樣，這樣的功能會不會讓你動心？簡單總結一下經常使用的 HTML 結構指令：github

html:5 或者 ! 生成 HTML5 結構
html:xt 生成 HTML4 過渡型
html:4s 生成 HTML4 嚴格型
生成帶有 id 、class 的 HTML 標籤web

Emmet 的語法有點相似 CSS 的語法，生成 id 爲 aaa 的 div 標籤，咱們只須要編寫下面指令：c#

#aaa

Emmet 默認的標籤爲 div ，若是咱們不給出標籤名稱的話，默認就生成 div 標籤。若是編寫一個 class 爲 bbb 的 span 標籤，咱們須要編寫下面指令：瀏覽器

span.bbb

而後就生成了對應的結構。同理，若是想要編寫一個 id 爲 ccc 的 class 爲 ddd 的 ul 標籤，咱們能夠這樣寫：svg

ul#ccc.ddd

很簡單吧？比你用手寫 id 、class 方便多了吧工具

生成後代：>測試

大於號表示後面要生成的內容是當前標籤的後代。例如我要生成一個無序列表，並且被 class 爲 aaa 的 div 包裹，那麼可使用下面指令：

div.aaa>ul>li

能夠生成以下的結構：

<div class="aaa">
    <ul>
        <li></li>
    </ul>
</div>

生成兄弟：+

上面是生成下級元素，若是想要生成平級的元素，就須要使用 + 號。例以下面指令：

div+p+bq

就能夠生成以下的 HTML 結構：

<div></div>
<p></p>
<blockquote></blockquote>

生成上級元素：^

上級（Climb-up）元素是什麼意思呢？前面我們說過了生成下級元素的符號「>」，當使用 div>ul>li 的指令以後，再繼續寫下去，那麼後續內容都是在 li 下級的。若是我想編寫一個跟 ul 平級的 span 標籤，那麼我須要先用「^」提高一下層次。例如：

div>ul>li^span

就會生成以下結構：

<div>
    <ul>
        <li></li>
    </ul>
    <span></span>
</div>

若是我想相對與 div 生成一個平級元素，那麼就再上升一個層次，多用一個「^」符號：

div>ul>li^^span

重複生成多份：*

特別是一個無序列表，ul 下面的 li 確定不僅是一份，一般要生成不少個 li 標籤。那麼咱們能夠直接在 li 後面 * 上一些數字：

ul>li*5

這樣就直接生成五個項目的無序列表了。若是想要生成多份其餘結構，方法相似。

生成分組：()

用括號進行分組，這樣能夠更加明確要生成的結構，特別是層次關係，例如：

div>(header>ul>li*2>a)+footer>p

這樣很明顯就能夠看出層次關係和並列關係，生成以下結構：

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

此外，分組還能夠很方便的結合上面說的 "*" 符號生成重複結構：

(div>dl>(dt+dd)*3)+footer>p

生成結構：

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

生成自定義屬性：[attr]

a 標籤中每每須要附帶 href 屬性和 title 屬性，若是咱們想生成一個 href 爲 http://www.yunxiu.org/blog ，title 爲「我愛水煮魚」的 a 標籤，能夠這樣寫：

a[href="http://www.yunxiu.org/blog" title="雲袖網"]

其餘標籤和屬性都相似。

對生成內容編號：$

例如無序列表，我想爲五個個 li 增長一個 class 屬性值 item1 ，而後依次遞增從 1-5，那麼就須要使用 $ 符號：

ul>li.item$*5

這樣就生成了以下結構：

<ul>
 <li class="item1"></li>
 <li class="item2"></li>
 <li class="item3"></li>
 <li class="item4"></li>
 <li class="item5"></li>
</ul>

$ 就表示一位數字，只出現一個的話，就從1開始。若是出現多個，就從0開始。若是我想生成三位數的序號，那麼要寫三個 $：

ul>li.item$$$*5

輸出：

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

只能這樣單調的生成序號？對於強大的 Emmet 來講，確定不會會了，咱們也能夠在 $ 後面增長 @- 來實現倒序排列：

ul>li.item$@-*5

生成以下結構：

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

一樣，咱們也可使用 @N 指定開始的序號：

ul>li.item$@3*5

這樣就會從 3 開始排序，生成以下代碼：

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

配合上面倒序輸出，能夠這樣寫：

ul>li.item$@-3*5

生成的就是以 3 爲底倒序：

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

生成文本內容：{}

上面講解了如何生成 HTML 標籤，那裏面的內容呢？固然也能夠生成了：

a[href="http://www.yunxiu.org/blog"]{點擊這裏到 雲袖網}

這樣就生成了一個到我愛水煮魚的超連接了。在生成內容的時候，特別要注意先後的符號關係，雖然 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>

這樣就生成了徹底不一樣的結構，注意這些小細節哦。

不要有空格

在寫指令的時候，你可能爲了代碼的可讀性，使用一些空格什麼的排版一下。這就會致使代碼沒法使用。例以下面這句：

(header > ul.nav > li*5) + footer

而去掉空格以後，就能夠正常執行生成結構了。

2）Emmet 快速編寫 CSS 的技巧

首先，Sublime Text 2 已經提供了比較強大的 CSS 樣式所寫方法來提升 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 的代碼結構：

@font-face {
font-family:;
src:url();
}

可是這個結構太簡單，不包含一些其餘的 font-face 的屬性，諸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，咱們能夠在生成的時候輸入 '+' 生成加強的結構，例如咱們能夠輸入 @f+ 命令，便可輸出選項加強版的 font-face 結構：

@font-face {
 font-family: 'FontName';
 src: url('FileName.eot');
 src: url('FileName.eot?#iefix') format('embedded-opentype'),
 url('FileName.woff') format('woff'),
 url('FileName.ttf') format('truetype'),
 url('FileName.svg#FontName') format('svg');
 font-style: normal;
 font-weight: normal;
}

增長實驗性前綴（Vendor Prefixes）

CSS3 等如今尚未出正式的 W3C 規範，可是不少瀏覽器已經實現了對應的功能，僅做爲測試只用，因此在屬性前面加上本身獨特的實驗性前綴，不一樣的瀏覽器只會識別帶有本身規定前綴的樣式。然而爲了實現兼容性，咱們不得不編寫大量的冗餘代碼，並且要加上對應的前綴。使用 Emmet 能夠快速生成帶有前綴的 CSS3 屬性。

ST2 已經內置了一些常見的須要實驗性前綴的 CSS3 屬性，例如輸入 trf 會彈出提示，而後敲擊回車鍵便可生成。而 Emmet 加強了這個功能。在任意字符前面加上一條橫槓（-），便可生成該屬性的帶前綴代碼，例如輸入 -foo-css，會生成：

-webkit-foo-css: ;
-moz-foo-css: ;
-ms-foo-css: ;
-o-foo-css: ;
foo-css: ;

雖然 foo-css 並非什麼屬性，可是照樣能夠生成。此外，你還能夠詳細的控制具體生成哪幾個瀏覽器前綴或者前後順序，使用 -wm-trf 便可生成：

-webkit-transform: ;
-moz-transform: ;
transform: ;

可想而知，w 就是 webkit 前綴的縮寫，m 是 moz 前綴縮寫，s 是 ms 前綴縮寫，o 就是 opera 瀏覽器前綴的縮寫。若是使用 -osmw-abc 便可生成：

-o-abc: ;
-ms-abc: ;
-moz-abc: ;
-webkit-abc: ;
abc: ;

生成漸變背景

CSS3 中新增長了一條屬性 linear-gradient 使用這個屬性能夠直接製做出漸變的效果。可是這個屬性的參數比較複雜，並且須要添加實驗性前綴，無疑須要生成大量代碼。而在 Emmet 中使用 lg() 指令便可快速生成，例如：使用 lg(left, #fff 50%, #000) 能夠直接生成：

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

直接幫你生成好了瀏覽器前綴。

3) Emmet 經常使用的高級功能

生成 Lorem Ipsum

Lorem Ipsum 表示一段隨機看不懂的文字。Lorem Ipsum 的文字讓人看不懂，這樣才能忽略內容的含義而專一內容的排版，做爲測試數據填充用的。使用 Emmet 生成 Lorem Ipsum 文本很是簡單，只須要使用 lorem 這一條命令便可，敲擊 Tab 鍵以後，就會生成以下一段文字：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, dolor, aperiam ab repellendus blanditiis eum exercitationem. Quae, reprehenderit repellat impedit asperiores consequatur? Illum quos magnam odit omnis recusandae natus similique.

Emmet 的 lorem 命令不只僅只有輸出這麼一段文字這樣一個簡單的功能，它既然做爲測試數據，能夠加上參數指定要輸出的字符數量。例如，咱們若是想輸出一個十個單詞的 h1 標題，咱們就可使用以下命令 h1>lorem10 。可是這項功能對於使用中文的網頁測試來講，好像沒有多大用處，畢竟中文和英語單詞的排版是不一樣的。

跳轉編輯區域

寫代碼通常要用到兩隻手，有時候須要跳轉到別的代碼段等，你可使用鍵盤方向鍵也可使用鼠標。可是這都有缺陷，使用鍵盤方向鍵移動太慢了，並且須要按住 shift 鍵和方向鍵選中代碼；使用鼠標的話，手就必須離開鍵盤，來回也會浪費一些時間。而 Emmet 提供了一個很實用的功能，就是整塊的跳轉。

爲了方便理解，先看一下官方的 Demo 動畫。這個功能，使用 Shift+Ctrl+. 和 Shift+Ctrl+, 分別向下或者向上移動，選取的是一整塊，先從標籤開始，再是整個屬性，再是屬性值。這樣，比鍵盤的方向鍵移動高效多了。

增長圖片的尺寸大小

有時候，咱們須要給標籤增長對應的 width、height 屬性來表示圖片的大小或者給經過 background-image 屬性引用的背景圖片一個尺寸大小。一般的作法是看一下圖片的尺寸，而後加上，而如今，你只須要將光標移動到代碼段，摁下 Ctrl+U 便可讓 Emmet 自動讀取圖片的尺寸添加上。前提條件是圖片比較存在而且正確引用進來了。

若是是針對標籤的，會在後面加上 width、height 屬性，若是是 background 引入的，會在下面加上 width、height 的 CSS 屬性。能夠看一下官方的 Demo 。可是這裏有個問題，官方的 Demo 中，實現這個功能的快捷鍵是 Shift+Ctrl+U 但實際使用中，這個快捷鍵不起做用。關於 Emmet 的 Mac、Win 下的快捷鍵，以這個頁面上的爲準：https://github.com/sergeche/emmet-sublime#available-actions。

更新 CSS 的屬性值

咱們在寫 CSS 的時候，有時候爲了 hack 寫不少帶有前綴的屬性。例如：

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);

若是咱們忽然想修改一下旋轉的角度值，那麼咱們就須要依次修改或者按住 Ctrl 多個選中進行修改。使用 Emmet 的話，就方便多了，咱們只須要修改其中一個，而後摁下 Shift+Ctrl+R 鍵便可更新其餘的相關屬性值。

將圖片資源轉換成 data url 形式

data url 圖片具備不少優勢，在某些狀況下比較實用，可是將圖片轉換成 data url 格式就比較麻煩了，得使用一些工具。而在 Emmet 中，將光標移動到 background: url() 中的圖片位置的地方，按下 Ctrl+’ 便可將圖片編碼成 data url 格式。固然，前提條件是圖片資源引用正確。

除此以外，Emmet 還有一些其餘的諸如快速跳轉、計算等等經常使用功能，在這裏只是介紹了幾個更經常使用的功能，有興趣的朋友能夠打開Emmet Action 的官方文檔看一下 Demo，這裏再也不贅述。