前面我介绍了一款优秀的代码编辑器Editplus,并且重点介绍了一下Zen Coding。但是Editplus最新版中包含了Zen Coding的功能,但是无论是帮助文档,还是官方的文档都缺少帮助文档。还好Zen Coding项目的帮助文档非常的丰富。我整理并测试了一下,Editplus基本实现了Zen Coding的所有的功能。
如果你已经下载了最新版的Editplus或你的Editplus支持Zen Coding,那么你就点击下面的几个链接去学习使用。
你学习了上面的一些资料以后,你需要知道以下一些内容。
- 常用的缩写或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步展开后的代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < div id="page">
< div id="header">
< ul id="nav">
< li >< a href=""></ a ></ li >
< li >< a href=""></ a ></ li >
< li >< a href=""></ a ></ li >
< li >< a href=""></ a ></ li >
</ ul >
</ div >
< div id="page">
< h1 >< span ></ span ></ h1 >
< p ></ p >
< p ></ p >
</ div >
< div id="footer"></ div >
</ div >
|
|