是不是还在为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. Python入门学习笔记

    了解 一下Python中的基本语法,发现挺不适应的,例如变量经常想去指定类型或者if加个括号之类的.这是在MOOC中学习到的知识中一点简单的笔记. Python的变量和数据类型: 1.Python这种 ...

  2. mongo 日记

    分组代码片段 命令行代码: aggregate({$group:{_id:{A:'$A',B:'$B',C:'$C'}}}) 拿出唯一号有重复的数据: > db.aaaa.aggregate([ ...

  3. C#的OpenFileDialog和SaveFileDialog的常见用法（转）

    OpenFileDialog openFileDialog1 = new OpenFileDialog();            openFileDialog1.InitialDirectory = ...

  4. A类地址

    一个A类IP地址由1字节(每个字节是8位)的网络地址和3个字节主机地址组成,网络地址的最高位必须是“0”.A类IP的地址第一个字段范围是0~127,但是由于全0和全1的地址用作特殊用途,实际可指派的第 ...

  5. HDU 自动刷题机 Auto AC （轻轻松松进入HDU首页）

    前言: 在写这篇文章之前,首先感谢给我思路以及帮助过我的学长们 以下4篇博客都是学长原创,其中有很多有用的,值得学习的东西,希望能够帮到大家! 1.手把手教你用C++ 写ACM自动刷题神器(冲入HDU ...

  6. Cookie案例

    实现的功能是:在页面上点击,各种书名,跳转到另一个页面,在点解return 回到原来的页面,并且最下面出现刚才点击的书名:进行多次操作,都会出现刚刚点击的书名: 类似于:在浏览器上显示你登录的记录: ...

  7. Uniform Generator 分类： HDU 2015-06-19 23:26 11人阅读 评论(0) 收藏

    Uniform Generator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...

  8. .Net鼠标随动窗口

    就像QQ宠物或者迅雷悬浮窗口一样,鼠标点下去窗体跟着鼠标动 主要是两个时间的加载 MouseDown和MouseMove事件 MouseDown事件: private int _StartX ;//鼠 ...

  9. 在包a中新建一个类A，在类A中有一个int add(int m)方法，用来求1+2+…+m 的和。在包b中新建一个类B，在类B中有一个int cheng(int n)方法，用来求n! 的结果。在包c中新建一个主类C，调用A、B中的方法输出1+2+…+30的和， 以及5！的计算结果。

    package a; public class A { public void add(int m) { int sum=0; for (int i = 1; i <=m; i++) { sum ...

  10. Android 程序打包和安装过程

    APP程序打包与安装的流程: APP的安装过程: