zen-Coding的使用

zen-Coding的使用

zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉,就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。打开Notepad++编辑器,输入以下代码:
div#name

然后接着按一下快捷键ctrl+E,就会自动生成如下的HTML代码:

<div id="name"></div>

接下来看一个更高效的例子

div#header>div#logo+ul.nav>li.item-$*5>a

按ctrl+E生成如下代码

<div id="header">
<div id="logo"></div>
<ul class="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>

其他指令可以百度:ZenCodingCheatSheet.pdf  获得全部简写指令

zen-Coding在Notepad++中的使用参考如下文档

http://www.cnblogs.com/cobby/archive/2012/05/09/2492473.html

EditPlus 3.7 内置 zen-Coding插件 所以只需要配置相应的快捷键即可

时间: 2024-09-30 15:36:50

zen-Coding的使用的相关文章

zen coding和emmet的关系,zen coding 改名为了emmet

1.  如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发. 现在它改名为了Emmet,并且搭建了一个新的网站:docs.emmet.io. 2. emacs中如何安装emmet呢? 跟安装php-mode一模一样. 去gitHub,直接下载emmet-mode.el文件就可以了,且安装方法里面都有的.

Web前端快速编写代码神器HTML/CSS/JavaScript Emment(原名Zen coding)

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: 去年年底,该插件已经改名为Emmet.但Emmet不只改名,还带来了一些新特性.本文就来直观地演示给你. 一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如

Zen Coding: 一种快速编写HTML/CSS代码的方法[Emmet]

译自:[Smashing Magazine](http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/)中文:[Zen Coding: 一种快速编写HTML/CSS代码的方法](http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html) 请尊重版权,转载请注明来源! - - - - - - 在本文中我们将展示

Emmet/Zen Coding 快速入门说明

快速参考 以下是支持的特性: ele creates an HTML element tag 展开一个HTML元素标签 # creates an id attribute 作用于元素标签,展开一个id属性 . creates a class attribute 作用于元素标签,展开一个类属性,一个标签可以跟多个类属性,最终展开会一起呗加入class属性中 [] creates a custom attribute 作用于元素标签,展开一个HTML元素标签的属性,可以是任意非标准属性名称,写法同C

Zen Coding;sublime 3;html

1.了解Zen Coding: https://www.baidu.com/link?url=c9YyfvWOfn0EtUrhKlZQ26ANUOD_CSqjgqqsb3lq6LQ05oy2MQs4hWEYLVTlFgHhZKLmtMPTq1xsk6MyyKQKGYoxVE8pudSPKorJacGzTJy&wd=&eqid=ed8e37ab0006abb800000002593bf5c2 http://www.cnblogs.com/EnSnail/p/6294897.html 2.官方

TextMate中zen coding(emmet)的安装

很郁闷的是最近几年没怎么写过前端啊!公司给配置了iMAC 用不了我最爱的notepad++ 于是找到传说中的神器TM下载下来.纠结死人的zen coding却装不好.我这个愚蠢的人类 仍旧通过不懈的反复重试 多方查看,找到了正确安装方法. 我下载的是TM官网展示的最新版.默认的 包的 内容就这些玩意儿  ?? 下载好的emmet文件需要正确的放到如下目录里: 没有的文件夹都自己建立. ??  终于完成了. 自打潜心研究UI与插画后,前端东东都丢的不行不行了. 第一回用TM,还没汉语版本,捉急呀.

使用Emmet(前身Zen Coding)加速Web前端开发

这篇文章对Emmet使用说明比较详细,于是就收了~~~ 转载:Web前端开发-Web前端工程师 » 使用Emmet(前身Zen Coding)加速Web前端开发 Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章,提出编写HTML和CSS的新方法.这一革命性的插件指的就是Zen Coding,经过很多开发者多年来的努力与帮助,现在已达到了一个新的水

Sublime Text2 安装 Emmet (Zen Coding)

一.添加所有插件之前先下载安装 “Package Control” 1.在线安装:Ctrl+`(Mac为Command+`)复制下面的代码--确认--重新启动Sublime Text 2 1 import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; url

Zen Coding

http://www.liuhehu.com/?p=180 http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html 展开缩写 E元素名称(div, p); E#id使用id的元素(div#content, p#intro, span#error); E.class使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.w

关于sublime 与zen coding 使用

安装: 使用的是sublime2: 1.呼出命令行:ctrl+` 2.在命令行中输入  sublime2:     import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.make