前端开发利器 - Emmet (Zen Coding)

最新推荐文章于 2020-04-12 22:15:34 发布
最新推荐文章于 2020-04-12 22:15:34 发布
阅读量1.8k 收藏 1
点赞数 2
文章标签： Emmet Zen Coding 前端开发利器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15704535/article/details/40836571
版权

​ 1、Emmet基础介绍 

Emmet（原名：Zen Coding）是前端开发快速输入代码一种方式，能帮助你使用CSS语法来提高输入HTML代码的速度，免去了大家输入重新性标签的过程。

以前被称作为Zen Coding，作为文本编辑器的插件存在，可以帮助您快速编写HTML和CSS代码，从而加速Web前端开发。

早在2009年，Sergey Chikuyonok写过一篇文章，提出编写HTML和CSS的新方法。这一革命性的插件指的就是Zen Coding，经过很多开发者多年来的努力与帮助，现在已经非常的完善和实用。也就是今天所说的Emmet插件。

基本使用方式， 输入Emmet命令后，请按"tab"键，自动生成对应代码，如下：

1.!<按tab键>

将生成HTML5代码框架，如下：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

 <title>Document</title>

</head>

<body>

</body>

</html>

如果输入

ul>li{bullet$$}*10<按tab键>

将生成如下HTML代码：

 <ul>

 <li>bullet01</li>

<li>bullet02</li>

<li>bullet03</li>

<li>bullet04</li>

<li>bullet05</li>

 <li>bullet06</li>

<li>bullet07</li>

<li>bullet08</li>

<li>bullet09</li>

<li>bullet10</li> 

</ul>

是不是非常快速和便捷？

Emmet只是文本编辑器一个插件，要想让他发挥应用的功能，就得将其安装到你喜欢的文本编辑器中。到目前为止，很多流行的文本编辑器都支持Emment插件，也就是说很多流行的文本编辑器都可以安装这款插件，还有其它在线编辑器，例如，GBdebug ，及其其它第三方插件都有广泛的支持

文本编辑器支持：

•Sublime Text

•Eclipse

•TextMate

•Coda

•Espresso

•Chocolat

•Notepad++

•Brackets

•NetBeans

•Adobe Dreamweaver

在线编辑器支持

•GBdebug


•JSFiddle

•JS Bin

•CodePen

•ICEcoder

•Divshot

•Codio

第三方插件

•SynWrite

•WebStorm

•PhpStorm

•Vim

•HTML-Kit

•HippoEDIT

•CodeLobster PHP Edition

•TinyMCE

2、Emmet生成HTML标签元素 

使用Emmet可以快速的生成HTML标签，而无需自己费力的手动输入，输入如下body字符，然后按tab键：

body<Tab键>

生成如下代码：

<body></body>

其实Emmet没有预定义的标签，你输入任何字符，都可以生成对应的标签，如下：

foo<Tab键>

生成结果如下：

<foo></foo>

3、Emmet生成子元素 

在Emmet中，我们使用">"号来生成子元素，使用方法如下：

div>ul>li <Tab键>

生成的子元素如下：

<div>

 <ul>

<li></li>

 </ul>

</div>

4、Emmet生成同级元素

在Emmet中，使用“+”来生成同级元素，如下：

div+p+dq<Tab键>

生成如下连续的元素：

<div></div>

<p></p>

<dq></dq>

5、Emmet返回父级元素 

在Emmet中，有时候需要返回父层元素来添加新的元素，可以使用"^"符号来实现， 如下：

div>p>span+em^bq<Tab键>

生成HTML元素，如下：

<div>

<p><span></span><em></em></p>

<blockquote></blockquote>

</div>

可以看到使用"^"符号可以返回一层父级元素。那么如果要返回两层父级元素呢？

div>p>span+em^^bq<Tab键>

生成如下代码：

<div>

<p><span></span><em></em></p>

</div>

<blockquote></blockquote>

6、 Emmet生成重复的元素 

Emmet中生成重复的元素非常方便，如下：

ul>li*10

生成代码如下：

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

