我的理解:ZenCoding是一个html简写的语法,可以最快速的生成html。

不少IDE应该都支持,我用的intellij idea是支持的。

ZenCoding表示和CSS/JS有相通之处,比如说 . 表示的类,#表示的是id, >表示子代元素。
特殊的几点是:+表示兄弟元素。
{xxx}表示内容
[xxx]表示属性

直接上例子:

例子1:

.testDiv   或者   div.testDiv
=>
<div class="testDiv"></div>

从上述例子可以发现

a. . 表示的是class

b.ZenCoding默认div元素。

例子2:

#divId
=>
<div id="divId"></div>

从上述例子可以发现,#表示的是ID,同JS和CSS。

例子3:

.nav>ul.menu>li.list*3
=>
<div class="nav">
<ul class="menu">
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
</ul>
</div>

从上述例子可以发现,> 大于符号表示的子代元素。   *N 表示的是重复多少个。

例子4:

.content1+.content2+.content3
=>
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>

从上述例子可以发现,+表示的兄弟节点。

例子5:

(#one>ui.nav>li.list*2)+(#two>p>span.content)
=>
<div id="one">
<ui class="nav">
<li class="list"></li>
<li class="list"></li>
</ui>
</div>
<div id="two">
<p><span class="content"></span></p>
</div>

例子6:

span.color{red}
=>
<span class="color">red</span>

从上述例子可以发现,{xxx}表示内容。

例子7:

a.to_main[href='www.baidu.com']{百度}
=>
<a href="www.baidu.com" class="to_main">百度</a>

从上述例子可以发现,[key=value]表示属性,其格式为前为属性名后为值。

例子8:

.one.two.three
=>
<div class="one two three"></div>

从上述例子可以发现,一个div支持多个class的。

例子9:

ul.menu>li.item${item_$$}*3
=>
<ul class="menu">
<li class="item1">item_01</li>
<li class="item2">item_02</li>
<li class="item3">item_03</li>
</ul>

从上述例子可以发现,$可以从0开始随机生成数,一个$表示从1开始,二个$表示从01开始,非常方便。

例子10

form>.control-group>(.radio>(label>input[type="radio",name="only"]{测试$}))*4
=>
<form action="">
<div class="control-group">
<div class="radio"><label for=""><input type="radio" name="only">测试1</label></div>
<div class="radio"><label for=""><input type="radio" name="only">测试2</label></div>
<div class="radio"><label for=""><input type="radio" name="only">测试3</label></div>
<div class="radio"><label for=""><input type="radio" name="only">测试4</label></div>
</div>
</form>

说明:

1. [] 表示的是属性,其为数组属性,如果有多个属性使用 [type="radio",name="only",xxx] 利用逗号分隔。

2. {}表示的值。

3. $表示的依次递增。

例子11

.dropdown>button.btn.btn-primary.dropdown-toggle>span.caret
=>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
</div>

说明:

从上述标红的代码可以知道若一个元素有多个class 那么只需要不停的使用. 就可以了。

综上:

ZenCoding个人觉得的常用方法都在上面了,如果还有其他常用的,烦请补充。

个人写的难免有错误和遗漏,欢迎指正。

我也是初学者。

ZenCoding 个人理解和总结的更多相关文章

  1. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  2. 彻底理解AC多模式匹配算法

    (本文尤其适合遍览网上的讲解而仍百思不得姐的同学) 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符,表示状态的转移.根节点状态记为0状态,表示起 ...

  3. 理解加密算法(三)——创建CA机构,签发证书并开始TLS通信

    接理解加密算法(一)--加密算法分类.理解加密算法(二)--TLS/SSL 1 不安全的TCP通信 普通的TCP通信数据是明文传输的,所以存在数据泄露和被篡改的风险,我们可以写一段测试代码试验一下. ...

  4. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  5. 如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念

    一.前言     DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...

  6. 学习AOP之透过Spring的Ioc理解Advisor

    花了几天时间来学习Spring,突然明白一个问题,就是看书不能让人理解Spring,一方面要结合使用场景,另一方面要阅读源代码,这种方式理解起来事半功倍.那看书有什么用呢?主要还是扩展视野,毕竟书是别 ...

  7. ThreadLocal简单理解

    在java开源项目的代码中看到一个类里ThreadLocal的属性: private static ThreadLocal<Boolean> clientMode = new Thread ...

  8. JS核心系列:理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

  9. 深入理解JS 执行细节

    javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等 ...

随机推荐

  1. Javascript教程

    Javascript教程 laiqun@msn.cn Contents 1. javascript嵌入方式 2. javascript语法 3. 数据类型 4. javascript变量 5. 字符串 ...

  2. 批量删除实现js+springmvc

    前台的控件 <input type='checkbox' name='isSelect' value='"+data[i].id+"' ></input>& ...

  3. redis 进阶

    1.一定要设置最大缓存大小并设置缓存策略 如果不设置最大缓存,在新添加数据时,如果超过最大内存回事redis崩溃! 设置方式:maxmemory 1GB 使用redis-cli登录后,使用info命令 ...

  4. OpenGL-----深度测试,剪裁测试、Alpha测试和模板测试

    片断测试其实就是测试每一个像素,只有通过测试的像素才会被绘制,没有通过测试的像素则不进行绘制.OpenGL提供了多种测试操作,利用这些操作可以实现一些特殊的效果.我们在前面的课程中,曾经提到了“深度测 ...

  5. URL特殊字符需转义

    URL特殊字符需转义 1.空格换成加号(+) 2.正斜杠(/)分隔目录和子目录 3.问号(?)分隔URL和查询 4.百分号(%)制定特殊字符 5.#号指定书签 6.&号分隔参数 转义字符的原因 ...

  6. frame、bounds表示大小和位置的属性以及center、position、anchorPosition

    在iOS开发开发过程中经常会用到界面元素的frame.bounds表示大小和位置的属性以及center.position.anchorPosition等单纯表示位置的属性.这些属性究竟什么含义?彼此间 ...

  7. UVALive 2056 Lazy Math Instructor(递归处理嵌套括号)

    因为这个题目说明了优先级的规定,所以可以从左到右直接运算,在处理嵌套括号的时候,可以使用递归的方法,给定每一个括号的左右边界,伪代码如下: int Cal(){ if(括号)  sum += Cal( ...

  8. 基于VirtualBox 安装和配置Fuel OpenStack(V6.1)

    1.环境准备 准备一台内存较大的主机,12G以上 下载安装VirtualBox及其匹配的扩展包 virtualbox: http://download.virtualbox.org/virtualbo ...

  9. 转:selenium webdriver 执行javascript代码

    在用selenium webdriver 编写web页面的自动化测试代码时,可能需要执行一些javascript代码,selenium本身就支持执行js,我们在代码中import org.openqa ...

  10. mysql数据库主从备份

    近期实验室总是不给通知的就停电,导致我们在不停的恢复服务.在某一个断电的过程中,发现我们的项目管理工具redmine的硬盘挂掉了..因为是部署在虚拟机上的,也没做冗余,数据就丢了..于是反思,我们的m ...