Emmet經常使用語法彙總

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官網貼上~~~

　點我進入Emmet官網~~~