• Sublime text 2之WIN7下安装Zencoding插件和使用


    什么是Zendcoding呢?

    它是一个俄国小伙子Sergey Chikuyonok主导编写的Zencoding项目,主要是仿CSS选择器语法来快速码HTML代码。能有多快?

    看下面这张图片:

    注意图中的Enter Koan部分,就那么几个字符就输出了那么多html代码,怎么样?好玩吧?下面我们就看如何安装。

    首先我们需要安装一个插件的安装平台。

    A:按快捷键Ctrl+`(注意这个字符,就是数字1左边的那个)弹出console;

    B:粘贴以下代码,回车。便安装了一款名为“Package Control”的插件,可以认为这是这个插件是别的插件的安装平台,装别的插件可以通过它来安装;

    1 import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

    装好,重启Sublime。

    平台装好了,就该用它来装插件了。

    C:使用快捷键Ctrl+Shift+p,弹出命令行选择器,然后输入install,调出Package Control,在最底下找到Zencoding,点选就安装,装好,重启。

    D:随便建个index.html用Sublime打开。

    E:关键的地方到了:在windows下,打开Zencoding的快捷键是Ctrl+Alt+Enter!

    如下图:

    下面我们就来了解下它就如何使用的。

    (1)如下图所示,到github里搜索zencoding。

    搜索结果:

    从搜索结果我们可以看出,zencoding有多种语言扩展和IDE扩展,所以不仅能写HTML和CSS也能写Ruby和PHP等,具体内容请详见图片上的“more >>”。

    (2)在上图中点击第一项“sergeche/zen-coding”进入项目页。然后向下翻啊翻,可以看到如下使用说明:

    Current features of abbreviation engine:
    A.ID and CLASS attributes: div#page.section.main.
    
    B.Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].
    
    C.Element multiplication: li*5 will output 
    tag five times.
    
    D.Item numbering with $ character: li.item$*3 will output 
    tag three times, replacing $ character with item number.
    
    E.Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001
    
    F.Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.
    
    G.Filters support
    
    H.div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.
    

    详细解释:

    1)“#”表id,“.”表类,“+”表并列

    写完Enter Koan后面的代码后,上面就出现了HTML结构。这个例子可以看出一般的zencoding格式是“HTML标签#xxx”或者“HTML标签.yyy”,而#xxx表示id为xxx,.yyy说明class为yyy。最后“+”表示标签的并列。

    小练习1:

    1 <div id="header"></div>
    2 <div class="content"></div>
    3 <div class="sidebar"></div>
    4 <div id="footer"></div>

    小练习2:

    1 <div id="header"></div>
    2 <div id="content" class="aticle posts"></div>
    3 <div id="sidebar" class="ad"></div>
    4 <div id="footer"></div>

    2)“>”指子内容

    很容易理解,比如写下“div>p>span>a”这个Koan,那么就有这个HTML结构:
    1 <div>
    2     <p><span><a href=""></a></span></p>
    3 </div>

    其中,a标签里的属性href是zencoding智能加入的。总之“>”产生了标签的层级,而且zencoding会自动缩进哦。来接着练习吧。

    小练习3:

    1 <html>
    2     <head></head>
    3     <body>
    4         <div class="header"></div>
    5         <div class="content"></div>
    6         <div class="footer"></div>
    7     </body>
    8 </html>

    小练习4:

    01 <html>
    02     <head>
    03         <title></title>
    04         <style type="text/css"></style>
    05         <script type="text/javascript"></script>
    06     </head>
    07     <body>
    08         <div class="content">
    09             <div class="nav"></div>
    10             <div class="sidebar"></div>
    11             <div class="main"></div>
    12         </div>
    13         <div class="footer"></div>
    14     </body>
    15 </html>

    3)“()”指同级范围

    参考小练习4的答案相信你会明白的。

    4)“[]”表属性

    如何完成<h1 title="something"></h1>的属性写法呢,就是用“[]”,即如下Koan:h1[title=someting]。

    小练习5:

    1 <div id="content">
    2     <div class="aticle">
    3         <h1 class="ok" title="papername" sytle="color:#000;"></h1>
    4         <h3 title="subname" sytle="color:#fff;" class="no"></h3>
    5         <p class="words"></p>
    6     </div>
    7 </div>

    5)#和.的简写

    Koan中:div.ok等同于.ok,div#no等同于#no,所以直接写.或#时,默认为Div标签是也。

    小练习6:
       用简写法改写练习5。

    6)“*”表标签克隆

    如果在Koan中写入一下内容:ul>li*5,就会产生以下HTML结构:

    1 <ul>
    2 <li></li>
    3 <li></li>
    4 <li></li>
    5 <li></li>
    6 <li></li>
    7 </ul>

    那么,如果每个li元素中还存在<a>与<span>呢?

    OK,想必大家想明白了*号的用法,继续练习。

    7)“{}”表标签内容

    你在Koan中写:div>span>h1{这是标题},自己看看会出现什么吧。

    8)“$”表连续数



    所以不论在属性如li.li-$或是id或是{}中的内容,$就代表从1开始的序列,就和Excel表一格写一个1,下拉改格拖出2,3,4,5,6的意思一样。

    小练习7:

    01 <div class="header">
    02     <ul class="nav">
    03         <li><a href="" sytle="block"><span>雪洁之家</span></a></li>
    04         <li><a href="" sytle="block"><span>雪洁之家</span></a></li>
    05         <li><a href="" sytle="block"><span>雪洁之家</span></a></li>
    06         <li><a href="" sytle="block"><span>雪洁之家</span></a></li>
    07         <li><a href="" sytle="block"><span>雪洁之家</span></a></li>
    08         <li><a href="" sytle="block"><span>雪洁之家</span></a></li>
    09     </ul>
    10 </div>

    小练习8:

    01 <table>
    02     <thead>
    03         <td class="col1"></td>
    04         <td class="col2"></td>
    05         <td class="col3"></td>
    06         <td class="col4"></td>
    07     </thead>
    08     <tbody>
    09         <tr class="row01">
    10             <td class="col1"></td>
    11             <td class="col2"></td>
    12             <td class="col3"></td>
    13             <td class="col4"></td>
    14         </tr>
    15         <tr class="row02">
    16             <td class="col1"></td>
    17             <td class="col2"></td>
    18             <td class="col3"></td>
    19             <td class="col4"></td>
    20         </tr>
    21         <tr class="row03">
    22             <td class="col1"></td>
    23             <td class="col2"></td>
    24             <td class="col3"></td>
    25             <td class="col4"></td>
    26         </tr>
    27     </tbody>
    28     <tfoot>
    29         <td></td>
    30         <td></td>
    31         <td></td>
    32         <td></td>
    33     </tfoot>
    34 </table>

    练习题答案:

       练习1:div#header+div.content+div.sidebar+div#footer

       练习2:div#header+div#content.aticle.posts+div#sidebar.ad+div#footer

       练习3:html>head+body>div.header+div.content+div.footer

       练习4:html>(head>title+style+script)+body>(div.content>div.nav+div.sidebar+div.main)+div.footer

       练习5:div#content>div.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words

    (注意:1、id或class与属性的先后位置,是否无关?;2、并列属性的写法,是否很灵活?3、为什么这个例子不用(),而上一个例子必须用呢?)

       练习6:#content>.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words

       练习7:div.header>ul.nav>li*6>a[sytle=block]>span{雪洁之家}

       练习8:table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$*4)+tfoot>td*4

  • 相关阅读:
    Beta版本冲刺第二天 12.6
    Beta版本冲刺第一天 12.5
    Linux学习(2)—— 图形化界面
    Linux学习(1)—— 虚拟机安装Linux系统
    IntelliJ IDEA使用
    spring+springmvc+hibernate 整合
    新的篇章
    软件工程实践总结作业——个人作业
    Beta版本冲刺———第七天
    Beta版本冲刺———第六天
  • 原文地址:https://www.cnblogs.com/webu/p/3116924.html
Copyright © 2020-2023  润新知