總是有小伙伴時(shí)不時(shí)的就會(huì)冒出一個(gè)來(lái)問(wèn)：

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

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

　　我想告訴你的是：它為什么能出來(lái)。

　　平時(shí)我們?cè)谧鲩_(kāi)發(fā)的時(shí)候

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

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

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

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

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

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

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

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

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

　　開(kāi)始說(shuō)一說(shuō)語(yǔ)法規(guī)則：

　　現(xiàn)在就開(kāi)始解決開(kāi)頭提出來(lái)的問(wèn)題

　　1、后代嵌套

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

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

　　2、兄弟

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

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

　　3、分組嵌套

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

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

　　4、乘法

　　解決你們問(wèn)題的來(lái)嘍!!!

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

　　我們?cè)趆tml文檔中輸入 ul>li*5>span，然后按下你的tab鍵，就會(huì)生成以下代碼：

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

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

　　5、自動(dòng)增長(zhǎng)

　　如果你想創(chuàng)建一個(gè)ul，里面有5個(gè)li，并且li的類名還是類似item-1這的形式

　　在html文檔中輸入 ul>li.item-$*5，然后按下你的tab鍵，就會(huì)生成以下代碼：

　　6、id和類

div#box

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

div.box

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

　　7、文本

div{test}

<div>test</div>

　　以上就是emmet的常用語(yǔ)法!

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