notepad++结合Zen Coding快速编写HTML代码

image

用插件管理安装 zencoding

 

image

使用例子:

div#header>div#logo+ul.nav>li.item-$*5>a选中按快捷键: ctrl+alt+enter  会自动生成如下的HTML代码:

<div id="header">
    <div id="logo"></div>
    <ul class="nav">
        <li class="item-1"><a href=""></a></li>
        <li class="item-2"><a href=""></a></li>
        <li class="item-3"><a href=""></a></li>
        <li class="item-4"><a href=""></a></li>
        <li class="item-5"><a href=""></a></li>
    </ul>
</div>
Zend Coding书写规范:

E:表示元素,如p,div等,例如我们在编辑中输入:

p
按一下ctrl+alt+enter,我们就能得到

<p></p>

E#name和E.name:这个是ID和Class属性,和CSS样式表定义ID和Class是一样的。#表示ID,.表示Class。例如定义一个ID为header的div,我们可以这样来书写:div#header,然后定义一个class我们可以写在 div.region。我们一起先在编辑中输入:

div#header
       然后展开,就成为:

<div id="header"></div>
div.region       展开就是:

<div class="region"></div>
       当然我们同时可以将两者合并在一起,因为在我们编写代码时,常会碰到一个元素具有一个ID和多个Class名,那我们这里也可以简单方便的实现,大家一起来看下面的一个例子:

div#nav.menu.links.tab       同时我们来展开他:

<div id="nav" class="menu links tab"></div>       是不是我们这个div同时具有ID名nav和class名menu,links,tab呀,方便吧

 

E>E:表示父级嵌套子级:

div#header>h1#logog<div id="header">
    <h1 class="logo"></h1>
</div>
       我们还可以实现多级嵌套:

div#header>h1#logo>a<div id="header">
    <h1 id="logo"><a href=""></a></h1>
</div>

 

E+E:同辈元素:

div#header>h1.site_name+p.site_solgan<div id="header">
    <h1 class="site_name"></h1>
    <p class="site_solgan"></p>
</div>给元素添加属性:给标签元素添加属性

a[title]<a href="" title=""></a>       当然我们还可以给其加上属性值:

a[title="hello zen coding"]<a href="" title="hello zen coding"></a>       不过这里需要提醒大家一点,在展开之前,光标最好放在a[title="hello zen coding"]的末尾。不然会造成不可想像的错误,大家可以自己尝试一下,就自然明白了。

E*N:多个相同元素的写法

div#nav>ul>li.item*5>a<div id="nav">
    <ul>
        <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>

 

E*N$:按索引生成

ul>li.item-$*3<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>

您可以选择一种方式赞助本站