Editplus中关于zen-coding插件的使用

最新推荐文章于 2024-09-10 15:19:05 发布

原创最新推荐文章于 2024-09-10 15:19:05 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#editplus #zen coding #html缩写 #css缩写 #zen coding快捷键

关于前台设计的那点儿事儿专栏收录该内容

1 篇文章

订阅专栏

Zen-Coding是一款提高HTML和CSS开发效率的插件，支持多种编辑器，包括Aptana、Coda、Espresso等。它通过简洁的缩写语法快速生成代码，例如html:xt代表XHTML transitional文档类型。此外，还提供了一系列快捷键，如Ctrl+E展开缩写，Ctrl+/添加/取消注释。Zen-Coding的语法包括HTML和CSS标签的缩写、选择器和循环等，可以显著提高前端开发速度。

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

1.zen-coding是一款用于高效开发HTML和CSS的插件。

2.网址介绍：

zen-coding的项目首页： http://code.google.com/p/zen-coding/

zen-coding的下载所支持的软件： http://code.google.com/p/zen-coding/downloads/list

zen-coding的微维基列表： http://code.google.com/p/zen-coding/w/list

3.zen-coding软件支持：

下载（完全支持）：

Aptana(跨平台)

Coda,via TEA for Coda(Mac)

Espresso,via TEA for Espresso(Mac)

下载（部分支持，只支持"展开缩写"）

TextMate(Mac)

TopStyle

Sublime Text

GEdit

Dreamweaver CS5

editArea在线编辑

4.zen-coding语法

知识要点：

（1）常用的缩写和HTML标记

（2）通过>+等创建不同层次结构的标记

（3）了解#id，.class，[title]选择器

（4）*N和$*N循环以及$$$补零

快捷键：

Ctrl + E 展开缩写

Ctrl + / 添加注释，再次操作取消注释

Ctrl + Alt + ] 跳到下一个编辑点

Ctrl + Alt + [ 跳到上一个编辑点

Ctrl + Shift + A 嵌套代码

缩写操作（常用）：

（1）建立html格式文件：

html:xt

html:xs

html:xxs

html:5

（2）ie注释语句：

cc:ie6

cc:ie

cc:noie

（3）标签类（HTML常使用）

a:link

a:mail

a:link[title]

link

link:css

link:print

link:favicon

style

script

script:src

form

form:get

form:post

label

input

input:t

input:t[name="user"]#user

input:p

input:r

input:c

input:s

input:reset

input:b

ul+

ol+

dl+

（4）标签类（CSS常使用）

pos:s

pos:r

pos:f

pos:a

t:a

l:a

b:a

r:a

fl:n

fl:r

fl:l

m:a

m:4

fw:b

fs:i

ta:c

td:n

ov:h

ov:a

ov:s

d:b

d:i

w:a

h:a

maw

miw

mah

mih

bdw

bdc

bds

bdc

bdt

bdw

bdl

bd+

bgc

bgi

bgp

bga

bg+

4.zen-coding的小例子

缩写的代码：

html:xt>(div#wrapper.wrapper1.wrapper2[title="wrapper"]>div#header>h1#logo[title="Zen Coding"]+ul#nav>li.item-0$*5>a[title])+(div#content>div#col$*3)+(div#footer>p#copyright)

展开的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Zen Coding</title>
</head>
<body>
	<div id="wrapper" class="wrapper1 wrapper2" title="wrapper">
		<div id="header">
			<h1 id="logo" title="Zen Coding"></h1>
			<ul id="nav">
				<li class="item-01"><a href="" title=""></a></li>
				<li class="item-02"><a href="" title=""></a></li>
				<li class="item-03"><a href="" title=""></a></li>
				<li class="item-04"><a href="" title=""></a></li>
				<li class="item-05"><a href="" title=""></a></li>
			</ul>
		</div>
	</div>
	<div id="content">
		<div id="col1"></div>
		<div id="col2"></div>
		<div id="col3"></div>
	</div>
	<div id="footer">
		<p id="copyright"></p>
	</div>
</body>
</html>