Emmet-前端開發必備之神器

作為一名前端開發人員，最為繁瑣的就是手寫HTML與CSS代碼，特別是手動編寫 HTML 代碼的時候，效率會特別低下，因為需要敲打很多尖括號，而且很多標籤都需要閉合標籤等。於是，就有了 Emmet(前身是Zen Coding)，它可以極大的提高代碼編寫的效率，它提供了一種非常簡練的語法規則，然後立刻生成對應的 HTML 結構或者 CSS 代碼，同時還有多種實用的功能幫助進行前端開發。

下載地址：

http://emmet.io/download/

Emmet支持大部分文檔編輯器和IDE，

Emmet使用特殊的表達式Abbreviations，也就是縮寫：這種特殊的表達式會被Emmet解析並轉義成結構化的代碼塊。Emmet使用類似CSS選擇器的語法來描述元素在DOM樹節點的位置和屬性。

例如：

 ul#nav>li.item$*4>a{Item $}

會被轉義成

 

 

 

 


這樣就看到了 emmet的強大之處了吧。
HTML 元素
在Emmet中可以使用元素名例如 div 或 p 生成HTML標籤。Emmet沒有預設任何標籤名，所以可以使用任何可用名稱來生成HTML標籤： 
div → 
 或 foo → 
嵌套操作符
嵌套操作用來生成元素的DOM樹中的兄弟節點或子節點，使用 > 生成元素子節點。
div>ul>li
會被轉義成

 

 

 


Sibling: +
使用 + 生成元素兄弟節點。
div+p+bq
會被轉義成 



Climb-up: ^
使用 ^ 在元素父節點生成新的元素節點
操作符 ^ 的作用和 > 剛好相反
用 > 可以在子級生成新的節點
div+div>p>span+em
會被轉義成


 

 

用n個 ^  
，就可以在第n父級生成新的節點
div+div>p>span+em^^^bq
會被轉義成


 



Multiplication: *
使用 * 生成多個相同元素
ul>li*5
會被轉義成

 

 

 

 

 

 

屬性操作符
屬性操作符用來修改元素的屬性
ID 和 CLASS
Emmet給元素添加ID和CLASS的方法和CSS的語法類似
div#header+div.page+div#footer.class1.class2.class3
會被轉義為



元素編號
使用 $ 操作符可以對重複元素進行有序編號
ul>li.item$*5
會被轉義為

 

  

 

 

 


還可以用多個 $ 定義編號的格式
ul>li.item$$$*5
會被轉義為

 

 

 

 

 


文本操作符
Emmet使用 Text:{} 給元素添加文本內容
a{Click me}
會被轉義為
 

注意： {text} 在Emmet中是被當成單獨的元素來解析的，但當和其他元素結合使用時會有特殊的含義
例如：
a{click} 和 a>{click} 
會輸出相同的結果，但
a{click}+b{here} 和 a>{click}+b{here} 
輸出的結果則不一樣

here


在 a>{click}+b{here} 中，  元素是元素的子節點。這個就是區別：當 {text} 直接寫在元素後面時，並不會改變父元素的上下文。
最後，先介紹這麼多，emmet的一些其他功能大家自行去看官方文檔。 















分享到:



 閱讀更多  阿爾法軟件測評 
的文章

關鍵字:
集成開發環境
前端開發
神器