为什么使用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" />