Sublime Text2下安装 Zen Coding(现更名为Emmet)

最新推荐文章于 2019-07-09 17:28:50 发布

原创最新推荐文章于 2019-07-09 17:28:50 发布 · 826 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dev tools

dev tools 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在Sublime Text 2中安装Emmet插件，并提供了丰富的Zen Coding语法示例，帮助您高效编写HTML/CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装zen coding之前需要安装package control,方法如下：

1.使用Ctrl ＋｀（数字1左边那个键）调出Console，然后输入以下代码，然后按回车键执行：

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

执行完后，控制台会显示一用句，提示你重启sublime以完成安装。

2.重启Sublime Text 2，在Preferences->Package Settings中看到Package Control这一项表示安装成功。

3、通过Command（Mac）/Ctrl(Windows) ＋ Shift＋ P调出包管理，输入 Install ，选择Install Package。然后输入Emmet,选择后回车，开始自动进行安装，安装完成后会出现一个readme，表示安装成功。

注： zen coding现在已经更名为emmet了，所以如果还按网上一些文章中介绍的那样搜索zen coding,是找不到的，这也是我写这篇文章的原因。

Emmet官网地址： http://emmet.io/，上面有一些例子，可以学习下

附：一些zen coding语法

Zen HTML Selectors

E#name

div#name

<divid="name"></div>

E.name

div.name

<divclass="name"></div>

div.one.two

<divclass="one two"></div>

div#name.one.two

<divid="name"class="one two"></div>

E>E

head>link

<head>    <link/></head>

table>tr>td

<table><tr>    <td></td></tr></table>

ul#name>li.item

<ulid="name">    <liclass="item"></li></ul>

E+E

p+p

<p></p><p></p>

div#name>p.one+p.two

<divid="name">    <pclass="one"></p>    <pclass="two"></p></div>

E[attr]

Added in v0.6

p[title]

<ptitle=""></p>

td[colspan=2]

<tdcolspan="2"></td>

span[title="Hello" rel]

<spantitle="Hello"rel=""></span>

E|filter

Added in v0.6

p.title|e

&lt;p class="title"&gt;&lt;/p&gt;

Read Filtersfor more info

E*N

p*3

ul#name>li.item*3

<ulid="name">    <liclass="item"></li>    <liclass="item"></li>    <liclass="item"></li></ul>

E*N$

p.name-$*3

<pclass="name-1"></p><pclass="name-2"></p><pclass="name-3"></p>

select>option#item-$*3

<select>    <optionid="item-1"></option>    <optionid="item-2"></option>    <optionid="item-3"></option></select>

E+

ul+

table+

<table><tr>    <td></td></tr></table>

dl+

<dl>    <dt></dt>    <dd></dd></dl>