首页 > 开发工具, 技术学习 > Editplus中Zen Coding手册

Editplus中Zen Coding手册

前面我介绍了一款优秀的代码编辑器Editplus,并且重点介绍了一下Zen Coding。但是Editplus最新版中包含了Zen Coding的功能,但是无论是帮助文档,还是官方的文档都缺少帮助文档。还好Zen Coding项目的帮助文档非常的丰富。我整理并测试了一下,Editplus基本实现了Zen Coding的所有的功能。
如果你已经下载了最新版的Editplus或你的Editplus支持Zen Coding,那么你就点击下面的几个链接去学习使用。
编辑HTML http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
使用选择器 http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
编辑CSS http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
使用Filter过滤器 http://code.google.com/p/zen-coding/wiki/Filters
下载Cheatsheet http://code.google.com/p/zen-coding/wiki/CheatSheets
你学习了上面的一些资料以后,你需要知道以下一些内容。
常用的缩写或HTML标记
通过>+等创建不同层次结构的标记
了解#id、.class、[title=””]和{内容},还有|e管道过滤器等
*N和$*N循环以及$$$补零等
还需要了解Editplus的一些快捷键才能灵活自如的运行这项功能。
Expand Abbreviation 展开缩写
Ctrl + E
Next Edit Point 跳转到下一个编辑点
Ctrl + Alt + ]
Previous Edit Point 跳转到前一个编辑点
Ctrl + Alt + [
Toogle Comment 添加一个注释
Ctrl + /
最后我们通过一个简单的示例来结束本文。
新建一个文档保存为YOUR-FILENAME.html
输入html:5后Ctrl+E(如果你是基于模板新建的,可以省略这一步)
在Body里面输入 div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer 后Ctrl+E展开
第3步展开后的代码如下所示:

前面我介绍了一款优秀的代码编辑器Editplus,并且重点介绍了一下Zen Coding。但是Editplus […]

  1. 还没有评论
评论提交中, 请稍候...

留言

(Spamcheck Enabled)

Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks