网络营销电子商务研究中心 - Zen Coding: 一种快速编写HTML/CSS代码的方法

网络营销电子商务研究中心 (https://www.0058.net/index.php)

- Subline (https://www.0058.net/forumdisplay.php?f=103)

- - Zen Coding: 一种快速编写HTML/CSS代码的方法 (https://www.0058.net/showthread.php?t=5925)

Zen Coding: 一种快速编写HTML/CSS代码的方法

支持的属性和操作符的列表：
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);

如：div#content>h1+p

Code:

<div id="content">  

<h1></h1>  

<p></p>  

</div>

生成5个<li>元素，你可以简单的写位li*5

如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a

Code:

<li><a href=""></a></li>  

<li><a href=""></a></li>  

<li><a href=""></a></li>  

<li><a href=""></a></li>

假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写，div.item$*3:

Code:

<div class="item1"></div>  

<div class="item2"></div>  

<div class="item3"></div>

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。

div#i$-test.class$$$*5
会被转换成为:

Code:

<div id="i1-test" class="class111"></div>  

<div id="i2-test" class="class222"></div>  

<div id="i3-test" class="class333"></div>  

<div id="i4-test" class="class444"></div>  

<div id="i5-test" class="class555"></div>

ul>li*4>a{Links$} ，按Tab键生成下面一段代码
http://www.0058.net/attachment.php?a...1&d=1478387029

主要快捷键
Ctrl+L 选择整行（按住-继续选择下行）
Ctrl+KK 从光标处删除至行尾
Ctrl+Shift+K 删除整行
Ctrl+Shift+D 复制光标所在整行，插入在该行之前
Ctrl+J 合并行（已选择需要合并的多行时）
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+D 选词（按住-继续选择下个相同的字符串）
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
Ctrl+Shift+/ 注释已选择内容
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+M 光标跳至对应的括号
Alt+. 闭合当前标签
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+KT 折叠属性
Ctrl+K0 展开所有
Ctrl+U 软撤销
Ctrl+T 词互换
Tab 缩进自动完成
Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换
Ctrl+Shift+↓ 与下行互换
Ctrl+K Backspace 从光标处删除至行首
Ctrl+Enter 光标后插入行
Ctrl+Shift+Enter 光标前插入行
Ctrl+F2 设置书签
F2 下一个书签
Shift+F2 上一个书签