【web前端工具Emmet教程】介绍与基础语法

作者:admin2013.11.18来源:Web前端之家浏览:16503评论:0

ad11.jpg

作为一个WEB前端工作者,是否思考过这个问题:对于代码的编写效率是否有比较大的进步,也许对于大部分人来说都有一个瓶颈,如何突破它,如何提高工作效率,需要我们自己深入研究了。

编写 HTML、CSS 代码始终占据了很大的工作比例,特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”、闭合标签等,时间一长感觉枯燥无比,脑壳发胀啊。工作之余无意中在某个交流群里发现有人提到过一个插件:Emmet;然后研究了下,发现它其实就是Zen Coding升级版了,只不过换了个“马甲”而已,接下来就详细介绍下Emmet。

Emmet目前支持的编辑器:

Dreamweaver
Sublime Text 2
Sublime Text 3
TextMate 1.x
Eclipse/Aptana
Coda 1.6 and 2.x
Espresso
Chocolat (可以通过 “Install Mixin” 对话框安装)
Komodo Edit/IDE ( Tools → Add-ons)
Notepad++
PSPad
<textarea>
CodeMirror2/3
Brackets

安装Emmet:

我目前使用的是Dreamweaver CS6和Sublime text3,看大家习惯了。我就讲讲如何在Dreamweaver CS6中使用emmet。

Emmet官方下载地址:http://emmet.io/download/

如果你已经安装了Adobe的Extension Manager(扩展管理器),直接双击安装就可以啦!如果木有,点击这里下载。

一路“是”和“接受”到底(忽略某认证警告),装完重启DW,然后点击顶部导航“命令”就可以看到Emmet啦。如下图:

QQ图片20131119174356.jpg

快捷键的设置:

没有快捷键在写代码的时候不是很方便,下面的简单的介绍下:

1、点击“编辑”》“快捷键”,然后在“当前设置”里选择“Emmet”,如图:

QQ截图20131119174815.png

2、点击“命令”》“Emmet”,然后选中“Expand Abbreviation”,然后在下面的快捷键里就可以设置了,如图:

QQ截图20131119175232.png

至于应该怎么设置快捷键,在这里就不啰嗦了,相信大家可以搞定。一般设置的是“TAB”,看个人习惯了。

准备工作搞定了,先看一个实例:

我们在DW里面输入 Emmet 的指令:
#page>div.logo+ul#navigation>li*5>a{Item $}

然后按下我们写的快捷键“TAB”,发现神奇的一幕出现了,发现这行指令变成了下面的 HTML 结构:

  1. <div id="page">

  2.     <div class="logo"></div>

  3.     <ul id="navigation">

  4.         <li><a href="">Item 1</a></li>

  5.         <li><a href="">Item 2</a></li>

  6.         <li><a href="">Item 3</a></li>

  7.         <li><a href="">Item 4</a></li>

  8.         <li><a href="">Item 5</a></li>

  9.     </ul>

  10. </div>

如果想生成 HTML 文档初始结构
HTML 文档的初始结构,就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个“!”即可。

也许你会感觉比较困惑,这条指令怎么来的,是什么意思呢?

下篇文章:【web前端工具Emmet教程】Emmet实战解析,看完之后你再回来看这条指令就很清楚了,期待吧!!

温馨提示本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接

已有0人参与

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新留言

  • admin

    客气了,请继续关注我们QQ群:295431592...

  • essaypinglun

    感谢楼主的分享...

  • 游客1

    非常好...

  • 游客

    这些插件都不错的...

  • 第三方

    似懂非懂...

  • admin

    有些是可以的,需要叠加很多层。...

  • 素材火

    纯css能实现吗?...

  • 小白

    json很实用,不过很多在用jsonp了,希望你们能多出些jsonp的文章。...