Emmet(前身是zen coding)介绍和使用

Zen coding - 一种快速编写HTML/CSS代码的方法。它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发。

现在它改名为了Emmet,并且搭建了一个新的网站:docs.emmet.io。

和一般的编辑器中使用的“代码片段”概念不太一样,Emmet使用动态的语法来生成代码,这意味着你不需要自己去编辑并创建固定的代码片段。 大大的提高了代码编写效果,这一点似的Zen coding非常的流行。

例如,输入如下内容:

ul#nav>li.item$*4>a{Item $}

Emmet会帮助你生成如下的代码片段:

<ul id="nav">
    	<li class="item1"><a href="">Item 1</a></li>
    	<li class="item2"><a href="">Item 2</a></li>
    	<li class="item3"><a href="">Item 3</a></li>
    	<li class="item4"><a href="">Item 4</a></li>
</ul>

一篇文章:zen coding:一种快速编写html/css代码的方法

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。

你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码。

在JavaScript方面,当我们想要在一个页面上获取某个特定的元素时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重用。JavaScript框架应运而生,它们同时引入了CSS选择器引擎。现在,你可以使用简单的CSS表达式来获取DOM元素,这相当酷。

但是,如果你不仅仅可以用CSS的选择器布局和定位元素,还能生成代码会怎么样?比如,如果你这样写:

div#content>h1+p

…然后就可以看到这样的输出:

<div id="content">
<h1></h1>
<p></p>
</div>

有些迷惑吧?今天,我将向你介绍Zen Coding,一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语),由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢?嗯,首要原因是语义化:“选择器”意为选择一些东西,但是在这里我们事实上是生成 一些东西,是写一个长代码的较短的替代。其次,它只是使用真实的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);

正如你能看到的,你已经知道如何使用Zen Coding了:只是些一个简单的仿CSS选择器(呃,“缩写”抱歉),就像这样…

div#header>img.logo+ul#nav>li*4>a

…然后调用”展开缩写”行为。

这里有两个新增的操作符:元素倍增和条目编号。比如,如果你想生成5个<li>元素,你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个<li>元素,每个里面都有一个<a>标签,你就可以简单的写为li*4>a,这样会生成以下HTML代码:

1
2
3
4
<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:

更多:

http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

http://www.cnblogs.com/cobby/archive/2012/05/09/2492473.html

Emmet(前身是zen coding)介绍和使用

时间: 2024-10-10 04:42:21

Emmet(前身是zen coding)介绍和使用的相关文章

Emmet (前身为 Zen Coding)

使用示例: 在编辑器中输入缩写代码:ul>li*5 ,然后按下拓展键(默认为tab),即可得到代码片段: <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 下载和安装 Emmet为大部分流行的编辑器都提供了安装插件,下面是它们的下载链接: Sublime Text Eclipse/Apt

Notepad++ Emmet/Zen coding插件的安装

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具 一.下载 电脑环境:Windows 10 Enterprise, 64-bit Operating System Notepad++: Notepad++ 7.8 release (32-bit x86) Emmet: 下载地址 PythonScript: 下载地址 PluginManager: 下载地址 二.安装 1. 下载好所需的notepad++文件后,一顿“同意”,"下一步",“是” ,操作

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

这篇文章对Emmet使用说明比较详细,于是就收了~~~ 转载:Web前端开发-Web前端工程师 » 使用Emmet(前身Zen Coding)加速Web前端开发 Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章,提出编写HTML和CSS的新方法.这一革命性的插件指的就是Zen Coding,经过很多开发者多年来的努力与帮助,现在已达到了一个新的水

zen coding和emmet的关系,zen coding 改名为了emmet

1.  如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发. 现在它改名为了Emmet,并且搭建了一个新的网站:docs.emmet.io. 2. emacs中如何安装emmet呢? 跟安装php-mode一模一样. 去gitHub,直接下载emmet-mode.el文件就可以了,且安装方法里面都有的.

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

译自:[Smashing Magazine](http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/)中文:[Zen Coding: 一种快速编写HTML/CSS代码的方法](http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html) 请尊重版权,转载请注明来源! - - - - - - 在本文中我们将展示

Emmet/Zen Coding 快速入门说明

快速参考 以下是支持的特性: ele creates an HTML element tag 展开一个HTML元素标签 # creates an id attribute 作用于元素标签,展开一个id属性 . creates a class attribute 作用于元素标签,展开一个类属性,一个标签可以跟多个类属性,最终展开会一起呗加入class属性中 [] creates a custom attribute 作用于元素标签,展开一个HTML元素标签的属性,可以是任意非标准属性名称,写法同C

TextMate中zen coding(emmet)的安装

很郁闷的是最近几年没怎么写过前端啊!公司给配置了iMAC 用不了我最爱的notepad++ 于是找到传说中的神器TM下载下来.纠结死人的zen coding却装不好.我这个愚蠢的人类 仍旧通过不懈的反复重试 多方查看,找到了正确安装方法. 我下载的是TM官网展示的最新版.默认的 包的 内容就这些玩意儿  ?? 下载好的emmet文件需要正确的放到如下目录里: 没有的文件夹都自己建立. ??  终于完成了. 自打潜心研究UI与插画后,前端东东都丢的不行不行了. 第一回用TM,还没汉语版本,捉急呀.

Sublime Text2 安装 Emmet (Zen Coding)

一.添加所有插件之前先下载安装 “Package Control” 1.在线安装:Ctrl+`(Mac为Command+`)复制下面的代码--确认--重新启动Sublime Text 2 1 import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; url

Notepad++ 安装 Zen Coding / Emmet 插件

Zen Coding 插件 ============== 下载: Zen.Coding-Notepad++.v0.7.zip ==Installation== 1. Copy contents of this archive into Notepad++ 'plugins' folder (basically, it's C:\Program Files\Notepad++\plugins\) 2. Restart Notepad++ You should see "Zen Coding&quo