我也来谈谈使用Zen Coding快速开发html和css原理
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的时间,此项目还有很多其他的功能,大家可以去好好研究一下,我目前只因为用到了突然想写点出来,供大家阅览
我也来谈谈使用Zen Coding快速开发html和css原理的更多相关文章
- Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...
- phpstorm使用zen coding 快速编辑补全html/css代码
百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...
- 结合Zen Coding快速编写HTML代码(sublime text2篇)
首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...
- Emmet/Zen Coding 快速入门说明
快速参考 以下是支持的特性: ele creates an HTML element tag 展开一个HTML元素标签 # creates an id attribute 作用于元素标签,展开一个id ...
- jeesite快速开发平台(七)----代码生成原理
转自:https://blog.csdn.net/u011781521/article/details/79322942
- Web开发人员必备工具-Emmet (Zen Coding)
如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuy ...
- Emmet(前身是zen coding)介绍和使用
Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发. 现在它改名为了Emmet,并且搭 ...
- Zen Coding css,html缩写替换大观 快速写出html,css
阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...
- zen coding一个牛的不行的html和css开发工具
zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...
随机推荐
- HDU 2567 寻梦(字符串,插入)
#include<iostream> #include<stdio.h> #include<string.h> #include<cmath> usin ...
- 水流(water)(BFS)(DFS)
水流(water) 时间限制: 1 Sec 内存限制: 64 MB提交: 9 解决: 2[提交][状态][讨论版] 题目描述 全球气候变暖,小镇A面临水灾,于是你必须买一些泵把水抽走.泵的抽水能力 ...
- C++—揭秘大牛博客一些不同凡人的写法
天下之大,无奇不有,C++也是这样,今天小编来盘点几个有意思的代码,看看你认识几个?以后见到之后千万别装不认识. 一.基础篇——不一样的输出 1.cerr 输出 cout和cerr究竟有什么不同?这也 ...
- 谜题8:Dos Equis
这个谜题将测试你对条件操作符的掌握程度,这个操作符有一个更广为人知的名字:问号冒号操作符.下面的程序将会打印出什么呢? public class DosEquis{ public static voi ...
- 【块状树】【LCA】bzoj1787 [Ahoi2008]Meet 紧急集合
分块LCA什么的,意外地快呢…… 就是对询问的3个点两两求LCA,若其中两组LCA相等,则答案为第三者. 然后用深度减一减什么的就求出距离了. #include<cstdio> #incl ...
- [Lync]lync同步通讯簿
概述 在客户现场部署lync的时候,突然发现新安装的lync客户端,搜索联系人功能无法使用,而将lync客户端安装后,隔一段时间后,又可以查询了,发现可能是数据没有同步的原因. 解决方案 客户端地址簿 ...
- NET PROVIDER 连接 Oracle数据库
NET 数据库连接 ORacle http://www.devart.com/ DataDirect http://www.datadirect.com/ Oracle免客户端For . ...
- WebLogic Server 12.2.1 多租户安装配置
1.安装WebLogic 12.2.1版本 下载安装的时候记住选择Fusion Middleware Infrastructer Installer. 2.安装OTD OTD需要单独下载安装,安装的时 ...
- 建立DB-LINK和建立视图
在系统数据通信间经常会有数据库的数据直接引用,使用视图VIEW的方式实现.视图调用通常会有两种情况,一种是同一数据库的视图,一种是跨数据库的视图. 在同一数据库地址不同用户下,不过不同的用户视图调用需 ...
- 常用vim命令合集
移动命令: h:左移 l:右移 k:上移 j:下移 ^:移动到本行第一个非空白字符上 0:移动到本行第一个字符上 gg:移动到文件头 G = shift + g:移动到文件尾 %:从一个"{ ...