zen coding 是一个俄罗斯人写的编辑器(支持大部分现下流行的编辑器)插件，其安装也是非常简单，只要安装插件，然后在项目中拷贝js文件就可以。像Webstorm6.0.2中已经包含这样的插件。什么是html缩写，我们先来在webstorm上敲下面的代码：

div.content

然后按Tab键，就会出现我们面熟的代码：

也就是说，div.content，这种写法实际上是用写程序的方法来写标记语言，再如当我们敲下面的代码的时候：

div.cotent>h1+p

Tab之后，会出现：

这样的写法,很容易就能写出整个网站的框架,开发效率大大提高,不用每次敲那些繁杂的{}之类的。

其实也就是假设我们用E作为元素名称：

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.class1#id1>h1>li*5+p

写出一些我们常用的如下代码:

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

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

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

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

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

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

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

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

我也来谈谈使用Zen Coding快速开发html和css原理

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

vim 中 也可以 直接安装 emmet 直接使用zen coding 生成 l指定个数的 lorem ipsum文字.

超链接的写法: 当作为链接的文字, 比较长时, 整个作为链接 就显得不是 很适合. 可以取其中的某一个单词 作为 超链接的 关键字:如: click here to continue emmet中如何 ...

前端代码新写法——Zen Coding

是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...

使用Zen coding高效编写html代码

zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器 ...

使用Emmet(前身Zen Coding)加速Web前端开发

Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章 ...

随机推荐

python code

执行动态语句 执行字符串中的代码 http://www.cnblogs.com/fanweibin/p/5418817.html #!usr/bin/env python #coding:utf-8 ...

开心网的账号登录及api操作

.kaixin.php