通过指定"*"符号后面的数字我们可以快速生成重复的HTML元素

7、Emmet的组合操作符 

使用Emmet的组合操作符号"()"，可以生成复杂的组合，如下：

div>(header>ul>li*2>a)+footer>p

生成代码如下：

<div>

<header>

<ul>

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

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

 </ul>

</header>

<footer>

<p></p>

10.  </footer>

11.</div>

输入Emmet命令：

(div>dl>(dt+dd)*3)+footer>p

得到如下：

<div>

<dl>

<dt></dt>

<dd></dd>

<dt></dt>

 <dd></dd>

<dt></dt>

<dd></dd>

</dl>

</div>

<footer>

<p></p>

</footer>

小提示：虽然你可以使用Emmet命令生成整个复杂的HTML文档，但不推荐大家这样使用

8、Emmet属性操作符之ID和CLASS 

和CSS的语法非常类似，Emmet使用#和.来生成ID和CLASS属性，如下：

div#header+div.page+div#footer.class1.class2.class3<Tab键>

生成代码如下：

<div id="header"></div>

<div class="page"></div>

<div id="footer" class="class1 class2 class3"></div>

9、Emmet属性操作符之自定义属性 

Emmet使用中括号来自定义需要的属性，输入如下命令：

td[title="Hello world!" colspan=3]<Tab键>

生成代码如下：

<td title="hello gbtags" colspan="5"></td>

•你可以在中括号中设置任意多的属性

•你不需要指定属性值: td[colspan title] 对应值 <td colspan="" title=""> 会被空字符替换

•属性值可以包含在单引号或者双引号中

•如果不包含空格的话，你不需要使用引号: td[title=hello colspan=3] 这样也同样好使

10、Emmet自动生成编号 

Emmet支持自动生成连续的编号，使用"$"符号我们可以快速生成相关属性的编号，如下：

ul>li.item$*10

生成代码如下：

<ul>

<li class="item1"></li>

<li class="item2"></li>

<li class="item3"></li>

<li class="item4"></li>

<li class="item5"></li>

<li class="item6"></li>

<li class="item7"></li>

<li class="item8"></li>

<li class="item9"></li>

 <li class="item10"></li>

</ul>

如果需要生成多位的数字编号，可以组合使用多个"$"符号，如下：

ul>li.item$$$*5

生成代码如下：

<ul>

<li class="item001"></li>

<li class="item002"></li>

<li class="item003"></li>

<li class="item004"></li>

<li class="item005"></li>

</ul>

11、Emmet生成反向编号元素和指定编号开始的元素

Emmet中如果需要指定反向编号，可以使用"$@-"符号，如下：

ul>li.item$@-*5

生成代码如下：

<ul>

<li class="item5"></li>

<li class="item4"></li>

<li class="item3"></li>

<li class="item2"></li>

<li class="item1"></li>

</ul>

如果要从指定的数字开始编号，可以使用如下：

ul>li.item$@3*5

生成代码如下：

<ul>

<li class="item3"></li>

<li class="item4"></li>

<li class="item5"></li>

<li class="item6"></li>

<li class="item7"></li>

</ul>

如果要同时反向和指定数字编号，使用如下代码：

ul>li$@-3*5

生成代码如下：

<ul>

<li7></li7>

<li6></li6>

<li5></li5>

<li4></li4>

<li3></li3>

</ul>

12、Emmet生成标签内容 

Emmet使用"{}"来定义标签内包含的内容，如下：

a{更多信息}<Tab键>

生成结果：

<a href="">更多信息</a>

如果你输入:

a>{更多信息}<Tab键>

可以看到生成结果一样。

但是不都是这样，如果你输入：

a{click}+b{here}<Tab键>

将得到如下代码：

<a href="">click</a>

<b>click</b>

如果输入：

a>{click}+b{here}<Tab键>

将得到如下代码：

<a href="">

click<b>click</b>

</a>

这是因为定义的父层次不一致，大家需要特别注意一下。

13、Emmet使用的格式相关注意事项 

Emmet中需要注意不要添加额外的空格，如下命令可以正常工作：

