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

以下为zen coding的用法:

  • E
  • 元素名称(divp);
  • E#id
  • 使用id的元素(div#contentp#introspan#error);
  • E.class
  • 使用类的元素(div.headerp.error.critial). 你也可以联合使用class和idID: div#content.column.width;
  • E>N
  • 子代元素(div>pdiv#footer>p>span);
  • E+N
  • 兄弟元素(h1+pdiv#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的时间,此项目还有很多其他的功能,大家可以去好好研究一下,我目前只因为用到了突然想写点出来,供大家阅览

我也来谈谈使用Zen Coding快速开发html和css原理的更多相关文章

  1. Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

  2. phpstorm使用zen coding 快速编辑补全html/css代码

    百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...

  3. 结合Zen Coding快速编写HTML代码(sublime text2篇)

    首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...

  4. Emmet/Zen Coding 快速入门说明

    快速参考 以下是支持的特性: ele creates an HTML element tag 展开一个HTML元素标签 # creates an id attribute 作用于元素标签,展开一个id ...

  5. jeesite快速开发平台(七)----代码生成原理

    转自:https://blog.csdn.net/u011781521/article/details/79322942

  6. Web开发人员必备工具-Emmet (Zen Coding)

    如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuy ...

  7. Emmet(前身是zen coding)介绍和使用

    Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发. 现在它改名为了Emmet,并且搭 ...

  8. Zen Coding css,html缩写替换大观 快速写出html,css

    阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...

  9. zen coding一个牛的不行的html和css开发工具

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

随机推荐

  1. Verilog的IDE Quartus II

    Quartus II  主要用于Verilog的开发,他是开发FPGA的利器,但他需要和modelsim相互配合,才能实现它的编写和仿真.modelsim是第三方的EDA,需要另外安装,对于Quart ...

  2. HDU 2568 前进(模拟,水)

      轻松通过墓碑,进入古墓后,才发现里面别有洞天.突然,Yifenfei发现自己周围是黑压压的一群蝙蝠,个个扇动翅膀正准备一起向他发起进攻!形势十分危急!好在此时的yifenfei已经不是以前那个经常 ...

  3. mysql 查看表结构方法

    留给自己备查: mysql 导出为 csv 文件时如果直接使用导出命令是无法导出表结构的, 因此我们需要能够查询表结构的方法: 方法如下: 1.desc(描述)命令 desc tablename;de ...

  4. The 15th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - B King of Karaoke

    King of Karaoke Time Limit: 1 Second      Memory Limit: 65536 KB It's Karaoke time! DreamGrid is per ...

  5. 二维偏序+树状数组【P3431】[POI2005]AUT-The Bus

    Description Byte City 的街道形成了一个标准的棋盘网络 – 他们要么是北南走向要么就是西东走向. 北南走向的路口从 1 到 n编号, 西东走向的路从1 到 m编号. 每个路口用两个 ...

  6. [BZOJ 1212] L语言

    Link: BZOJ 1212 传送门 Solution: 看到字符串的多模式匹配,正解一般就是Trie树/AC自动机 此题由于每个模式串长度都很小,于是直接在Trie树上暴力就行了 先把所有模式串建 ...

  7. 【2-SAT】URAL - 2089 - Experienced coach

    题意:给出n对点a,b  要求从没对点中选出一个,且最终选出的点n个数不能存在相同的.输入数据满足每种数最多出现3次,最少出现1次 思路:第i对点的编号2*i, 2*i+1,   因为每个数最多出现3 ...

  8. IO流--字符流缓冲技术

    缓冲技术是为了提高数据的读写效率而提出的. (1)字符流的缓冲读 在字符流的缓冲技术中提供了一个newLine()方法,这个方法是跨平台的 在读数据的时候采用读完直接刷新的方式可以保证断电后数据不会丢 ...

  9. 正版greenvpn

    短网址 http://jsq.re(建议收藏,长期有效)长网址 https://www.greenjsq.me/网址更新页面 http://www.greenvpn.site

  10. js数据加载完成的方法

    1.document.onreadystatechange(页面加载完成的方法)配合document.readyState(获取加载状态)使用 document.onreadystatechange= ...