前端代码新写法——Zen Coding

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

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

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

先看看ZenCoding的效果图。

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

下面来看ZenCoding的用法。

先介绍ZenCoding的快捷键：

Ctrl + E：展开代码
Ctrl + D：向外快速选中代码块
Shift + Ctrl + D：向内快速选中代码块
Shift + Ctrl + A：输入一个缩写，自动展开并包围所选代码
Ctrl + Alt+→ ：光标智能跳转到下一个编辑点
Ctrl + Alt+←：光标智能跳转到上一个编辑点
Ctrl + L：选择一行

自己多试试，就能感知ZenCoding对程序员的体贴。

再来看看ZenCoding的语法：

1、后代：>

例：div>ul>li*5

展开结果：

<div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

View Code

2、同级：+

例：div*2+p*3

展开结果：

    <div></div>
    <div></div>
    <p></p>
    <p></p>
    <p></p>

View Code

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>

View Code

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>

View Code

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>

View Code

6、自增：$

例一：ul>li.item$*3

展开结果：

    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
    </ul>

View Code

例二：ul>li{学号：$@6}*3

展开结果：

<ul>
    <li>学号：6</li>
    <li>学号：7</li>
    <li>学号：8</li>
</ul>

View Code

例三：ul>li.item$$$*3

展开结果：

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

View Code

例四：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>

View Code

例五：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>

View Code

自增总结：$自增，多个$可占位，@-自减，单写@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>

posted on 2016-06-14 13:10 MirageFireFox 阅读(761) 评论(2) 编辑收藏举报