Emmet是一款编辑器插件,支持多种编辑器支持。在前端开发中,Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能,极大的提高前端开发效率。
下载地址http://emmet.io/download/
缩写
Emmet使用特殊的表达式Abbreviations,也就是缩写:这种特殊的表达式会被Emmet解析并转义成结构化的代码块。Emmet使用类似CSS选择器的语法来描述元素在DOM树节点的位置和属性。
例如
1
| #page>div.logo+ul#navigation>li*5>a{Item $}
|
会被转义成
1 2 3 4 5 6 7 8 9 10
| <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>
|
HTML元素
在Emmet中可以使用元素名例如 div 或 p 生成HTML标签。Emmet没有预设任何标签名,所以可以使用任何可用名称来生成HTML标签:div → 或 foo →
嵌套操作符
嵌套操作用来生成元素的DOM树中的兄弟节点或子节点
child:>
使用 > 生成元素子节点
会被转义成
1 2 3 4 5
| <div> <ul> <li></li> </ul> </div>
|
Sibling: +
使用 + 生成元素兄弟节点
会被转义成
1 2 3
| <div></div> <p></p> <blockquote></blockquote>
|
Climb-up: ^
使用 ^ 在元素父节点生成新的元素节点
操作符 ^ 的作用和 > 刚好相反
用 > 可以在子级生成新的节点
会被转义成
1 2 3 4
| <div></div> <div> <p><span></span><em></em></p> </div>
|
用 ^ 可以在父级生成新的节点
会被转义成
1 2 3 4 5
| <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
|
用n个 ^ ,就可以在第n父级生成新的节点
会被转义成
1 2 3 4 5
| <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
|
Multiplication: *
使用 * 生成多个相同元素
会被转义成
1 2 3 4 5 6 7
| <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
|
Grouping: ()
圆括号 () 是Emmet的高级用法,用来实现比较复杂的DOM结构
1
| div>(header>ul>li*2>a)+footer>p
|
会被转义成
1 2 3 4 5 6 7 8 9 10 11
| <div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
|
还可以嵌套使用圆括号 ()
1
| (div>dl>(dt+dd)*3)+footer>p
|
会被转义成
1 2 3 4 5 6 7 8 9 10 11 12 13
| <div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>
|
属性操作符
属性操作符用来修改元素的属性
ID 和 CLASS
Emmet给元素添加ID和CLASS的方法和CSS的语法类似
1
| div#header+div.page+div#footer.class1.class2.class3
|
会被转义为
1 2 3
| <div id="header"></div> <div class="page"></div> <div id="footer" class="class1 class2 class3"></div>
|
自定义属性
使用[attr]标记来添加自定义属性
1
| td[title="Hello world!" colspan=3]
|
会被转义为
1
| <td title="Hello world!" colspan="3"></td>
|
元素编号
使用 $ 操作符可以对重复元素进行有序编号
会被转义为
1 2 3 4 5 6 7
| <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
|
还可以用多个 $ 定义编号的格式
会被转义为
1 2 3 4 5 6 7
| <ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>
|
更灵活的编号方式
使用 @ 修饰符可以改变编号的格式
例如:
在 $ 后面添加 @- 可以改变编号顺序
会被转义成
1 2 3 4 5 6 7
| <ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>
|
在 $ 后面添加 @N 可以改变编号基数
会被转义为
1 2 3 4 5 6 7
| <ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>
|
还可以组合使用上面的修饰符
会被转义为
1 2 3 4 5 6 7
| <ul> <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> </ul>
|
文本操作符
Emmet使用 Text:{} 给元素添加文本内容
会被转义为
注意: {text} 在Emmet中是被当成单独的元素来解析的,但当和其他元素结合使用时会有特殊的含义
例如:
a{click} 和 a>{click
会输出相同的结果,但
a{click}+b{here} 和 a>{click}+b{here}
输出的结果则不一样
1 2 3 4 5
| <!-- a{click}+b{here} --> <a href="">click</a><b>here</b> <!-- a>{click}+b{here} --> <a href="">click<b>here</b></a>
|
在 a>{click}+b{here} 中, \ 元素是\元素的子节点。这个就是区别:当 {text} 直接写在元素后面时,并不会改变父元素的上下文。
下面是一个更复杂的案例:
1
| p>{Click }+a{here}+{ to continue}
|
会被转义为
1
| <p>Click <a href="">here</a> to continue</p>
|
而
1
| p{Click }+a{here}+{ to continue}
|
则会被转义为
1 2
| <p>Click </p> <a href="">here</a> to continue
|
其他
![emmet](/2017/08/11/Emmet使用指南/p1.png)