emmet语法简介

为什么使用emmet

在前端开发中，常常需要打 < 尖括号以及闭合符号 ，并且如果html一写多 会造成大量的层次混乱。但是这些问题大多繁琐重复 会大量 浪费开发者的时间，于是就有了emmet语法的出现。 而前端开发在现今日益重要，无论是前端工程师，还是后端工程师 使用emmet都能提高开发效率。 现在支持emmet的编辑器据我所知就有

eclipse+aptana （默认快捷键是 ctrl+alt+enter 在老版本的aptana是不支持 emmet的 需要自己下emmet插件 最新的自带支持）eclipse+emmet插件 （默认快捷键为 ctrl+e）sublime text3 （快捷键默认为 tab）HBuilder（快捷键默认也为 tab）等等。。

emmet的快速入门

下面给出几种emmet常用的语法

同级命令 示例 div+p （+是同级 (兄弟)命令的标识） 结果如下 <div></div> <p></p> 下级命令 示例 div>p （>是子命令的标识） 结果如下 <div> <p></p> </div> 上级命令 示例 div>span>p^a （^上升命令的标识） 结果如下 <div> <span> <p></p> </span> <a href=""></a> </div 分组命令 示例 div>（table>ul>li）+div （ 用于让括号内的运算 优先） 结果如下 <div> <table> <ul> <li></li> </ul> </table> <div></div> </div> 乘法符号 示例 div*5 （^上升命令的标识） 结果如下 <div></div> <div></div> <div></div> <div></div> <div></div> ID和类属性 示例 div.id div#id （^上升命令的标识） 结果如下 <div class="id"></div> <div id="id"></div> 自定义属性文本 input[name=”abc”] （^上升命令的标识） 结果如下 <input type="text" name="abc" />