(header>ul.nav>li*5)+footer

但是这行不能正常工作

(header > ul.nav > li*5) + footer

因为引入了多余的空格，以下是官方的说明：

•Emmet缩写命令不是模板语言，不是可读的，必须快速的扩展和可移除

•你不需要输入太复杂的缩写命令。复杂的命令导致更多的错误并且会减慢输入速度，尽量使用简单明了的缩写命令

14、Emmet标签模糊输入 

Emmet的缩写命令中，不需要输入所有的标签，你可以使用更加简单的命令，如下：

.wrap>.content<Tab>

生成结果和如下完整输入一致：

div.wrap>div.content

以下是说明：

•ul 和 ol中可以不指定li元素

•table, tbody, thead和tfoot中可以不指定tr元素

•tr中可以不指定td元素

•select和optgroup中可以不指定option元素

以下命令都是等价的：


15、Emmet生成占位文字（Dummy文字）

大家在开发中进场需要生成一个页面内容用来模拟真实网页内容，通常英文环境中我们使用如下Dummy文本：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?

在Emmet中可以快速生成类似上面的文字，如下：

lorem<Tab键>

生成代码如下：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis hic dolorem recusandae culpa officiis ullam doloribus aut voluptatibus. Dicta aliquam dolorum nesciunt at adipisci dignissimos vitae iure perspiciatis modi illum.

或者使用：

lipsum<Tab键>

也可以。

如果需要生成重复的Dummy文字，可以使用如下命令：

p*4>lorem

生成代码如下：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 

Aperiam perferendis illo est commodi neque et dolores ex ullam totam 

molestias itaque blanditiis id quasi ab error distinctio fuga ducimus? 

Nobis.</p>

<p>Fuga ipsum quaerat quam eligendi nulla 

provident tenetur veritatis iusto repellendus est cumque sit odio 

praesentium voluptatem natus maiores laudantium expedita nobis eveniet 

dignissimos voluptates ex soluta cum tempora optio.</p>

<p>Porro

earum eius debitis fugit distinctio nesciunt non iste natus neque 

quibusdam recusandae tenetur saepe voluptates quis nam quos modi 

deserunt at facilis autem. Deleniti repellendus dicta ratione aperiam 

itaque.</p>

<p>Laudantium optio doloremque minus corrupti

magni magnam veniam soluta praesentium repudiandae voluptate quae 

suscipit nam at harum quis molestiae voluptatibus quod accusantium. 

Culpa nam in facere cumque enim at eius.</p>

并且支持模糊输入，如下：

ul>lorem25.item*3<Tab>

生成代码如下：

<ul>

<li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo ab voluptates velit beatae mollitia ratione voluptate magni ullam aperiam veniam dolorum amet tempore illo molestias.</li>

<li class="item">Earum ullam aut voluptatem dolores officiis quam dolorem rem dignissimos veniam reiciendis libero assumenda atque vel minima ea quo dolorum nihil ipsum tempore aperiam placeat.</li>

<li class="item">Nihil ab eius rem. Delectus soluta debitis laboriosam laudantium fugit voluptatem esse eius nam harum minima similique nihil eveniet deserunt magni vel aut obcaecati at.</li>

</ul>

16、Emmet生成针对不同浏览器带有特定前缀的CSS 

Emmet中可以自动添加针对不同浏览器的CSS前缀定义，如下：

-bdrs<Tab键>

生成代码如下：

-webkit-border-radius: ;

-moz-border-radius: ;

border-radius: ;

当然，如果你不输入"-"符号的话，Emmet针对特定的CSS定义，也会添加对应前缀：

@kf<Tab>

生成代码如下：

@-webkit-keyframes identifier {

from {  }

to {  }

}

@-o-keyframes identifier {

from {  }

to {  }

}

@-moz-keyframes identifier {

from {  }

to {  }

}

@keyframes identifier {

from {  }

to {  }

}

以上缩写命令和"-@kf"得到的结果一样。

但是，如果标准里包含了一个新的CSS定义，例如：chrorme-foo的话，我们可以使用"-"符号来生成针对不同浏览器的代码，如下：

 -chrorme-foo<Tab>

