谈起zen-coding，算是“偶然相识”，前几天在看一个视频教程的时候，看见视频讲师用的编码工具很方便，直接敲几个字符，整段代码就出来了，心中无限羡慕嫉妒恨！心想，WIN下的DW要是也有就好了！于是google了一下，关于它的资料很多，于是为自己的DW下载了一个试试。

HTML
先从HTML开始。熟悉DW的同学都知道，DOCTYPE那段代码很长，又比较难记，什么html、head、body，如果有工具输入个命令直接敲出来那多爽！好了，废话少说，直接写几个试试吧！

新建个html文档，把DW自动生成的HTML代码全部删除，然后输入html:5按下组合键Ctrl+,(Ctrl键与英文逗号键)，嗖地一下，有木有？一堆代码就产生了。可能你觉得说我想用xhtml，没问题！输入html:xs仍然按下刚才那两个组合键就OK。说明下，这里的小写字母s意思是声明DOCTYPE的类型为strict类型。那么相应的，html:xt里面的小写字母t意思就是声明一个transitional类型的文档。很方便吧:-)

继续。通常我们会用一些列表元素，比如ul, ol, li, dl, dt, dd等等，在DW的代码视图中，输入ul+(ul和加号)按下组合键，一个简单的ul列表就建立好了，可是里面只有一个li。我想要5个li，那么输入ul>li*5按下组合键，一组包含5个li的列表就建立好了。

继续深入。列表建立好了，可是我们还要单独的给它们加上class或者id，还是稍微要花点功夫呢！那，那我给改改，输入ul#menu>li*5按组合键，看看，一个id叫做menu列表就出来了。举一反三，要加class的话，你懂得。

接下来深入其他元素吧！输入a[target=_blank]按下组合键，这是个在新窗口打开的链接。要想给a里面加上文字，可以这样写a[target=_blank]{这个是链接哦}花括号里面就是a链接的文字， go on! 输入a[title="Hello"][target=_blank]{这个是链接哦}按下组合键，a链接的title就给加好了。可是链接为空哦~不怕不怕，输入a[href="http://www.baihe107.com/"][title="Hello"][target=_blank]{这个是链接哦}按下组合键，这样，一个完整的a链接就算完成了。再接再厉吧！输入(a.fancybox[href]>img[src])*5按下组合键看看，这就是5个包含图片的链接。

针对条件注释，zen-coding也有相应的写法，比如cc:ie6, cc:ie, cc:noie这三个分别是针对IE6，IE和非IE浏览器的条件注释。针对Jquery，只需输入jq按下组合键，就可以直接调用Google API的Jquery路径。
关于HTML更多的语法(快捷键)，可以参考地址：http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

CSS
zen-coding针对css也有很多简便的写法，以下列举一下css中常用的属性(左侧是css中的属性，右侧是zen-coding相应的写法)：
w width:;
h height:;
fl float:;
t top:;
r right:;
bd border:;
p padding:;
m margin:;
f font:;
fw font-weight:;
fs font-style:;
fz font-size:;
如果属性值有多个项，比如padding的四个值, 可以直接输入p:0按下组合键即可显示padding:0;比较遗憾的是zen-coding作为DW的插件，不像Notepad++那类灵活的编辑器，可以自己对插件做修改，比如想输入margin:0 auto;怎么办？DW的插件mxp格式修改起来较为麻烦，如果是类似Notepad++的话，zen-coding可以根据自己的需要进行修改，在这里期待zen-coding真对DW添加更多好的命令。
如果你想根据自己实际需要封装mxp文件，可以浏览地址(笔者没有亲自试验)：http://www.cppblog.com/twzheng/archive/2010/10/07/30686.html

以下是个人整理的zen-coding(v.0.7.5)的部分快捷键(在DW CS4和CS5中)：
Ctrl+, 执行输入指令
Ctrl+K 选择当前行:
Ctrl+/ 添加/取消注释
Ctrl+\ 合并多行为一行
Alt+/ 匹配当前元素
Ctrl+Shift+B 重命名元素
Alt+- 移除元素(子元素不会被移除)