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

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
    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 
    t:a 

    l 
    l:a 
    b:a 
    r:a 

    fl:n 
    fl:r 
    fl:l 

    m 
    m:a 
    m:4 
    ml 
    mr 
    mt 
    mr
 
    p 
    pl 
    pt 
    pr 
    pb
 
    fz 
    fw 
    fw:b 
    fs 
    fs:i 

    ta:c 
    td:n
 
    ov:h 
    ov:a 
    ov:s
 
    d 
    d:b 
    d:i 
    
    w 
    w:a 
    h 
    h:a 
    lh 
    maw 
    miw 
    mah 
    mih 

    bd 
    bdw 
    bdc 
    bds 
    bdc
    bdt 
    bdw 
    bdl 
    bd+ 

    bg 
    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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值