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的一些其他功能大家自行去看官方文档。 















分享到:



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

關鍵字:
集成开发环境
前端开发
神器