【转载】Notepad++配置Zen Coding

我怕爱的太早我们不能终老 提交于 2019-12-10 17:29:47

原标题:Notepad++配置Zen Coding

为Notepad++安装 Zen Coding 插件

下载 Zen.Coding 解压

将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。

重启Notepad++,即可开始使用 Zen Coding。

Zen Coding 用法

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

E
元素名 (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);

接下来,我们来熟悉 Zen Coding for Notepad++ 的快捷键,也是 Zen Coding 的精髓

【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+A】 嵌套代码(Wrap with Abbreviation)

比如,我们想让写好的 <p>hello world</p> ,想在外层再套一个div,只需按下【Ctrl+Shift+A】,在弹出的对话框中输入: div.wrap,回车。此标签就能自动被嵌套。

甚至,我们可以玩的更炫一些,写好三行列表内容,全裸,此时没有任何标签。只需按下【Ctrl+Shift+A】,输入 ul>li* ,回车。这三行内容就能自动被ul li 嵌套起来。(不仅限于 li 列表哦)

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

[title="Hello world" rel] => <a href="" title="hello world" rel=""></a>

td[colspan=2] => <td colspan="2"></td>

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>li4>a)+(div#page>(h1>span)+p2)+div#footer

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

<div id="wrap"> <div class="content"> <p></p> </div> </div>

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

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!