是不是还在为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. 怎样新建Oracle数据库

    新建Oracle数据库三种方法:1.通过运行Oracle Database Configuration Assistant 创建配置或删除数据库(也可在命令行下输入dbca):2.用命令行的方式建立数 ...

  2. Oracle触发器使用介绍

    触发器,函数,包都是可以再生利用的东西,所以在创建的时候都要用到create or replace这个万能语句,接着就是主角trigger的出现了,主角出现还需要一点点波动,通常大人物都不是随随便便就 ...

  3. mini.open打开窗口时传递参数

    mini.open({ url: "xxx.html", showMaxButton: false, allowResize: false, title: '标题', width: ...

  4. Windows下Python,setuptools,pip,virtualenv的安装

    Windows 2003平台,安装Python2.7.4,Python3.3,setuptools,pip,virtualenv. 安装Python2.7.4(当前版本是2.7.6),安装路径:C:\ ...

  5. 中国地图 xaml Canvas

    <Canvas x:Name="LayoutRoot"  Height="560" Width="700" Background=&q ...

  6. JAVA fundamentals of exception handling mechanism

    Agenda Three Categories Of Exceptions Exceptions Hierarchy try-catch-finally block The try-with-reso ...

  7. HTML5之结构元素

    1:文档结构元素 1.1 文章语义 --  article.header和footer元素 article元素在页面中用来表示结构完整且独立的内容部分,如论坛的一个帖子,杂志或者报纸的一篇文章. ar ...

  8. Android 编程下Touch 事件的分发和消费机制

    1.事件分发:public boolean dispatchTouchEvent(MotionEvent ev) Touch 事件发生时 Activity 的 dispatchTouchEvent(M ...

  9. ContentProvider官方教程(9)定义一个provider完整示例：实现方法，定义权限等

    Creating a Content Provider In this document Designing Data Storage Designing Content URIs Implement ...

  10. Wpf再次学习，分享给入门的朋友

    一.WPF介绍 先说下WPF,她的简称是Windows Presentation Foundation,注意到Presentation这个单词了吧,展现的意思,后面那个是基础,展现基础,WPF是一种展 ...