1.為什么寫這篇文章
其實我也不想重新造輪子的，但看網上提供的文章都是成扎的，但是自己要對自己過去學過的東西進行一次系統性的整理，還有些其它的原因. . .
所以花了點時間把這些東西整理起來了
2.簡單介紹下Emmet語法是個啥
Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.
從官方的文章中引用出來的話，我們寫html的時候效率最高的是將常用的模塊封裝好，然后在需要的時候直接把這個模塊復制進入自己的項目中，這樣會存在很多問題(功能大多數都是自定義的需求)。
舉個栗子：我們定義好了模塊，然后在實際項目中直接復制粘貼，但是模塊的代碼少了兩個功能，這樣就要在原有的基礎上添加功能；
又或者是多出來了一些功能，我們要刪除它們。
這樣一來，就很容易將項目寫亂，比如成對的標簽刪除了一個結束的標簽，導致網頁無法成為自己預期的樣子。
——於是，Emmet語法出現了
Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
Emmet語法可以用縮寫 來動態生成我們所需要生成出我們所需要的樣式，在短時間做出來一個模板，然后使用，這是一個能夠大幅度提高效率的工具，下面介紹下基本語法。
3.Emmet語法
在講語法之前，我要先說明一點，Emmet並非是可以直接使用的，有些編輯器(其實大部分編輯器都是支持的)，少數沒有支持的編輯器要自己下載(VSC和sublime可以直接在拓展里找插件名)
注意：接下來的內容直接補充Emmet的代碼以及展現的結果(注意，Emmet語法不能為了代碼美觀而加空格
Emmet的使用方式很簡單，寫完縮寫之后敲下tab按鍵，就可以自動渲染代碼
(其實我是想搞個list跳轉的. . .但是看着沒有現在這樣方便……咳，不扯這么多了)
1 帶有層級結構的：ul>li 2 3 <ul> 4 <li></li> 5 </ul>
1 代碼在同級的：ul+li 2 <div style="background: rgb(1, 1, 1)"></div> 3 <ul></ul> 4 <li></li>
1 帶有優先級的：(ul>li)+bq 2 3 <ul> 4 <li></li> 5 </ul> 6 <blockquote></blockquote> 7 8 對比沒有優先級的：ul>li+bq 9 10 <ul> 11 <li></li> 12 <blockquote></blockquote> 13 </ul>
1 在上級的：ul>li^bq(這個可以多個^一起寫) 2 3 <ul> 4 <li></li> 5 </ul> 6 <blockquote></blockquote> 7 8 <!-- 上面代碼可以看出來效果是等同於(ul>li)+bq的 -->
1 乘號批量復制：ul>li*3 2 3 <ul> 4 <li></li> 5 <li></li> 6 <li></li> 7 </ul>
車速加快了
1 創建帶有指定class樣式的標簽：div.box 2 3 <div class="box"></div>
1 創建帶有指定id樣式的標簽：div#box 2 3 <div id="box"></div>
1 一個標簽創建多個class：div.box1.box2.box3 2 3 <div class="box1 box2 box3"></div>
1 一個標簽同時創建class和id：div.box#box2 2 3 <div class="box" id="box2"></div>
后面開車了 不常用屬性(其實是我自己沒有用過但是很好用的屬性們)
這就像是，雖然身邊可愛的妹子有很多，但是我只喜歡イヴ一樣……咳
1 自定義屬性內容：ul>li>a[href='#'] 2 3 <ul> 4 <li> 5 <a href="#"></a> 6 </li> 7 </ul> 8 9 也可以自定義屬性：ul>li>test[data-content='this_is_data_value'] 10 11 <ul> 12 <li> 13 <test data-content="this_is_data_value"></test> 14 </li> 15 </ul>
1 文本內容填充：a{首頁} 2 3 <a href="">首頁</a>
Emmet還有一些默認的選項，這些選項比較貼切使用場景——它們稱為隱式標簽
1 隱式標簽： 2 3 > .class 4 <div class="class"></div> 5 6 > #id 7 <div id="id"></div> 8 9 > ul>.class 10 <ul> 11 <li class="class"></li> 12 </ul> 13 14 > label[for='content']>#content 15 <label for="content"> 16 <span id="content"></span> 17 </label>
還有很多時候，我們需要的標簽名不能一樣，但又要有規律可循，這時候可以使用這種語法：
1 $符號自增 2 3 ul>li.$*3 4 <ul> 5 <li class="1"></li> 6 <li class="2"></li> 7 <li class="3"></li> 8 </ul> 9 10 ul>li{第$$條項目}*3 11 <ul> 12 <li>第01條項目</li> 13 <li>第02條項目</li> 14 <li>第03條項目</li> 15 </ul> 16 17 最后來個復合式的案例： 18 19 ul>li[id='item$']{第$$$條數據}*10 20 <ul> 21 <li id="item1">第001條數據</li> 22 <li id="item2">第002條數據</li> 23 <li id="item3">第003條數據</li> 24 <li id="item4">第004條數據</li> 25 <li id="item5">第005條數據</li> 26 <li id="item6">第006條數據</li> 27 <li id="item7">第007條數據</li> 28 <li id="item8">第008條數據</li> 29 <li id="item9">第009條數據</li> 30 <li id="item10">第010條數據</li> 31 </ul>
后面還有很多上細節的東西，但是個人覺得真的沒必要記，記住的話只是浪費時間而已，投入成本與回報偏差極大。
比如說 btn:s submit提交的簡寫什么的...
以上，內容就這么多了(好像漏了好多……希望能有人能夠指出)
然后順便把Emmet官網貼上~~~