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 开发各种网站和应用程序. ...
随机推荐
- Javascript 中判断是谷歌浏览器和IE浏览器的方法
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- REST_FRAMEWORK加深记忆-极致抽象,极致完结
余下的就是静心看官方文档了. 这个是最抽象的了. urls.py """tutorial URL Configuration The `urlpatterns` list ...
- struts2学习笔记(2)——简单的输入验证以及标签库的运用
struts2自带了一些标签库,运用好这些标签库会减少开发周期. 1.struts2标签库是在哪定义的? struts2标签库定义在struts2-core-2.1.8.jar这个文件中,具体在这个j ...
- hdu1017
http://acm.hdu.edu.cn/showproblem.php?pid=1017 #include<iostream> #include<stdio.h> #inc ...
- Hibernate中createCriteria即QBC查询的详细用法 .Hibernate中createCriteria即QBC查询的详细用法 .
现在假设有一个Student类,内有id,name,age属性String hql = "from Student s";按照以前的做法,我们通常是Query query = se ...
- Hibernate逍遥游记-第5章映射一对多-02双向(<set>、<key>、<one-to-many>、inverse、cascade="all-delete-orphan")
1. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hi ...
- QC、IQC、IPQC、FQC、OQC
品质政策为:全面品管.贯彻制度.提供客户需求的品质:全员参与.及时处理.以达成零缺点的目标. 品质三不政策为:不接受不良品.不制造不良品.不流出不良品. QC即英文QUALITY CONTROL的简称 ...
- QT进度条QProgressBar的练习(定制QProgressBar,单独成为一个控件)
progressbar.h #ifndef PROGRESSBAR_H #define PROGRESSBAR_H #include <QProgressBar> class QStrin ...
- JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)
代码是否需要放置到onload中 //如果js代码需要操作页面上的元素,则将该代码放到onload里面. //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...
- 如何查看linux是32位还是64位
可以用命令“getconf LONG_BIT”查看,如果返回的结果是32则说明是32位,返回的结果是64则说明是64位. 此外还可以使用命令“uname -a”查看,输出的结果中,如果有x86_64就 ...