Zend coding的详细用法

于 2017-07-11 16:22:08 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： html+css 文章标签： html css
Zencoding
    首先看看这个zencoding代码：

点击(此处)折叠或打开

  1. html>head>(title+style+script[src=abc$.js]*3)+body>((.content>.nav>ul>li*5>a>span)+(.sidebar>.top+.middle+.bottom)+.main>.acticle*3>h1{文章标题$}+p)+.footer{版权信息}
     哦，你会说，这行代码如何呢？请翻滚此文一直到末尾，有一个综合性的练习，练习题目就是用这行代码生成的html文件。
   没错，你没看错，那么多的一大篇html代码就是由以上这句话产生的。
   好奇了吧，想学了吧。看下文吧。

    3、环境配置
    在上一篇博客《超级牛B编码王（一）：Sublime2之WIN7下安装Zencoding 》中详细介绍了Sublime2下Zencoding的安装，当然Zencoding就是一个插件，也有其他比如Notepad、DW等编辑器的版本，大家到“ http://zencoding.org/”这里就能全部网罗。关于环境搭建，不多说，第一篇写的很详细了。

    4、注意事项
    ZC项目更新速度较快，大家现在能在百度里搜到的教程，都不太全，未能完全展示Zencoding之力。所以本文将较为完备地由浅入深讲解它。但随着时间的流逝，半年或一年后，本文也将因项目发展而变得不全，不过基本要点是没有变的。

    5、QuickStart
    (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.

    为了容易分辨，我加了隔行变色。



————————————————————————————————————
***  不要着急，现在就开始详细讲解了  ***
————————————————————————————————————


    (3)“#”表id，“.”表类，“+”表并列
    使用sublime建立一个foo.html保存到桌面，然后Win7下快捷键Ctrl+Alt+Enter调出zencoding的心印(koan)，koan一词源于佛语，等你学完全文才能明白它的含义。
    写入如下代码，就可以产生一组HTML结构，看图吧:

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

    小练习1：
    请大家完成以下HTML的zencoding代码，时间要求30秒以内：

点击(此处)折叠或打开

  1. <div id="header"></div>
  2. <div class="content"></div>
  3. <div class="sidebar"></div>
  4. <div id="footer"></div>
      做不完本练习，不能往下学，打牢基础最重要。

    小练习2：
    请大家完成以下HTML的zencoding代码，时间要求35秒以内：

点击(此处)折叠或打开

  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>
      做不完本练习，更不能往下学，因为你根本就没明白怎样用一行zencoding写出来。
    如果你5分钟后还是做不出来，教程最后一部分有练习题答案，悲催的您去看看吧。后续内容你会更不适应。但那些一下子能明白过来的人或是直接做对的同志，嗯，悟性很好，趁热打铁，再接再厉！

    (4)“>”指子内容
    很容易理解，比如写下“div>p>span>a”这个Koan，那么就有这个HTML结构：

点击(此处)折叠或打开

  1. <div>
  2.     <p><span><a href=""></a></span></p>
  3. </div>
     其中，a标签里的属性href是zencoding智能加入的。总之“>”产生了标签的层级，而且zencoding会自动缩进哦。来接着练习吧。
    
    小练习3：
    按照HTML代码，回推Koan。

点击(此处)折叠或打开

  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：
    刚才练习3做的很爽吧，在这里又给你放了一个练习，试试手气吧。Try it hard!

点击(此处)折叠或打开

  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <style type="text/css"></style>
  5.         <script type="text/javascript"></script>
  6.     </head>
  7.     <body>
  8.         <div class="content">
  9.             <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>
      没错，也是一句Koan就OK的事！
    如果你错了，恭喜你，你为下一步打下了重要的基础。你做对了，不是蒙的就是蒙的。

       (5)“()”指同级范围
    理论叙述是枯燥的，看例子是愉快的。刚才的小练习4，答案是
html>(head>title+style+script)+body>+(div.content>div.nav+div.sidebar+div.main)+div.footer
    呵呵，对照HTML代码，你自己该想明白“()”是干什么的了吧。这也就是没有()的情况下head中的style会出现在别处。
    这节没有练习，和大家玩了一个朝三暮四。

     (6)“[]”表属性
    如何完成<h1 title="something"></h1>的属性写法呢，就是用“[]”，即如下Koan：h1[title=someting]。
    好了又到了练习时间。

     小练习5：
    按照HTML代码，回推Koan。

点击(此处)折叠或打开

  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>
     这个练习，我感觉出的很好，即使你做出来了，也要认真地看我给出的答案，因为其中有玄妙啊！

     (6)#和.的简写
    Koan中：div.ok等同于.ok，div#no等同于#no，所以直接写.或#时，默认为Div标签是也。

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

     (7)“*”表标签克隆
    如果在Koan中写入一下内容：ul>li*5，就会产生以下HTML结构：

    那么，如果每个li元素中还存在<a>与<span>呢，没事照下图办：


    OK，想必大家想明白了*号的用法，继续练习。
    
     小练习7：
    按照HTML代码，回推Koan。

点击(此处)折叠或打开

  1. <div class="header">
  2.     <ul class="nav">
  3.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  4.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  5.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  6.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  7.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  8.         <li><a href="" sytle="block"><span>五岳之巅</span></a></li>
  9.     </ul>
  10. </div>

    没错，什么都做出来了，就是里面的“五岳之巅”弄不出来吧，这是我给你下的套，为下一节埋一个伏笔。其实我这人挺好的，总这么折腾还不是想让大家自己发现问题，自己开始思考嘛。

     (8)“{}”表标签内容
    你在Koan中写：div>span>h1{这是标题}，自己看看会出现什么吧。
    此节无练习，只因太简单。

     (9)“$”表连续数
    其实好理解，不说废话，看图吧：

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

     小练习8：
    按照HTML代码，回推Koan。难度只在“01、02...”的表示上。

点击(此处)折叠或打开

  1. <table>
  2.     <thead>
  3.         <td class="col1"></td>
  4.         <td class="col2"></td>
  5.         <td class="col3"></td>
  6.         <td class="col4"></td>
  7.     </thead>
  8.     <tbody>
  9.         <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>

      好了，至此，讲完了Zencoding的主要而且最常用的内容。

    最后一个综合性的练习，做一下吧，请大家一句Koan搞定它，千万别偷看文章最开始答案啊，我想你应该可以自己完成了吧：


*******************这就是文章开头的那句Koan生成的代码*********************************

点击(此处)折叠或打开

  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <style type="text/css"></style>
  5.         <script type="text/javascript" src="abc1.js"></script>
  6.         <script type="text/javascript" src="abc2.js"></script>
  7.         <script type="text/javascript" src="abc3.js"></script>
  8.     </head>
  9.     <body>
  10.         <div class="content">
  11.             <div class="nav">
  12.                 <ul>
  13.                     <li><a href=""><span></span></a></li>
  14.                     <li><a href=""><span></span></a></li>
  15.                     <li><a href=""><span></span></a></li>
  16.                     <li><a href=""><span></span></a></li>
  17.                     <li><a href=""><span></span></a></li>
  18.                 </ul>
  19.             </div>
  20.         </div>
  21.         <div class="sidebar">
  22.             <div class="top"></div>
  23.             <div class="middle"></div>
  24.             <div class="bottom"></div>
  25.         </div>
  26.         <div class="main">
  27.             <div class="acticle">
  28.                 <h1>文章标题1</h1>
  29.                 <p></p>
  30.             </div>
  31.             <div class="acticle">
  32.                 <h1>文章标题2</h1>
  33.                 <p></p>
  34.             </div>
  35.             <div class="acticle">
  36.                 <h1>文章标题3</h1>
  37.                 <p></p>
  38.             </div>
  39.         </div>
  40.         <div class="footer">版权信息</div>
  41.     </body>
  42. </html>
    答案：

    练习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
腾飞君
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在dreamweaver中使用zen coding的方法
12-10
OK，今天我就写一篇详细的教程来讲述如何在DW中使用zen coding。如果你已经知道如何使用，可以不再阅读本文。 可喜的是，我在Dreamweaver CS3上进行了测试，证明Dreamweaver CS3和CS4都是支持Zen coding的这个插件...
Git Coding 使用方法
12-25
Git Coding 使用方法
Zencoding
Ph智的博客
01-26 1090
from: http://blog.chinaunix.net/uid-22414998-id-3184766.html 超级牛B编码王（二）：Sublime2之Zencoding快速上手   1、前言     刚看完球，辽足0-0平北京国安，稳稳妥妥各拿1分，皆大欢喜。恒大4-0狂胜长春亚泰。期待恒大51主场之战，死磕全北现代。最近两天一直在研究BootStrap这个东东，做了
分享7个超实用的Emmet（zen coding）HTML代码使用技巧
weixin_34001430的博客
01-27 162
还记得Emmet（即Zen coding）吗？最棒的书写HTML代码的利器之一，能够帮助你快速书写HTML代码的工具。在今天这篇文章中，我们将要分享7个超酷的Emmet书写HTML的技巧，希望大家喜欢！ 1. 跳过Div 第一个小技巧就是跳过div，Emment非常清楚你需要输入什么内容，你只需要输入class或者是id，Emmet会自动帮助你生成正确的div。如下： 大家可以看到，...
Zen Coding:css,html缩写替换大观---让你的html,css飞起来
weixin_34292402的博客
12-19 158
文中部分摘要来源：http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html 阅读本文，先仔细阅读上文来源网站文章。本文是在zen使用生产中遇到的问题做一些分享。 E元素名称(div, p); E#id使用id的元素(div#content, p#intro, span#error); E.class使用类的元素...
Zen Coding: 一种快速编写HTML/CSS代码的方法
剑胆琴心-.Net 学习笔记
03-23 1098
Zen Coding
ZenCoding 快速指南
Class_Raito的专栏
03-21 1171
快速指南 下面是一些常用的Zen Coding功能，目前VS2013的Web Essentials插件已经支持。 '#' 创建一个id特性 '.' 创建一个类特性 '[]' 创建一个自定义特性 '>' 创建一个子元素 '+' 创建一个兄弟元素 '^' 提升元素层次 '*' 相当于乘号，会创建n次相同的东西。 '$' 代替一个自增的数字。 '$$' 用于有填充位的数字，比
Git Coding 使用方法说明.enex
12-24
Git Coding 使用方法说明.enex
EditPlus 3+zendCoding+自配的色彩风格+HTML、CSS语法文件
12-31
EditPlus 3+zendCoding+自配的色彩风格+HTML、CSS语法文件，全部的功能都有了，配色也用了一个下午，语法文件也一并加进来了，其中HTML5的元素也在语法文件中了，CSS3的暂时还没有加入，有需要的朋友也可以自行加入...
关于sublime 与zen coding 使用
weixin_30955341的博客
07-19 72
安装： 使用的是sublime2: 1.呼出命令行：ctrl+` 2.在命令行中输入 sublime2： import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Contro...
zen coding插件下载
09-18
zen coding插件方便简洁，输入代码关键字即可实现完整排版。极为方便
zen coding
01-06
sublime zen coding插件 zen coding for sublime
Zen Coding 快速编写HTML/CSS代码的实现
10-28
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。
zen coding--免费下载
09-05
Sublime Text 2插件包zen coding--免费下载zen coding Sublime Text 2插件包
Emmet（ZenCoding）语法（一）
SeaSunExpect的博客
05-03 2213
Emmet（ZenCoding）——web开发人员的基本工具 缩写 缩写是Emmet工具包的核心，这些特殊表达式在运行时解析，并转换为结构化代码块。 缩写语法 嵌套操作：用于在生成的树中放置缩写元素   1. 儿童：>            使用>该操作符将元素嵌套在彼此中 div>ul>li 生成结果：
Notepad++6.7.4成功安装zend coding并正常使用
lyx509的专栏
02-04 1006
日前想要在Notepad++上安装zend coding(已更名为emmet)，分别在各自官网下载了相关内容，依照官网上emmet for Notepad++的安装过程安装之后，该emmet还是不能使用。 无赖之下，只有去找其他版本的emmet插件，最终在网上找到了之前的zend coding版本。安装之后成功运行。以下对Notepad++ 上安装zend coding做一个总结：
Zen Coding 简易教程（六分钟学 Zen Coding）(转载)
yu_1243的专栏
03-27 1659
读了一遍 Zen Coding 相关内容，在网上看到了一些大牛的博客，转载过来当作给自己的回顾。（原文地址：http://kaikai.info/how-to-zen-coding/） 使用的是 Sublime Text 2，安装了 Package Installer 插件与 Zen Coding 插件。Windows/MAC 下均使用 Ctrl+Alt+Enter 调出 Koan（即 Zen
zen-coding的使用
qq_32034413的博客
02-05 570
zen-coding的语法
simple coding
最新发布
08-20
简单编码（Simple Coding）是一种基础级别的编码。它通常指的是使用简单的编程语言和技术来解决简单的问题或实现简单的功能。简单编码可以用于教育、初学者学习、快速原型开发等场景。 简单编码通常包括使用基本的编程概念，例如变量、运算符、条件语句和循环语句来实现基本的任务。这些代码通常短小而直接，在逻辑上相对简单明了，易于理解和修改。 简单编码通常不涉及复杂的算法或数据结构，而是着重于解决基本的问题。它常用于创建简单的计算器、打印乘法表、判断数字奇偶性等简单任务。这种编码的主要目的是引导初学者理解基本编程概念，并培养一些基本的编程思维和逻辑。 然而，简单编码并不代表低效或无用。对于一些简单的任务，简单编码可以非常有效地解决问题，同时也可以为学习者提供一个入门的平台。通过逐步扩展简单编码，学习者可以逐渐掌握更复杂的编程知识和技巧。 尽管简单编码很有用，但在工程实践中并不是万能的解决方案。面对更复杂的问题和需求，可能需要使用更高级的编码技术和工具来完成任务。然而，简单编码仍然是学习和构建复杂编码的重要一步，也是理解计算机科学基础的关键。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值