總是有小伙伴時(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)手!
京公網(wǎng)安備 11010802030320號(hào)