ZenCoding 个人理解和总结
我的理解: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 个人理解和总结的更多相关文章
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 彻底理解AC多模式匹配算法
(本文尤其适合遍览网上的讲解而仍百思不得姐的同学) 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符,表示状态的转移.根节点状态记为0状态,表示起 ...
- 理解加密算法(三)——创建CA机构,签发证书并开始TLS通信
接理解加密算法(一)--加密算法分类.理解加密算法(二)--TLS/SSL 1 不安全的TCP通信 普通的TCP通信数据是明文传输的,所以存在数据泄露和被篡改的风险,我们可以写一段测试代码试验一下. ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- 如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念
一.前言 DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...
- 学习AOP之透过Spring的Ioc理解Advisor
花了几天时间来学习Spring,突然明白一个问题,就是看书不能让人理解Spring,一方面要结合使用场景,另一方面要阅读源代码,这种方式理解起来事半功倍.那看书有什么用呢?主要还是扩展视野,毕竟书是别 ...
- ThreadLocal简单理解
在java开源项目的代码中看到一个类里ThreadLocal的属性: private static ThreadLocal<Boolean> clientMode = new Thread ...
- JS核心系列:理解 new 的运行机制
和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...
- 深入理解JS 执行细节
javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等 ...
随机推荐
- Javascript教程
Javascript教程 laiqun@msn.cn Contents 1. javascript嵌入方式 2. javascript语法 3. 数据类型 4. javascript变量 5. 字符串 ...
- 批量删除实现js+springmvc
前台的控件 <input type='checkbox' name='isSelect' value='"+data[i].id+"' ></input>& ...
- redis 进阶
1.一定要设置最大缓存大小并设置缓存策略 如果不设置最大缓存,在新添加数据时,如果超过最大内存回事redis崩溃! 设置方式:maxmemory 1GB 使用redis-cli登录后,使用info命令 ...
- OpenGL-----深度测试,剪裁测试、Alpha测试和模板测试
片断测试其实就是测试每一个像素,只有通过测试的像素才会被绘制,没有通过测试的像素则不进行绘制.OpenGL提供了多种测试操作,利用这些操作可以实现一些特殊的效果.我们在前面的课程中,曾经提到了“深度测 ...
- URL特殊字符需转义
URL特殊字符需转义 1.空格换成加号(+) 2.正斜杠(/)分隔目录和子目录 3.问号(?)分隔URL和查询 4.百分号(%)制定特殊字符 5.#号指定书签 6.&号分隔参数 转义字符的原因 ...
- frame、bounds表示大小和位置的属性以及center、position、anchorPosition
在iOS开发开发过程中经常会用到界面元素的frame.bounds表示大小和位置的属性以及center.position.anchorPosition等单纯表示位置的属性.这些属性究竟什么含义?彼此间 ...
- UVALive 2056 Lazy Math Instructor(递归处理嵌套括号)
因为这个题目说明了优先级的规定,所以可以从左到右直接运算,在处理嵌套括号的时候,可以使用递归的方法,给定每一个括号的左右边界,伪代码如下: int Cal(){ if(括号) sum += Cal( ...
- 基于VirtualBox 安装和配置Fuel OpenStack(V6.1)
1.环境准备 准备一台内存较大的主机,12G以上 下载安装VirtualBox及其匹配的扩展包 virtualbox: http://download.virtualbox.org/virtualbo ...
- 转:selenium webdriver 执行javascript代码
在用selenium webdriver 编写web页面的自动化测试代码时,可能需要执行一些javascript代码,selenium本身就支持执行js,我们在代码中import org.openqa ...
- mysql数据库主从备份
近期实验室总是不给通知的就停电,导致我们在不停的恢复服务.在某一个断电的过程中,发现我们的项目管理工具redmine的硬盘挂掉了..因为是部署在虚拟机上的,也没做冗余,数据就丢了..于是反思,我们的m ...