總是有小伙伴時不時的就會冒出一個來問：

　　老師老師，怎么視頻中老師的 ul>li*6 能打出來?我的出不來?

　　咱先不說為什么出不來，這個我......(點點點就是不想說了)

　　我想告訴你的是：它為什么能出來。

　　平時我們在做開發(fā)的時候

　　· 最費時間的工作就是寫 HTML、CSS 代碼。一堆的標簽、屬性、括號等，頭疼。

　　· 還經(jīng)常會寫一些結(jié)構(gòu)重復(fù)的html。如果每個重復(fù)的代碼都去復(fù)制粘貼，就會很麻煩!

　　所以就有了一個叫 emmet 的插件，是不是想說你沒有安裝過?放心這個工具絕大部分的編輯器都內(nèi)置了。

　　例如：hbuilderX、Sublime Text、Notepad++、VS code、Dreamweaver 等等。

　　接下來我們來看一下 emmet 這個插件的使用!

　　在你的編輯器新建一個html文件，創(chuàng)建基本的html結(jié)構(gòu)代碼，然后跟我一起來體驗 emmet !

　　對!沒錯錯，首先就是咱們常用的 html初始結(jié)構(gòu);這一坨的html初始結(jié)構(gòu)，如果每次要手打，想想都。

　　vscode為例：直接一個!然后按 Tab 解決戰(zhàn)斗;

　　hbuilderX為例：直接一個html 然后回車 解決戰(zhàn)斗;

　　開始說一說語法規(guī)則：

　　現(xiàn)在就開始解決開頭提出來的問題

　　1、后代嵌套

　　如果你想寫一個ul，ul內(nèi)部寫一個li，li內(nèi)部寫一個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內(nèi)部寫多個li，每個li內(nèi)部寫一個span，那怎么寫呢?

　　我們在html文檔中輸入 ul>li*5>span，然后按下你的tab鍵，就會生成以下代碼：

　　這樣是不是很方便?寫table表格的時候是不是也很有用?

　　還有很多有用的小技巧咱們繼續(xù)說;

　　5、自動增長

　　如果你想創(chuàng)建一個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>

　　以上就是emmet的常用語法!

　　我補充一句：還需要多加練習!才能得心應(yīng)手!