Web开发人员必备工具-Emmet (Zen Coding)
如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法。它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发。
现在它改名为了Emmet,并且搭建了一个新的网站:docs.emmet.io。

和一般的编辑器中使用的“代码片段”概念不太一样,Emmet使用动态的语法来生成代码,这意味着你不需要自己去编辑并创建固定的代码片段。 大大的提高了代码编写效果,这一点似的Zen coding非常的流行。
例如,输入如下内容:
ul#nav>li.item$*4>a{Item $}
Emmet会帮助你生成如下的代码片段:
<ul id="nav">
<li class="item1"><a href="">Item 1</a></li>
<li class="item2"><a href="">Item 2</a></li>
<li class="item3"><a href="">Item 3</a></li>
<li class="item4"><a href="">Item 4</a></li>
</ul>
Emmet 作为插件可以支持如下的编辑器:
- Eclipse/Aptana
- Sublime Text 2
- TextMate 1.x
- Coda 1.6 and 2.x
- Espresso
- Komodo Edit/IDE
- Notepad++
- PSPad
- <textarea>
- CodeMirror2
个人比较喜欢使用Sublime Text 2,整合了Emmet会让你的开发如虎添翼,相信作为web开发“猿”的你肯定会喜欢!
Web开发人员必备工具-Emmet (Zen Coding)的更多相关文章
- 前端必备工具-Emmet (Zen Coding)
Emmet 可以快速的编写 HTML 和 CSS,输入指令如: ul#nav>li*4>a*4 敲击一下TAB 键,就会输出: <ul id="nav"> ...
- Web 开发人员必备的随机 JSON 数据生成工具
在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...
- Web 开发人员必备的12款 Chrome 扩展程序
之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流 ...
- .Net开发人员必备工具下载
.Net开发人员必备工具下载 本人亲测下载地址: Win8.1破解工具下载: http://pan.baidu.com/s/1eQf2UiQ 可激活版本 Windows Vista Busines ...
- 【特别推荐】Web 开发人员必备的经典 HTML5 教程
对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...
- Android开发工具综述,开发人员必备工具
安卓开发工具汇总.开发者必备.安卓开发过程中须要用到各种工具,作为一名安卓开发者,有木有感到亚历山大,那么多工具! 今天给大家汇总了一下安卓开发工具,安卓开发者必备利器. 1.Draw 9-Patch ...
- 开发人员必备工具 —— JMeter 压测
在接口开发完以后,开发人员应该学会对自己的接口先进行压测一下,虽然压测的结果并不一定准确,也不能完全反映真实情况,但是如果有问题的话多少是可以看出的,而且也可以及早做优化,做到心里有底.否则,等测试进 ...
- 值得 Web 开发人员收藏的20个 HTML5 实例教程
当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...
- 值得 Web 开发人员收藏的16款 HTML5 工具
HTML5 正在迅速改变创建和管理网站的方式.HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5 开发各种网站和应用程序. ...
随机推荐
- 【锋利的JQuery-学习笔记】添加提示图片
效果图: hot图片: (注意:这个图标本身就有抖动效果的,并不是由于标签<del>而具有抖动效果) 周期性抖动,起到提示的作用 html: <div class="jnC ...
- Unity3D TestTool Part _1
一直想看看Unity3d官方推出的UnityTestTools的测试插件,今天有空尝试了一下. 一.Quick Start 1. create a plane position which trans ...
- grub,mbr的那些事
今天遇到一个问题是:双系统为win10和Ubuntu.启动模式为mbr,当前可以启动win10,但不能启动Ubuntu.先利用easybcd重新添加了一个,想着依旧用win10的启动项,(此处可以参考 ...
- hadoop+hbase
hadoop的配置见下面这篇文章 http://www.powerxing.com/install-hadoop-2-4-1-single-node/ Hadoop安装教程_单机/伪分布式配置_Had ...
- iscsi 操作备忘
#查找iscsi节点 iscsiadm -m discovery -t st -p 192.168.20.225 #列出可用节点 iscsiadm -m node -T iqn.com.exapmle ...
- C# 计算一段代码执行的时间函数
使用 Stopwatch 类 eg: 计算一个for循环需要的时间 Stopwatch watch = new Stopwatch(); watch.Start(); ; i < ; i++) ...
- Java并发包中常用类小结(一)
从JDK1.5以后,Java为我们引入了一个并发包,用于解决实际开发中经常用到的并发问题,那我们今天就来简单看一下相关的一些常见类的使用情况. 1.ConcurrentHashMap Concurre ...
- python url编码,解码
>>> urllib.unquote('%E4%B8%BD%E6%B1%9F') >>> data '\xe4\xb8\xbd\xe6\xb1\x9f' >& ...
- Windows下IIS以FastCGI模式运行PHP
由于PHP5.3 的改进,原有的IIS 通过isapi 方式解析PHP脚本已经不被支持,PHP从5.3.0 以后的版本开始使用微软的 fastcgi 模式,这是一个更先进的方式,运行速度更快,更稳定. ...
- AjaxUpLoad.js使用实现文件上传
AjaxUpLoad.js的使用实现无刷新文件上传,如图. 图1 文件上传前 图2 文件上传后 1.创建页面并编写HTML [html] view plaincopy 上传文档: <div ...