同學(xué)們肯定看到過(guò)有前端程序員在開(kāi)發(fā)的時(shí)候輸入一小行代碼然后立馬就出現(xiàn)一大串寫(xiě)好的代碼，感覺(jué)很高大上的感覺(jué)。今天小千就來(lái)教大家如何實(shí)現(xiàn)這個(gè)效果。

平時(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)斗；

下面介紹常用的結(jié)構(gòu)語(yǔ)法

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ì)生成以下代碼：

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

如果你想創(chuàng)建一個(gè)ul，里面有5個(gè)li，并且li的類名還是類似item-1這的形式，在html文檔中輸入 ul>li.item-$*5，然后按下你的tab鍵，就會(huì)生成以下代碼：

6、id和類

7、文本

以上就是集中常見(jiàn)的emmet插件的使用方法介紹了，趕緊去安裝和使用吧，在你的小伙伴面前展示一下，他們一定會(huì)偷來(lái)羨慕的眼光！

本文來(lái)自千鋒教育，轉(zhuǎn)載請(qǐng)注明出處。

總結(jié)

以上是生活随笔為你收集整理的快速开发插件emmet，前端程序员炫技必备！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。