㈠什么是 Emmet？
你可以使用類似於 CSS 選擇器的語法來描述生成的樹和元素屬性中的元素位置。
㈡嵌套運算符（Nesting Operator）
嵌套運算符用於在生成的樹內定位縮寫元素：它是否應該放置在上下文元素內部或附近。
⑴子代操作符（Child）：>
div 下有一個子代的 div，緊接着在此子代中又有一個 p 標簽。
編輯器中輸入：div>div>p
效果如下：
⑵兄弟操作符（Sibling）：+
子代中的 div 不再包含 p 標簽，而是與它成為同一級，都是父級 div 的子代。
編輯器中輸入：div>div+p
效果如下：
⑶返回上級操作符（Climb-up）：^
我想要在父級元素的 div 的同級再創建一個 div 怎么辦呢？這時候，我們就需要用到返回上級選擇器了。
在編輯器中輸入：div>div+p^div
效果如下：
一層層的嵌套后，這時候要怎么才能返回到最初的父級元素呢？這時候我們就可以多次的使用這個操作符。
在編輯器中輸入：div>div>div>p^^^div
效果如下：
⑷乘法操作符（Multiplication）：*
用到重復元素最多的地方要數 ul 中的 li 了，我們可以使用乘法來解決它。
在編輯器中輸入：ul>li*5 生成5個li
效果如下：
（5）分組操作符（Grouping）：()
這個分組是什么意思呢？很好理解，比如我們在創建一個頁面結構，如果一個一個往下這么寫，最后再使用 ^ 一層一層的返回上去，恐怕數數都要數暈了吧。
使用這個分組來個布局，將其分為了 header、main 和 footer 三個頁面結構。
在編輯器中輸入：(header>h1+div>p)+(main>p)+(footer>ul>li*3)
效果如下：
我們上面還有使用 ^ 操作符來進行返回上一級的元素，使用分組，將其分為一個個的部分。
在編輯器中輸入：div>(header>ul>li*2>a)+footer>p
效果如下：
㈢屬性操作符（Attribute Operators）
屬性運算符用於修改輸出元素的屬性。
1）ID 和 Class（ID and CLASS）
在編輯器中輸入：div#header>p.news*3
效果如下：
如果 Class 屬性不止一個，使用並列書寫的原則。
在編輯器中輸入：div#wrapper>div.news.news-tip.+div.news.news-content
效果如下：
（2）定制屬性（Custom attributes）
定制的屬性，使用中括號[] 來將其括起來
比如 a 標簽，它默認只有 href 屬性，如果我們還需要別的呢：
在編輯器中輸入：a[target='' title='hello world']*3
效果如下：
（3）數值計算操作符（Item numbering）：$
在給 class 添加它的屬性時，希望它是按照一定的數字進行排列，那么我們就可以使用這個操作符。
在編輯器中輸入：div>ul>li.item-$*3
效果如下：
如果你想倒着寫數值的話呢，可以在 $ 操作符后面再加上 @-。
在編輯器中輸入：div>ul>li.item-$@-*3
效果如下：
你想指定數字是從幾開始，那么你需要在 $ 后面加上 @N，這里的 N 為開始的數值。
在編輯器中輸入：div>ul>li.item-$@3*3
效果如下：
（4）文本操作符（Text）：{}
使用大括號 {} 來對其輸入一定的內容。
在編輯器中輸入：div#news>p{Hello,World!}
效果如下：
當然你也可以連着別的標簽寫。
在編輯器中輸入：p{What's your name?}+p{My name is Alice}
效果如下：
最后呢 ~ 希望大家以后在書寫 HTML 格式的時候使用 Emmet 語法，這樣我們就可以快速地輸出我們需要的模板。
以上只是比較常用的emmet的常用語法，如果想了解更多可以去官網查看，下面是官網的網址：
emmet官方文檔 ： https://docs.emmet.io/cheat-sheet/
有關sublime text3 快捷鍵的相關知識可以進下面的網址了解：
https://blog.csdn.net/mrchengzp/article/details/78508509
參考：https://www.jianshu.com/p/9e2f55776bc0
希望有所幫助！