總是有小伙伴時(shí)不時(shí)的就會冒出一個(gè)來問：

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

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

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

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

　　· 最費(fèi)時(shí)間的工作就是寫 HTML、CSS 代碼。一堆的標(biāo)簽、屬性、括號等，頭疼。

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

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

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

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

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

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

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

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

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

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

　　1、后代嵌套

　　如果你想寫一個(gè)ul，ul內(nèi)部寫一個(gè)li，li內(nèi)部寫一個(gè)span，就可以

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

　　2、兄弟

　　如果你想寫一個(gè)h2，下面跟著一個(gè)p。

　　在html文檔中輸入 h2+p，然后按下你的tab鍵，就會生成以下代碼

　　3、分組嵌套

　　如果你的div中要寫一個(gè)h2和p。

　　在html文檔中輸入 div>(h2+p)，然后按下你的tab鍵，就會生成以下代碼：

　　4、乘法

　　解決你們問題的來嘍!!!

　　如果你想寫一個(gè)ul，ul內(nèi)部寫多個(gè)li，每個(gè)li內(nèi)部寫一個(gè)span，那怎么寫呢?

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

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

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

　　5、自動(dòng)增長

　　如果你想創(chuàng)建一個(gè)ul，里面有5個(gè)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的常用語法!

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