是不是还在为html繁琐的标签写法而苦恼？

是不是还在枯燥的写尖括号？

Zen Coding的到来将让前端编码不在繁琐。不再拘泥html的尖括号和一堆一堆的标签。

先看看ZenCoding的效果图。

几个单词+几个符号就能把成堆的html框架写好。

下面来看ZenCoding的用法。

先介绍ZenCoding的快捷键：

  1. Ctrl + E：展开代码
  2. Ctrl + D：向外快速选中代码块
  3. Shift + Ctrl + D：向内快速选中代码块
  4. Shift + Ctrl + A：输入一个缩写，自动展开并包围所选代码
  5. Ctrl + Alt+→ ：光标智能跳转到下一个编辑点
  6. Ctrl + Alt+←：光标智能跳转到上一个编辑点
  7. 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的更多相关文章

  1. 前端必备工具-Emmet (Zen Coding)

    Emmet 可以快速的编写 HTML 和 CSS,输入指令如: ul#nav>li*4>a*4 敲击一下TAB 键,就会输出: <ul id="nav"> ...

  2. Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

  3. 使用Zen coding高效编写html代码

    zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器 ...

  4. 使用Emmet(前身Zen Coding)加速Web前端开发

    Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章 ...

  5. 结合Zen Coding快速编写HTML代码（sublime text2篇）

    首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...

  6. phpstorm使用zen coding 快速编辑补全html/css代码

    百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...

  7. Zen Coding css,html缩写替换大观 快速写出html,css

    阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...

  8. Web开发人员必备工具-Emmet (Zen Coding)

    如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuy ...

  9. Emmet（前身是zen coding）介绍和使用

    Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuyonok开发. 现在它改名为了Emmet,并且搭 ...

随机推荐

  1. 给我发邮件（qq）| 和我联系

    qq邮箱开放平台(只能是qq对qq): 简单点的发邮件: 和我联系

  2. 如何扩大ImageView的点击区域

    我们在开发中会遇到,给imageview设置点击事件,但是美工切的原始图片一般在24dp左右,这个尺寸点击时会出现不灵敏的情况(点击区域太小). 解决方案: 给imageView设置  scaleTy ...

  3. 减少GC开销的措施

    程序的运行会直接影响系统环境的变化,从而影响GC的触发.若不针对GC的特点进行设计和编码,就会出现内存驻留等一系列负面影响.为了避免这些影响,基本的原则就是尽可能地减少垃圾和减少GC过程中的开销.具体 ...

  4. ACM题目————图的广度优先搜索

    题目描述 图的广度优先搜索类似于树的按层次遍历,即从某个结点开始,先访问该结点,然后访问该结点的所有邻接点,再依次访问各邻接 点的邻接点.如此进行下去,直到所有的结点都访问为止.在该题中,假定所有的结 ...

  5. JavaScript navigator 对象(转)

    navigator -- navigator对象通常用于检测浏览器与操作系统的版本 navigator,中文"导航器" 引用网址:http://www.dreamdu.com/ja ...

  6. AndroidManifest.xml 详解

    第1部分 标签库+包路径+版本控制 <manifest xmlns:android="http://schemas.android.com/apk/res/android" ...

  7. 《Effective C++》读书摘要

    http://www.cnblogs.com/fanzhidongyzby/archive/2012/11/18/2775603.html 1.让自己习惯C++ 条款01:视C++为一个语言联邦 条款 ...

  8. 如何在linux下查看gpu信息

    ~$ lspci | grep -i vga01:00.0 VGA compatible controller: NVIDIA Corporation GF119 [GeForce GT 610] ( ...

  9. UML的概念模型

    为 了理解UML,需要形成该语言的概念模型,这要求学习建模的3个要素:UML的基本构造块.支配这些构造块如何放在一起的规则和一些运用于整个UML的公 共机制.如果掌握了这些思想,就能够读懂UML模型, ...

  10. java.util.zip对zip文件解压

    //通过构造方法,来创建一个新的ZIP输入流 ZipInputStream in = new ZipInputStream(new FileInputStream("G:/jquery.ca ...