我也来谈谈使用Zen Coding快速开发html和css原理

zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间.

以下为zen coding的用法:

• E 
• 元素名称(

  div

  , 

  p

  );
• E#id 
• 使用id的元素(

  div#content

  , 

  p#intro

  , 

  span#error

  );
• E.class 
• 使用类的元素(

  div.header

  , 

  p.error.critial

  ). 你也可以联合使用class和idID: 

  div#content.column.width

  ;
• E>N 
• 子代元素(

  div>p

  , 

  div#footer>p>span

  );
• E+N 
• 兄弟元素(

  h1+p

  , 

  div#header+div#content+div#footer

  );
• E*N 
• 元素倍增(

  ul#nav>li*5>a

  );
• E$*N 
• 条目编号 (

  ul#nav>li.item-$*5

  );

熟悉上面用法以后就是采用"展开缩写"快捷键来生成xhtml标签了

下面我只介绍下vs中的使用方法(展开缩写快捷键:Tab键):

　　1.vs中输入 div  按下tab  就会生成 <div></div>

　　2.vs中输入 div#container 按下tab 就会生成 <div id="container"></div>

　　3.vs中输入 ul>li*5 按下tab 就会生成如下

1 'html': {
2 'snippets': {
3 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',
4 ...
5 },
6
7 'abbreviations': {
8 'a': '<a href=""></a>',
9 'img': '<img src="" alt="" />',
10 ...
11 }
12 }

部分支持(只支持“展开缩写”)

• TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
• TopStyle;
• Sublime Text;
• GEdit;
• Dreamweaver CS4
• editArea在线编辑器;
• Zen Coding在线编辑器中文版

以上支持编辑器的快捷键:

快捷键

• Ctrl+,

   
  展开缩写

• Ctrl+M

   
  匹配对

• Ctrl+H

   
  使用缩写包括

• Shift+Ctrl+M

   
  合并行

• Ctrl+Shift+?

   
  上一个编辑点

• Ctrl+Shift+?

   
  下一个编辑点

• Ctrl+Shift+?

   
  定位匹配对

这些快捷键是可以自定义的

有了zen coding大大缩减了写html和css的时间,此项目还有很多其他的功能,大家可以去好好研究一下,我目前只因为用到了突然想写点出来,供大家阅览