emmet(ZenCoding)-快速编写HTML神器

文章目录

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

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

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

比如下面这部分代码

<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就解决了！

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以后

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

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

<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)推荐，网页前端苦力必备。