Emmet：HTML/CSS代碼快速編寫神器

聲明：ITeye資訊文章的版權屬於ITeye網站所有，嚴禁任何網站轉載本文，否則必將追究法律責任！

相關知識庫：  HTML5知識庫

Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發的話，對該插件一定不會陌生。它使用仿CSS選擇器的語法來生成代碼，大大提高了HTML/CSS代碼編寫的速度，比如下面的演示： 

 
Zen coding下的編碼演示

去年年底，該插件已經改名爲Emmet。但Emmet不只改名，還帶來了一些新特性。本文就來直觀地演示給你。 

一、快速編寫HTML代碼 

1.  初始化 

HTML文檔需要包含一些固定的標籤，比如、、等，現在你只需要1秒鐘就可以輸入這些標籤。比如輸入“!”或“html:5”，然後按Tab鍵： 

• html:5 或!：用於HTML5文檔類型
• html:xt：用於XHTML過渡文檔類型
• html:4s：用於HTML4嚴格文檔類型

2.  輕鬆添加類、id、文本和屬性 

連續輸入元素名稱和ID，Emmet會自動爲你補全，比如輸入p#foo： 

連續輸入類和id，比如p.bar#foo，會自動生成：