標簽元素關系展開
div.wrap>div.content>(div.inner_l+div.inner_r)^div.sider------縮寫展開如下----------------------------------------------<div class="wrap"><div class="content"><div class="inner_l"></div><div class="inner_r"></div></div><div class="sider"></div> </div>
從這個html代碼縮寫里面我們可以看到使用了4個符號，分別是：
> 后面代表子元素
+ 后面代表下一個兄弟元素
^ 代表返回父級元素
() 小括號代表代表一個縮寫集合 ?
具有特定結構的標簽展開
ul+------縮寫展開如下----------------------------------------------<ul><li></li> </ul>
這類特定的標簽，縮寫時在后面添加一個 +（加號），展開時會默認生成其子元素。類似的標簽還有 map、dl、ol、table 等。
?
標簽元素添加屬性
table[cellpadding=0 cellspacing=0 width=100%]------縮寫展開如下----------------------------------------------<table cellpadding="0" cellspacing="0" width="100%"></table>
標簽元素的屬性寫在標簽后緊跟的中括號內，屬性之間用空格隔開，如果某個屬性中有空格，那么屬性值就需要添加引號。
?
id 和 class 屬性是不需要寫在中括號里面的，直接寫 #idName 和 .className 就可以了，并且可以寫多個 className，如：div#a.b.c
?
?
標簽元素內添加文本節點
div{我是文本節點}------縮寫展開如下----------------------------------------------<div>我是文本節點</div>
文本節點寫在標簽元素后面緊跟的大括號里面，并且，大括號里面可以用 $ 符號寫入遞增數字。
一些省略標簽的展開方式，如：
在行內元素中省略子標簽
span>.c strong>.c b>.c------縮寫展開如下----------------------------------------------<span><span class="c"></span></span> <strong><span class="c"></span></strong> <b><span class="c"></span></b>
由此可以看出，在行內元素內省略子元素標簽，子元素標簽就會默認為 span 標簽。
后續測試，p 元素默認的子元素也是 span 元素。而 h1-h6 標題標簽默認的則是 div 元素，這和div元素的默認子元素是一樣的。
因此可以得出一個結論，行內元素和p這個不能插入塊元素的標簽的默認子元素就是 span 元素。而除特定標簽外的塊元素默認插入的子元素則是div元素。
?
生成多個類似元素
ul>li.item-${$}*5------縮寫展開如下----------------------------------------------<ul><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li><li class="item-4">4</li><li class="item-5">5</li> </ul>
我們可以在標簽后面添加 *number 來生成我們需要標簽的個數，同時還可以使用 $ 來遞增改變數字部分，如 class 值中也可以使用這一符號。并且可以同時使用多個 $ 符號，如：
ul>li.item-$$${$$}*5------縮寫展開如下----------------------------------------------<ul><li class="item-001">01</li><li class="item-002">02</li><li class="item-003">03</li><li class="item-004">04</li><li class="item-005">05</li> </ul>
?
生成多個類似元素，指定遞增初始數
ul>li.item$@3{文本節點}*5------縮寫展開如下----------------------------------------------<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[title]{文本節點}*5------縮寫展開如下----------------------------------------------<ul><li class="item7" title="">文本節點</li><li class="item6" title="">文本節點</li><li class="item5" title="">文本節點</li><li class="item4" title="">文本節點</li><li class="item3" title="">文本節點</li> </ul>
?
?
縮寫代碼后綴
這里只舉前端用到的那部分，主要講到 |e、|c 、|s、|t 這四個后綴
|e 后綴
div.box>div.inner{?￥×}|e------縮寫展開如下----------------------------------------------<div class="box"><div class="inner">?￥×</div> </div>
|e 后綴的作用就是將縮寫里面的特殊字符轉義成字符編碼
?
|c 后綴
div.box>div.inner{?￥}>div|c------縮寫展開如下----------------------------------------------<div class="box"><div class="inner">?￥<div></div></div><!-- /.inner --> </div> <!-- /.box -->
|c 后綴的作用就是給每個有 class 或 id 的元素添加結束注釋。
?
|s 后綴
div.box>div.inner{?￥}|s------縮寫展開如下----------------------------------------------<div class="box"><div class="inner">?￥</div></div>
|s 后綴的作用就是將縮寫代碼在一行中展開。
以上三種后綴可以同時使用多個，可以達到多個效果結合。
?
|t 后綴
最后來說下 |t 后綴，該后綴和上面其他的后綴有所不同，他使用的主要是給帶有數字開頭的文本節點包標簽，并去掉開始的數字（可以帶有小數點或中華線），如：
12-3文本節點1 45-文本節點2 78、文本節點3 7.文本節點4 7,文本節點4 s文本節點4------縮寫展開如下----------------------------------------------<ul><li>文本節點1</li><li>文本節點2</li><li>、文本節點3</li><li>文本節點4</li><li>,文本節點4</li><li>s文本節點</li> </ul>
操作方法是，先選中這段文本，按下 ctrl+shift+g 快捷鍵（Wrap with Abbreviation），再輸入 ul>li*|t 回車，就會展開這個結果了。由此可以看出，|t 可以將這些文本節點前面的數字刪除掉。
?
最后介紹一個自動生成測試文本的代碼
自動生成文本節點的代碼是 lorem 或 lipsum 字符串，這兩個字符串后面可跟一個數字，用于確定生成多少個單詞，默認生成30個單詞。如：
p>lorem10 或 p>lipsum10------縮寫展開如下----------------------------------------------p>lipsum10|e lorem只能跟在 >（右括號）的后面，表示前一個標簽的內容。
如果 lorem 后面還跟著 class 、 id 或 *number，那么就會在父標簽里面創建一個默認標簽，并未這個標簽添加這個 class 或 id ，最后把生成的文本節點放到子標簽里面。如：
ul>lorem*5 或 ul>li*5>lorem ------縮寫展開如下----------------------------------------------<ul><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, nulla, asperiores quod ea facilis nostrum tempora dolores suscipit odio quasi doloribus nemo provident est deleniti molestias culpa ipsam assumenda! Doloremque.</li><li>Eligendi, recusandae vitae tempore deleniti omnis alias distinctio asperiores commodi veritatis obcaecati id totam porro culpa earum rerum voluptatum cupiditate adipisci eos minima nesciunt eius modi repellendus minus eum doloribus?</li><li>Aliquam, iure, eaque, accusantium vero modi est quam deserunt rerum minima in quisquam aut culpa odio quasi quibusdam optio pariatur suscipit cumque enim cum placeat quas vitae sed ullam fugiat!</li><li>Deleniti, iusto, officia, sunt optio reiciendis error nihil sit amet dolorem debitis perferendis vel quia hic minus obcaecati ducimus consequatur aliquid sapiente at nam dolorum ipsum harum impedit vero tempora!</li><li>Dicta earum aspernatur praesentium accusantium nam. Ipsam, ducimus corporis reiciendis laudantium iste consequatur debitis error tempora labore in. Fugit, quos eaque deserunt cupiditate et beatae provident ipsa expedita vel nam.</li> </ul>
可以到ul>lorem*5和ul>li*5>lorem展開后的代碼是一樣的。
?
?
Emmet官網：http://emmet.io/
Emmet縮寫集合：http://docs.emmet.io/cheat-sheet/?
Emmet縮寫設置-配置文件：http://docs.emmet.io/customization/snippets/
)
