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

时间：2021-08-24 04:35:10

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 就会生成如下

　　

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

ul>li*5

　　4.vs中输入 ul.itemllist>li.item-$*5 按下tab 就会生成如下:

 <ul class="itemllist">

        <li class="item-1"></li>

        <li class="item-2"></li>

        <li class="item-3"></li>

        <li class="item-4"></li>

        <li class="item-5"></li>

    </ul>

ul.itemllist>li.item-$*5

zen coding原理:

　　Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描述了输出元素,此js文件自行搜索下载或者去github上下载,目前更名。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样：

 'html': {

 'snippets': {

 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',

 ...

 }, 

 'abbreviations': {

 'a': '<a href=""></a>',

 'img': '<img src="" alt="" />',

 ...

 }

 }

zen coding原理小览

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

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

快捷键

  • Ctrl+, 
    展开缩写
  • Ctrl+M 
    匹配对
  • Ctrl+H 
    使用缩写包括
  • Shift+Ctrl+M 
    合并行
  • Ctrl+Shift+? 
    上一个编辑点
  • Ctrl+Shift+? 
    下一个编辑点
  • Ctrl+Shift+? 
    定位匹配对

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

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

相关文章