前端代码新写法——Zen Coding
是不是还在为html繁琐的标签写法而苦恼？
是不是还在枯燥的写尖括号？
Zen Coding的到来将让前端编码不在繁琐。不再拘泥html的尖括号和一堆一堆的标签。
先看看ZenCoding的效果图。
几个单词+几个符号就能把成堆的html框架写好。
下面来看ZenCoding的用法。
先介绍ZenCoding的快捷键：
- Ctrl + E：展开代码
- Ctrl + D：向外快速选中代码块
- Shift + Ctrl + D：向内快速选中代码块
- Shift + Ctrl + A：输入一个缩写，自动展开并包围所选代码
- Ctrl + Alt+→ ：光标智能跳转到下一个编辑点
- Ctrl + Alt+←：光标智能跳转到上一个编辑点
- Ctrl + L：选择一行
自己多试试，就能感知ZenCoding对程序员的体贴。
再来看看ZenCoding的语法：
1、后代：>
例：div>ul>li*5
展开结果：
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
2、同级：+
例：div*2+p*3
展开结果：
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>
3、上级：^
例：div>ul>li*2>a^li*2>span
展开结果：
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
4、分组：()
例：(head>p#title*2>a)+(div#body>ul#list>li.item*3)+(foot>ul#code>li*2)
展开结果：
<head>
<p id="title"><a href=""></a></p>
<p id="title"><a href=""></a></p>
</head>
<div id="body">
<ul id="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
<foot>
<ul id="code">
<li></li>
<li></li>
</ul>
</foot>
5、ID：# ； class：. ； 倍增：* ； 自定义属性：[] ；文本：{} ；
例：form#loding>ul>li#btn>input[type="button" value="按钮"]^li>label{标签}[for="name"]+input[type="checkbox" id="name"]{单选}^li>select>option{下拉框}*3(综合例子)
展开结果：
<form action="" id="loding">
<ul>
<li id="btn"><input type="button" value="按钮"></li>
<li><label for="">标签</label><input type="checkbox" id="name">单选</input></li>
<li><select name="" id="">
<option value="">下拉框</option>
<option value="">下拉框</option>
<option value="">下拉框</option>
</select></li>
</ul>
</form>
6、自增：$
例一：ul>li.item$*3
展开结果：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
例二：ul>li{学号：$@6}*3
展开结果：
<ul>
<li>学号：6</li>
<li>学号：7</li>
<li>学号：8</li>
</ul>
例三：ul>li.item$$$*3
展开结果：
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>
例四：ul>li.item$$$@-*5
展开结果：
<ul>
<li class="item005"></li>
<li class="item004"></li>
<li class="item003"></li>
<li class="item002"></li>
<li class="item001"></li>
</ul>
例五：ul>li.item$@-8*5
展开结果：
<ul>
<li class="item12"></li>
<li class="item11"></li>
<li class="item10"></li>
<li class="item9"></li>
<li class="item8"></li>
</ul>
自增总结：$自增，多个$可占位，@-自减，单写@1(number)规定自增起点，@-1(number)定义自减结束值。
各种隐藏(标签)写法：
1) .class = <div class="class"></div>
2) em>.class = <em><span class="class"></span></em>
3) ul>.class = <ul><li class="class"></li></ul>
4) table>.row>.col = <table><tr class="row"><td class="col"></td></tr></table>
各种HTML简写：
1) ！展开结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
2) a = <a href=""></a>
3) a:link = <a href="http://"></a>
4) a:mail = <a href="mailto:"></a>
5) inp = <input type="text" name="" id="" />
6) input:hidden = <input type="hidden" name="" />
input标签所有属性都类似写法。
7) html:xml = <html xmlns="http://www.w3.org/1999/xhtml"></html>
8) bq = <blockquote></blockquote>
9) acr = <acronym title=""></acronym>
10) fig = <figure></figure>
11) bdo = <bdo dir=""></bdo>
12) bdo:r = <bdo dir="ltr"></bdo>
13) figc = <figcaption></figcaption>
14) link = <link rel="stylesheet" href="" />
15) link:css = <link rel="stylesheet" href="style.css" />
15) link:print = <link rel="stylesheet" href="print.css" media="print" />
16) link:favicon = <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
17) link:touch = <link rel="apple-touch-icon" href="favicon.png" />
18) link:rss = <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
19) link:atom = <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
20) meta:utf = <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
21) meta:win = <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
22) meta:vp = <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
23) meta:compat = <meta http-equiv="X-UA-Compatible" content="IE=7" />
24) script:src = <script src=""></script>
25) form:get = <form action="" method="get"></form>
26) form:post = <form action="" method="post"></form>
27) emb = <embed src="" type="" />
28) src = <source></source>
29) btn = <button></button>
30) btn:b = <button type="button"></button>
31) btn:r = <button type="reset"></button>
32) btn:s = <button type="submit"></button>
前端代码新写法——Zen Coding的更多相关文章
- 前端必备工具-Emmet (Zen Coding)
Emmet 可以快速的编写 HTML 和 CSS,输入指令如: ul#nav>li*4>a*4 敲击一下TAB 键,就会输出: <ul id="nav"> ...
- Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...
- 使用Zen coding高效编写html代码
zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器 ...
- 使用Emmet(前身Zen Coding)加速Web前端开发
Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章 ...
- 结合Zen Coding快速编写HTML代码（sublime text2篇）
首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...
- phpstorm使用zen coding 快速编辑补全html/css代码
百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...
- Zen Coding css,html缩写替换大观 快速写出html,css
阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...
- Web开发人员必备工具-Emmet (Zen Coding)
如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuy ...
- Emmet（前身是zen coding）介绍和使用
Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发. 现在它改名为了Emmet,并且搭 ...
随机推荐
- PHP面向对象的一些深入理解
1.$this就是这个对象的地址,$this不能在类外部使用.2.构造函数 __construct 和析构函数都没有返回值:一旦一个对象成为垃圾对象(没有任何变量引用的对象,或者=null),析构函数 ...
- RAC例子
我个人非常推崇ReactiveCocoa,它就像中国的太极,太极生两仪,两仪生四象,四象生八卦,八卦生万物.ReactiveCocoa是一个高度抽象的编程框架,它真的很抽象,初看你不知道它是要干嘛的, ...
- ecshop后台增加模块菜单详细教程(图)
我们有时候针对ecshop如此开发,想在后台加一些菜单,最模板以前提供过教程,但是并非很系统,今天最模板抛砖引玉图文教程告诉大家:如何在ecshop后台增加模块菜单! 首先需要修改四个文件:inc_p ...
- 【转】java URLConnection从网上下载图片或音乐
try { //根据String形式创建一个URL对象, URL url = new URL("http://www.baidu.com"); //实列一个URLconne ...
- [HTML]js定时器使用 setInterval
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 s ...
- hasOwnproperty详细总结
hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象.不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员. isPrototypeO ...
- Unity脚本在层级面板中的执行顺序测试2
上一篇测试了生成顺序对执行顺序的影响,链接:LINK 执行顺序测试3: LINK 这篇主要测试一下Awake,OnEnable,Start三个常用消息的循环顺序 1.测试消息循环顺序 先上一个最简单的 ...
- 1. WP8.1学习笔记
数据绑定 含义:将对象绑定到控件上 2.基本名词 控件:绑定目标 对象:绑定源(数据源) 控件与对象属性的联系:路径 如何绑定 创建对象,设置控件 在控件需要数据绑定的地方使用拓展语法 <But ...
- [转]实战 SQL Server 2008 数据库误删除数据的恢复
实战 SQL Server 2008 数据库误删除数据的恢复 关键字:SQL Server 2008, recover deleted records 今天有个朋友很着急地打电话给我,他用delete ...
- thinkphp 实现无限极分类
thinkphp实现无限极分类,获得所有的子类 今天学习测试了一上午也没有整出来,一开始一直没有办法把所有的子分类拿出来. 最后找到原因: 每次调用的时候没有在最后return的位置我没有选择retu ...