文档章节

zen coding

cyper
 cyper
发布于 2014/12/08 21:36
字数 312
阅读 30
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

自从用了webstorm后才开始关注zen coding,没想到已经流行N久了。
规则:

Current features of abbreviation engine

  • ID and CLASS attributes:div#page.section.main.
  • Custom attributes:div[title],a[title="Hello world" rel],td[colspan=2].
  • Element multiplication:li*5will output<li>tag five times.
  • Item numbering with $ character:li.item$*3will output<li>tag three times, replacing $ character with item number.
  • Multiple '$' characters in a row are used as zero padding, i.e.:li.item$$$→li.item001
  • Abbreviation groups with unlimited nesting:div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.
  • Filters support
  • divtag name can be omitted when writing element starting from ID or CLASS:#content>.sectionis the same asdiv#content>div.section.
  • (v0.7) Text support:p>{Click }+a{here}+{ to continue}.


实例:
div#page>div.logo+ul#navigation>li*5>a
生成

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>
div.photo*3
生成
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>

更进一步,div也可省掉,就是说上面的代码在webstorm中只要输入.photo*3再按下tab键就能自动生成。

div>img+(.photoSummary>.photo$*3)+.summaryClear
生成

<div>
    <img src="" alt=""/>
    <div class="photoSummary">
        <div class="photo1"></div>
        <div class="photo2"></div>
        <div class="photo3"></div>
    </div>
    <div class="summaryClear"></div>
</div>


常用的还有
table+, select+

CSS部分


m=> margin
flr=>float: right

积累中。。


© 著作权归作者所有

cyper

cyper

粉丝 59
博文 685
码字总数 143352
作品 0
武汉
前端工程师
私信 提问
notepad++配置Zen Coding

Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度,优秀的语法高亮,干净整齐的代码缩进,便捷的括号高亮匹配赢得了无数人的喜爱。 但,其代码自动补全很“鸡肋”,或者说...

随影求是
2012/08/06
3K
0
zen-coding

一种快速编写HTML/CSS代码的方法 使用仿CSS选择器的语法来快速开发HTML和CSS html+css 代码快速编写 ——由Sergey Chikuyonok开发。 Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像...

pepelsbey
2012/05/20
1K
0
【转载】Notepad++配置Zen Coding

原标题:Notepad++配置Zen Coding 为Notepad++安装 Zen Coding 插件 下载 Zen.Coding 解压 将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。 重启Notepad++,即可开始使用...

LangChao
2013/09/14
160
0
Notepad++配置Zen Coding

为Notepad++安装 Zen Coding 插件 下载 Zen.Coding 解压 将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。 重启Notepad++,即可开始使用 Zen Coding。 Zen Coding 用法 首...

噬魂
2012/06/01
2.7K
0
Notepad++结合Zen Coding快速编写HTML代码

Notepad++结合Zen Coding快速编写HTML代码 By Airen Apr05,11

^6^|^6^
2011/11/02
589
1

没有更多内容

加载失败,请刷新页面

加载更多

JVM性能调优的6大步骤,及关键调优参数详解

JVM内存调优 对JVM内存的系统级的调优主要的目的是减少GC的频率和Full GC的次数。 1.Full GC 会对整个堆进行整理,包括Young、Tenured和Perm。Full GC因为需要对整个堆进行回收,所以比较慢,...

一只会编程的狼
19分钟前
6
0
并发和并行性有什么区别?

并发和并行性有什么区别? 示例被赞赏。 #1楼 并发性:具有共享资源潜力的多个执行流 例如:两个线程争用一个I / O端口。 平行主义:将问题分成多个相似的块。 例如:通过在文件的每半部分上...

javail
21分钟前
4
0
(推荐使用)提高开发效率工具集合

提高开发效率工具集合(推荐使用) 一、Hutool工具类 官网地址:https://www.hutool.cn/ Github地址:https://github.com/looly/hutool/ Gitee 地址:https://gitee.com/loolly/hutool/ 文档参...

明德先生
25分钟前
4
0
java并发-缓存一致性协议和内存屏障的思考和理解

################这是之前的思考 内存屏障只是保证清空流水线,如何保证高速缓存的内容更新到最新或刷新到主存呢?这个问题突然想到了,不知道这个需要怎回答。 内存屏障保证的CPU执行执行序...

萧默
28分钟前
5
0
类型名称后面的括号是否与new有所不同?

如果“测试”是普通类,则之间是否有任何区别: Test* test = new Test; 和 Test* test = new Test(); #1楼 new Thing(); 很明显,您想要一个构造函数,而new Thing; 表示您不介意是否未调...

技术盛宴
52分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部