是不是还在为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. 提高PHP性能的实用方法+40个技巧优化您的PHP代码

    1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数" ...

  2. linux下访问中文目录文件

    文件路径包含中文时,可输入部分文件名,然后按Tab键. 当路径包含中文括号时,用斜杠,如: \(….\) . 也可用 ls -li ,先查看inum(inode编号),然后再根据编号进行访问,用查找命 ...

  3. Cocos2dx中的opengl使用（一）简单介绍

    引擎提供了CCGLProgram类来处理着色器相关操作,对当前绘图程序进行了封装,其中使用频率最高的应该是获取着色器程序的接口:const GLuint getProgram(); 该接口返回了当前着 ...

  4. c# 客户端

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. 周赛-Colored Sticks 分类： 比赛 2015-08-02 09:33 7人阅读 评论(0) 收藏

    Colored Sticks Time Limit: 5000MS Memory Limit: 128000K Total Submissions: 32423 Accepted: 8556 Desc ...

  6. JAVA基础知识之Set集合

    Set集合的基本特征是不记录添加顺序,不允许元素重复(想想是为什么).最常用的实现类是HashSet. 本文将要介绍以下内容 HashSet类 HashSe的特征 HashSet的equals和has ...

  7. winform中利用反射实现泛型数据访问对象基类(2)

    在1的基础上做了一点改进 参数化处理 看上去更简洁 无主键情况下 update 方法需要改进 insert delete没有问题  /// <summary>     /// DAO基类 ...

  8. 模块shimgvw.dll已加载，但找不到入口点DllRegisterServer

    [环境]Windows 7 / Windows Server 2008 [现象]在文件夹浏览器中不能显示图片缩略图. [错误信息]查系统日志,有如下消息:“模块shimgvw.dll已加载,但找不到入 ...

  9. reactjs入门到实战（四）---- state详解

    this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性. 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开 ...

  10. Maven仓库的理解及配置

    什么是Maven仓库 在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录下,往往会看到一个名为/lib的子目录,那里存放着各类第三方依赖jar文 件,如log4j.jar,junit. ...