長沙WEB前端培訓講解：前端快速開發外掛emmet

       很多學習前端的同學肯定看到過有前端程式設計師在開發的時候輸入一小行程式碼然後立馬就出現一大串寫好的程式碼，感覺很高大上的感覺，今天 小編就來教大家如何實現這個效果。

       平時我們在做開發的時候 最費時間的工作就是寫 HTML、CSS 程式碼。一堆的標籤、屬性、括號等，頭疼。 還經常會寫一些結構重複的html。如果每個重複的程式碼都去複製貼上，就會很麻煩！ 你也知道程式猿都很懶惰， 所以就有了一個叫 emmet 的外掛，是不是想說你沒有安裝過？放心這個工具絕大部分的編輯器都內建了。 例如：hbuilderX、Sublime Text、Notepad++、VS code、Dreamweaver 等等。 接下來我們來看一下 emmet 這個外掛的使用！

       在你的編輯器新建一個html檔案，建立基本的html結構程式碼，然後跟我一起來體驗 emmet ！ 對！沒錯錯，首先就是我們們常用的 html初始結構；這一坨的html初始結構，如果每次要手打，想想都困難， vscode為例：直接一個！然後按 Tab 解決戰鬥； hbuilderX為例：直接一個html 然後回車 解決戰鬥； 開始說一說語法規則： 現在就開始解決開頭提出來的問題：

       1、後代巢狀

       如果你想寫一個ul，ul內部寫一個li，li內部寫一個span，就可以 在html文件中輸入 ul>li>span，然後按下你的tab鍵，就會生成以下程式碼

       2、兄弟

       如果你想寫一個h2，下面跟著一個p。 在html文件中輸入 h2+p，然後按下你的tab鍵，就會生成以下程式碼

       3、分組巢狀

       如果你的div中要寫一個h2和p。 在html文件中輸入 div>(h2+p)，然後按下你的tab鍵，就會生成以下程式碼：

       4、乘法

       解決你們問題的來嘍！！！ 如果你想寫一個ul，ul內部寫多個li，每個li內部寫一個span，那怎麼寫呢？ 我們在html文件中輸入 ul>li*5>span，然後按下你的tab鍵，就會生成以下程式碼： 這樣是不是很方便？寫table表格的時候是不是也很有用？

       5、自動增長

       如果你想建立一個ul，裡面有5個li，並且li的類名還是類似item-1這的形式， 在html文件中輸入 ul>li.item-$*5，然後按下你的tab鍵，就會生成以下程式碼：

       6、id和類

div#box

<div id="box"></div>

div.box

<div class="box"></div>

       7、文字

div{test}

<div>test</div>