Notepad++中zen-Coding使用

1. notePad 下载 官网:

https://www.notepad-plus-plus.org/

2. zen-coding 下载

zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器。 zen-Coding插件支持多种编辑器,如UltraEdit,Notepad++等。

Notepad++安装zen-Coding

1.下载zen-Coding的Notepad++插件;(zen-Coding for Notepad++)
2.解压后将压缩包中的文件放入Notepad++安装目录下的plugins文件夹中;
3.重新启动Notepad++编辑器就能看到菜单栏上增加了一项Zen Coding。

51CTO网站的去下载


3. Zen Coding 用法

首先,我们先学习一下 Zen Coding 的缩写规则 (其实就是CSS选择器)


  • 元素名 (div, p);
  • E#id 
    带id的元素 (div#content, p#intro, span#error);
  • E.class 
    带class的元素 (div.header, p.error.critial). id 和 class 可以连写,如: 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);
  • E[attr] attr:表示元素属性。例: 

    a[title]   <a href="" title=""></a> td[colspan=2] <td colspan="2"></td>

  • E|filter E|e, |e输出转义字符 

    div#wrap>div.content>p|e

    1
    2
    3
    4
    5
    &lt;div id="wrap"&gt;
         &lt;div class="content"&gt;
             &lt;p&gt;&lt;/p&gt;
         &lt;/div&gt;
    &lt;/div&gt;

  • .()控制嵌套分组关系

    div#header>(h1.logo>a)+ul.nav>li.item*5>a  

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    < div id = "header" >
         < h1 class = "logo" >< a href = "" ></ a ></ h1 > /*h1和ul是兄弟关系*/
         < ul class = "nav" >
             < li class = "item" >< a href = "" ></ a ></ li >
             < li class = "item" >< a href = "" ></ a ></ li >
             < li class = "item" >< a href = "" ></ a ></ li >
             < li class = "item" >< a href = "" ></ a ></ li >
             < li class = "item" >< a href = "" ></ a ></ li >
         </ ul >
    </ div >

    div#header>h1.logo>a+ul.nav>li.item*5>a

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    < div id = "header" >
         < h1 class = "logo" >      /*h1和ul是父子关系*/
             < a href = "" ></ a >
             < ul class = "nav" >
                 < li class = "item" >< a href = "" ></ a ></ li >
                 < li class = "item" >< a href = "" ></ a ></ li >
                 < li class = "item" >< a href = "" ></ a ></ li >
                 < li class = "item" >< a href = "" ></ a ></ li >
                 < li class = "item" >< a href = "" ></ a ></ li >
             </ ul >
         </ h1 >
    </ div >

    以上两种写法得到的结构是不一样的。 请大家注意观察。


【Ctrl+E】 展开缩写(Expand Abbreviation) 用法:输入缩写代码后,在代码末尾直接按快捷键得到完整代码

比如写下 div#page>div.logo+ul>li*3>a ,按一下 Ctrl+E,立马就可以转化成:

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
	</ul>
</div>

【Ctrl+Shift+D】选中代码块(Balance Tag Inward/Outward)

选中当前光标所在的代码块,多次按可依次选中父块,父块,父块

【Ctrl+Alt+[ , Ctrl+Alt+]】 转到上一个/下一个编辑点(Go to Next/Previous Edit Point)

按下可以依次跳到可输入内容的编辑点,省去了不停按方向键或鼠标来定位编辑点的麻烦。

【Ctrl+Alt+M 】合并行(Merge Lines)

将选中的多行代码合并为一行。压缩css、js代码为一行时,这个很方便。Ctrl+A,然后Ctrl+Alt+M,两下即可搞定,免去了动用压缩工具的麻烦。(当然这个只是简单地将代码合并为一行,并不能做更深入的代码压缩)

【Alt+/ 】添加、移除注释(Toggle Comment)

注释掉光标所在的代码块 (Notepad++ 自带的Ctrl+Shift+Q也可以用来注释代码)

【Ctrl+’ 】空标签转化(Split/Join Tag)

比如将 <div class="test"></div> 转化为 <div class="test"/>, 反向亦可

【Ctrl+Shift+’ 】移除标签(Remove Tag)

比如将 <div class="test">hello world</div> 移除div标签,留下hello world。 

目前 Notepad++ 的 Zen Coding 只有这几个快捷键,下面介绍一些常用到的缩写

不知道大家新建一个html 页面时,是如何输入文档声明和 head 那一坨东西的。现在有了Zen Coding,只需输入几个字母就能立马生成相应文档声明的 html 结构框架

html:4t (HTML 4.01 Transitional)
html:4s (HTML 4.01)
html:xt (XHTML 1.0)
html:xs (XHTML 1.0 Strict) 
html:xxs (XHTML 1.1)
html:5 (HTML5)

head 中常用到的一些缩写

meta:utf, meta:compat
style, link:css, link:print, link:favicon, link:rss,
script, script:src

body 中会常用到的缩写

诸如 div, p, a, ul, ol, input:t, input:r 等等

其中,类似 ul+ 的形式可展开为(+号可自动生产默认的子元素)

<ul>
    <li></li>
</ul>

类似的还有 ol+, dl+, table+, tr+, select+, map+, optg+ 等

IE 条件注释:

cc:ie6, cc:ie, cc:noie


下边是一些典型用法示例:

div#name.one.two => 
		<div id="name" class="one two"></div>
li.item$*3  =>
		<li class="item1"></li><li class="item2"></li><li class="item3"></li> 
li.item$$$ =>
	<li class="item001"></li>
li.item-$-content*3 => 
	<li class="item-1-content"></li><li class="item-2-content"></li><li class="item-3-content"></li> 
#content>.section => 
	<div id="content"><div class="section"></div></div>
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer 带括号的结果
<div id="page">
		<div id="header">
			<ul id="nav">
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</div>
		<div id="page">
			<h1><span></span></h1>
			<p></p>
			<p></p>
		</div>
		<div id="footer"></div>
	</div>

此外【|e】 可以输出转义字符

&lt;div id="wrap"&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

div#wrap>div.content>p|e|e 可转化为:

&amp;lt;div id=&quot;wrap&quot;&amp;gt;
    &amp;lt;div class=&quot;content&quot;&amp;gt;
        &amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
以上介绍的仅仅是有关HTML的缩写,CSS的缩写就更多了,建议查看  Zen Coding 小抄 ,学习CSS 的 Zen Coding 方式

自己编写缩写规则

plugins\NppScripting\includes\Zen Coding.js

在其中对应位置仿照已有规则添加自己的缩写规则。也可以修改缩写规则更符合自己的习惯。

即使你不编写自己的缩写规则,也强烈建议你阅读此文件,熟悉 Zen Coding 自带的一些缩写规则,让代码书写更加事半功倍~



  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值