我也来谈谈使用Zen Coding快速开发html和css原理
2024-09-05 00:53:19
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原理小览
部分支持(只支持“展开缩写”)
- 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的时间,此项目还有很多其他的功能,大家可以去好好研究一下,我目前只因为用到了突然想写点出来,供大家阅览
最新文章
- 设计模式02迭代器(java)
- solr-web界面增加登录认证
- ubuntu 终端快捷键
- Egret Wing3 FTP使用方法
- [Xamarin] 客製化的ListView之章 (转帖)
- 【原创】有关Silverlight中“DataGrid中单元格动态绑定ComboBox单击时数据项莫名被清除 ”的解决方案及思路。
- [译]Canvas的基本用法
- [原创]PostgreSQL中十进制、二进制、十六进制之间的相互转换
- 转载-使用 Feed4JUnit 进行数据与代码分离的 Java 单元测试
- hadoop完全分布式模式的安装和配置
- main函数是个什么东西
- 2014阿里实习生面试题——mysql如何实现的索引
- 三星GT-S7572换屏幕教程
- width为auto或者100%的区别
- scipy安装问题
- (知识点)JavaScript继承
- eclipse下maven插件搭建springmvc之helloworld
- Vue 知识整理—01-基础
- JMeter 配置元件之随机变量(RandomVariable)介绍
- [C++]Linux之Ubuntu下编译C程序出现错误:“ stray ‘\302&#39;或者&#39;\240&#39; in program”的解决方案
热门文章
- linux 批量替换所有文件中包含的字符串
- [thinkPHP] buildSql可以查看tp CURD操作对应的SQL
- 二维树状数组+差分【p4514】上帝造题的七分钟
- POJ 3281 Dining(网络流)
- oracle enable / disable all constraint
- [CF935F]Fafa and Array
- Python学习实践 | speech智能语音模块
- int和Integer,String和String(包装类)
- 在iPhone上取消APP订阅
- 开源的库RestSharp轻松消费Restful Service