生成代码如下：

-webkit-chrorme-foo: ;

-moz-chrorme-foo: ;

-ms-chrorme-foo: ;

-o-chrorme-foo: ;

chrorme-foo: ;

是不是相当的方便

17、Emmet快速生成CSS渐变代码 

CSS3中的渐变代码书写比较麻烦，通常我们使用开发工具或编辑器里的一些插件来帮助生成。

Emmet包含了一个内置的渐变生成器，在指定元素的CSS定义中我们可以输入如下缩写命令：

lg(left, #CCC 30%, orange)<Tab键>

生成代码如下：

  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #CCC), to(orange));

  background-image: -webkit-linear-gradient(left, #CCC 30%, orange);

  background-image: -moz-linear-gradient(left, #CCC 30%, orange);

 background-image: -o-linear-gradient(left, #CCC 30%, orange);

  background-image: linear-gradient(left, #CCC 30%, orange);

或者我们可以针对特定的CSS属性来生成渐变代码，如下：

image-border: lg(left, #CCC 50%, orange)<Tab键>

生成代码如下：

  -webkit-border-image:-webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #ccc), to(orange));

  -webkit-border-image:-webkit-linear-gradient(left, #ccc 50%, orange);

  -moz-border-image:-moz-linear-gradient(left, #ccc 50%, orange);

  -o-border-image:-o-linear-gradient(left, #ccc 50%, orange);

  border-image:linear-gradient(left, #ccc 50%, orange);

是不是非常方便

18、Emmet模糊搜索快速生成CSS代码 

书写CSS代码是一件枯燥乏味的过程，使用Emmet的模糊搜索能够帮助你简化整个过程，如下：

ov:h<Tab键>

生成代码：

overflow:hidden

输入如下命令：

d:i<Tab键>

生成代码：

display:inline;

以上Emmet缩写命令中，我们可以看到，不需要输入完整的CSS属性，即可生成对应的CSS属性， Emmet会根据你输入的命令，找到最接近匹配的CSS属性定义，更多的命令说明，请参考Emmet Cheat Sheet。


qq_15704535
关注
zen coding
01-06
sublime zen coding插件 zen coding for sublime
Zen Coding: 一种快速编写HTML/CSS代码的方法
剑胆琴心-.Net 学习笔记
03-23 1132
Zen Coding
zen-Coding在Notepad++中的使用
xuyangtiger1的专栏
10-26 4136
原帖请看： http://www.bwtx.org/others/tips/zen-coding-in-notepad-in-use.html zen-Coding是一款快速编写HTML,CSS（或其他格式化语言）代码的编辑器插件，这个插件可以用缩写方式完成大量重复的编码工作，是web前端从业者的利器。 zen-Coding插件支持多种编辑器，如UltraEdit，Notepad++等。 z
【翻译】Emmet (ZenCoding) 缩写语法
weixin_30901729的博客
04-10 195
缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。 元素 可以使用元素名（如 div 或者 p）来生成 HTML 标签。Emmet 没有预定义的有效元素名的集合，可以把任何单词当作标签来生成和使用：div→<div></div>,foo→<foo></foo>等。 嵌套运算符 嵌套运算...
Emmet(Zen coding)使用指南
大爱无疆的博客
10-24 2411
Emmet(早期版本叫做Zen coding)是一款跨平台的web前端开发编辑器插件(支持常用的Notepad++，Sublime Text，Dreamweaver，Eclipse，Netbeans，Vim等)，借助它我们可以很轻松的用类似css选择器的简写结构来快速书写html代码和CSS，从而提高开发效率(WordPress后台也支持zen coding我会告诉你么XD)。 下面我以Note
前端开源库-emmet
08-30
Emmet 的历史可以追溯到2008年，当时名为“Zen Coding”，由俄罗斯开发者 Sergey Chikuyonok 创建。随着时间的发展，这个项目不断进化，最终在2011年改名为Emmet，并且支持更多的编辑器和IDE。现在，Emmet 已经集成...
Emmet (Zen Coding) 适用Dreamweaver各版本
06-27
Emmet（原名Zen Coding）是一款强大的前端开发工具，它极大地提升了HTML和CSS代码的编写效率，尤其在处理大量结构化HTML元素时。Emmet最初由捷克开发者Dmitry Polischuk创建，现已成为Web开发者的必备利器之一。这款...
zencoding-vim
03-30
总的来说，"zencoding-vim"是Vim用户提升前端开发效率的利器。通过学习和熟练掌握其提供的各种快捷方式和技巧，开发者可以在编写HTML和CSS时节省大量时间，从而更专注于代码的逻辑和设计。无论你是Vim新手还是经验...
Zen Coding：HTML/CSS 缩写与元素
"Zen Coding API 是一种快速编写 HTML 和 CSS 的工具，它提供了一套简化的缩写方式，能够帮助开发者高效地构建网页结构。Zen Coding（后来也被称为 ...掌握 Zen Coding 的使用，无疑会成为提升前端开发效率的一大利器。
Zen Coding css,html缩写替换大观 快速写出html,css
10-28
Zen Coding（Emmet）不仅极大地提升了HTML和CSS代码的编写速度，而且通过其强大的缩写功能使得前端开发变得更加高效。通过以上介绍的HTML标签和CSS属性的缩写规则，开发者可以轻松地掌握这一工具的核心用法，从而...
zencoding小工具
06-26
用于快捷书写代码，例如<link href=“#” type="text/css">只需要打个link即可，内有说明书可参考
为Notepad++安装 Zen Coding 插件
03-08
Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。 但，不知道有多少同学跟我一样，在coding 时被 Notepad++ 粗陋的代码自动补全折磨的体无完肤（Notepad++那甚至不能叫自动完成）。虽然无比羡慕诸如Dreamweaver之类的代码自动完成，但固于上述 提到的几点Notepad++的优秀之处，纠结中毅然依旧坚守Notepad++。而 Zen Coding 的横空出世，总算终结了这种纠结，让我们得以以一种无比帅气的方式书写代码。
Zencoding
Ph智的博客
01-26 1151
from: http://blog.chinaunix.net/uid-22414998-id-3184766.html 超级牛B编码王（二）：Sublime2之Zencoding快速上手   1、前言     刚看完球，辽足0-0平北京国安，稳稳妥妥各拿1分，皆大欢喜。恒大4-0狂胜长春亚泰。期待恒大51主场之战，死磕全北现代。最近两天一直在研究BootStrap这个东东，做了
Zen Coding:css,html缩写替换大观---让你的html,css飞起来
weixin_34292402的博客
12-19 190
文中部分摘要来源：http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html 阅读本文，先仔细阅读上文来源网站文章。本文是在zen使用生产中遇到的问题做一些分享。 E元素名称(div, p); E#id使用id的元素(div#content, p#intro, span#error); E.class使用类的元素...
Emmet（ZenCoding）语法（一）
SeaSunExpect的博客
05-03 2252
Emmet（ZenCoding）——web开发人员的基本工具 缩写 缩写是Emmet工具包的核心，这些特殊表达式在运行时解析，并转换为结构化代码块。 缩写语法 嵌套操作：用于在生成的树中放置缩写元素   1. 儿童：>            使用>该操作符将元素嵌套在彼此中 div>ul>li 生成结果：
HTML代码：Emmet(Zen coding)的使用技巧
高级网络营销师的博客
04-12 297
Emmet（即Zen coding）称为是最棒的用以书写HTML代码的利器之一，能够提高你书写HTML代码的效率的一种工具。今天分享给大家关于Emmet书写HTML的技巧，希望能够为大家带去一丝的帮助吧！ 1、跳过Div 跳过Div，Emmet可以很清楚的读懂你想要输入什么内容，你只需要输入class或是id，Emmet就会自动帮助你去生成正确的div。如下： 从上面这幅图片大家可以发现，不管是...
前端开发必备！Emmet使用手册
weixin_30321449的博客
10-10 544
介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能在运行时进行拓展。 Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值