是不是还在为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. JSONArray遍历

    java代码 方法一: 1 2 3 4 5 JSONArray array = JSONArray.fromObject(data); for (Object object : array) {    ...

  2. java 面试每日一题6

    题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 1.程序分析: 兔子的规律为数列1,1,2,3,5 ...

  3. sql截断日志

    --收缩数据库 DBCC SHRINKDATABASE(fas) --截断事务日志: BACKUP LOG fas WITH NO_LOG 1.清空日志 DUMP TRANSACTION 库名 WIT ...

  4. ZOJ 3860: - Find the Spy

    3860 - Find the Spy Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu S ...

  5. c# 财务数据编号的生辰

    实现逻辑: 根据票号前戳+生成的6位数据编号=收据号(010+000001=010000001) 作废票号      将票号作废,插入到编号表中,以此下次在使用 作废票号使用 编号表中 现在只有2,当 ...

  6. table 单线条

    <style>        .a{            cursor:pointer;            color: blue;            text-decorati ...

  7. oracle驱动地址

    D:\app\LHComputer\product\12.1.0\dbhome_1\ODP.NET\bin\2.x

  8. 证码识别--type1

                                                                                 证码识别--type1 ​从最简单的开始.主要 ...

  9. 【转】Linus：利用二级指针删除单向链表

    原文作者:陈皓 原文链接:http://coolshell.cn/articles/8990.html 感谢网友full_of_bull投递此文(注:此文最初发表在这个这里,我对原文后半段修改了许多, ...

  10. UVa 489，紫书P79，刽子手游戏

    题目链接:https://uva.onlinejudge.org/external/4/489.pdf 这个题很像之前的一个拓扑排序的题目,思路类似咯. 程序模块化: 每次判断一个字母,lose,wi ...