總是有小伙伴時(shí)不時(shí)的就會(huì)冒出一個(gè)來問：
老師老師，怎么視頻中老師的 ul>li*6 能打出來?我的出不來?
咱先不說為什么出不來，這個(gè)我......(點(diǎn)點(diǎn)點(diǎn)就是不想說了)
我想告訴你的是：它為什么能出來。
平時(shí)我們?cè)谧鲩_發(fā)的時(shí)候
· 最費(fèi)時(shí)間的工作就是寫 HTML、CSS 代碼。一堆的標(biāo)簽、屬性、括號(hào)等，頭疼。
· 還經(jīng)常會(huì)寫一些結(jié)構(gòu)重復(fù)的html。如果每個(gè)重復(fù)的代碼都去復(fù)制粘貼，就會(huì)很麻煩!
所以就有了一個(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 !
對(duì)!沒錯(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鍵，就會(huì)生成以下代碼
2、兄弟
如果你想寫一個(gè)h2，下面跟著一個(gè)p。
在html文檔中輸入 h2+p，然后按下你的tab鍵，就會(huì)生成以下代碼
3、分組嵌套
如果你的div中要寫一個(gè)h2和p。
在html文檔中輸入 div>(h2+p)，然后按下你的tab鍵，就會(huì)生成以下代碼：
4、乘法
解決你們問題的來嘍!!!
如果你想寫一個(gè)ul，ul內(nèi)部寫多個(gè)li，每個(gè)li內(nèi)部寫一個(gè)span，那怎么寫呢?
我們?cè)趆tml文檔中輸入 ul>li*5>span，然后按下你的tab鍵，就會(huì)生成以下代碼：
這樣是不是很方便?寫table表格的時(shí)候是不是也很有用?
還有很多有用的小技巧咱們繼續(xù)說;
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的常用語法!
我補(bǔ)充一句：還需要多加練習(xí)!才能得心應(yīng)手!
京公網(wǎng)安備 11010802030320號(hào)