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 开发各种网站和应用程序. ...
随机推荐
- Firefox下网页缩放时防止div被挤到下一层
http://wu110cheng.blog.163.com/blog/static/13334965420121120102439190/ Firefox下网页缩放时防止div被挤到下一层 问题:三 ...
- poj 3150 Cellular Automaton
首先来看一下Sample里的第一组数据.1 2 2 1 2经过一次变换之后就成了5 5 5 5 4它的原理就是a0 a1 a2 a3 a4->(a4+a0+a1) (a0+a1+a2) (a1+ ...
- HTML5入门十一---Canvas画布实现画图(二)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 在Htmel中添加flash
> >
- jQuery编程基础精华03(RadioButton操作,事件,鼠标)
RadioButton操作 取得RadioButton的选中值,被选中的radio只有一个值,所以直接用val() $('#btn1').click(function () { ...
- C++:类的成员函数定义方式
1.成员函数的第一种定义方式:在类声明中只给出成员函数的原型,而将成员函数的定义 放在类的外部. 返回值类型 类名::成员函数名(参数表) { 函数体 } class Point{ pub ...
- Android关于实现EditText中加多行下划线的的一种方法
1. 重写EditText public class LinedEditText extends EditText { private Paint linePaint; private float m ...
- struct hw_module_t HAL_MODULE_INFO_SYM
先开个头,准备这与一篇struct hw_module_t HAL_MODULE_INFO_SYM 相关的文章. Hal层的库文件是怎么被上层调用的?上层调用时的入口(相当于main)又是什么呢?它就 ...
- Android开发之三种动画
转载:http://www.cnblogs.com/angeldevil/archive/2011/12/02/2271096.html http://www.lightskystreet.com/2 ...
- Sublime Text3中文乱码及tabs中文方块的解决方案
一.文本出现中文乱码问题 方案1 1.打开Sublime Text 3,按Ctrl+-打开控制行,复制粘贴以下python代码,然后回车运行. 2. 复制并粘贴如下代码: import urllib. ...