文章目录

最近大量编写HTML代码,着实被fenix命名的“人力智能”给伤心了,全是体力劳动啊。

不过功夫不负有心人(随便乱用的词……),在查阅资料时,无意发现了一枚小巧而实用的神器——emmet(ZenCoding)

它对我来说最重要的作用就是快速编写HTML代码。它能快成什么样子呢?

比如下面这部分代码

1
2
3
4
5
6
7
8
9
<nav id="navbar">
<ul>
<li class="item1"><a href=""></a></li>
<li class="item2"><a href=""></a></li>
<li class="item3"><a href=""></a></li>
<li class="item4"><a href=""></a></li>
<li class="item5"><a href=""></a></li>
</ul>
</nav>

看着这种东西会觉得php才能勉强算是救星吧?其实只要下边这段话,加上Ctrl+E就解决了!

1
2
nav#navbar>ul>li.item$*5>a

如何,是不是很棒?

这个插件支持的IDE多得吓人,Eclipse自然是支持,连Notepad++都有!不过对我来说支持Dreamweaver就心满意足了。

官方下载地址:
点击这里顺便看看官网资料:http://emmet.io/download/ ,或者直接点这里下载:Emmet.zxp

我安装的Adobe套件是CC版,下载以后一路next就安装好了。(前提是你已经安装了Adobe的Extension Manager(扩展管理器),神马?你居然没有安?没关系,赠送一个,点击这里下载。)

emmet的默认快捷键是Ctrl+E,如果没有快捷键冲突,那么你输入下面这段代码,按下Ctrl+E以后

1
2
nav#navbar>ul>li.item$*5>a

就应该可以看到以下内容了

1
2
3
4
5
6
7
8
9
10
<nav id="navbar">
<ul>
<li class="item1"><a href=""></a></li>
<li class="item2"><a href=""></a></li>
<li class="item3"><a href=""></a></li>
<li class="item4"><a href=""></a></li>
<li class="item5"><a href=""></a></li>
</ul>
</nav>

非常好用,强烈吐(ji)血(qing)推荐,网页前端苦力必备。

♦ 本文固定连接:http://gsgundam.com/2014-01-01-emmet-zencoding-html-quick-edit/

♦ 转载请注明:GSGundam 2014年01月01日发布于 GSGUNDAM砍柴工

友荐云推荐