你還在一個字符一個字符的敲代碼嗎？如果是那你就太OUT了，現在什么都流行自動化，當然敲代碼也不能落后啊。這款emmet神器，讓你的代碼輸入效率瞬間翻倍！我們還是先看效果圖：

怎么樣，是不是很酷，快來學習一下吧。

Emmet，前身是大名鼎鼎的Zen Coding，借助css語法來提高輸入html/css代碼效率。Emmet作為一款插件被廣泛運用在代碼編輯器中，如sublime,webstrom,notepad++等都默認安裝的有，如果沒有可自行百度安裝。

基本使用：輸入Emmet命令，按Tab鍵即可。

一、快速生成html代碼

1.生成html文檔

html文檔一般包括標簽等,這些固定標簽可以通過Emmet一鍵生成。

html:5或! 快速生成html5文檔

html:xt 快速生成XHTML過渡文檔

html:4s 快速生成HTML4嚴格文檔

2.生成html標簽

Emmet可以自動補全標簽，只需輸入尖括號內的標簽名然后按下Tab鍵，一個完整閉合的標簽就生成了。另外我們可以使用'>'生成子元素，使用'+'生成同級元素，使用'^'返回上一層父級元素，使用'*'生成重復元素，使用'()'進行組合操作。

3.標簽中添加類、id、文本和屬性

Emmet使用'#'和'.'來生成id和class屬性,使用'[]'進行自定義屬性，使用'{}'來定義標簽內包含的內容。如果標簽是div的話可以直接省略div。

4.自動生成編號

Emmet支持自動生成連續的編號，使用'$'符號快速生成相關屬性的編號。如果需要生成多位的數字編號，可以組合使用多個'$'符號。如果需要指定反向編號，可以使用'$@-'符號。當然如果輸出從某個編號到某個編號也是可以的，自己去探索吧。

二、快速生成css代碼

1.快速生成css屬性和值

書寫css是枯燥無味的事情，Emmet可以幫你簡化這個過程。生成的屬性值默認是px，當然也可以生成其他單位，那就請記住下面幾個符號：

'p'表示'%','e'表示'em','x'表示'ex'。

2.自動添加前綴

css一些屬性經常要兼容各個瀏覽器而添加一大堆后綴，有了Emmet，一切煩惱輕松解決。例如下面生成圓角和漸變，太給力了。

三、其他功能

在Emmet中可以快速生成占位文字：

lorem或者 lipsum如果需要生成重復的Dummy文字，可以使用如下命令：

p*4>lorem

并且支持模糊輸入，如下：

ul>lorem25.item*3這里就不貼效果了，自己去體驗吧。

四、總結

大概介紹了Emmet的功能，是不能很強大很酷炫！學會之后只需敲入命令就可以瞬間生成一個網頁，當然我不建議使用太復雜太長的命令。平常敲代碼再也不用輸入尖括號了，爽歪歪！趕緊動起手，體驗開發的樂趣！

如果喜歡，歡迎訂閱收藏，我是竹風，每天都有前端干貨，帶你玩轉前端！

總結

以上是生活随笔為你收集整理的让html前端的数字每天自己增加,前端开发神器Emmet，让你的代码输入效率瞬间翻倍...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。