zoukankan      html  css  js  c++  java
  • ZenCoding[Emmet]語法簡介【轉】

    快速指南

    下面是一些常用的Zen Coding功能,目前VS2013的Web Essentials插件已经支持。

    • '#' 创建一个id特性
    • '.' 创建一个类特性
    • '[]' 创建一个自定义特性
    • '>' 创建一个子元素
    • '+' 创建一个兄弟元素
    • '^' 提升元素层次
    • '*' 相当于乘号,会创建n次相同的东西。
    • '$' 代替一个自增的数字。
    • '$$' 用于有填充位的数字,比如00,01。
    • '{}' 创建元素的文本。

    可以做些啥呢?看下面这个复杂的例子:
    div#olDiv>ol>li.item*6>span{ZenCoding$$}.red
    按下Tab键后,它会生成下面的代码:

    <div id="olDiv">
        <ol>
            <li class="item">
                <span class="red">ZenCoding01</span>
            </li>
            <li class="item">
                <span class="red">ZenCoding02</span>
            </li>
            <li class="item">
                <span class="red">ZenCoding03</span>
            </li>
            <li class="item">
                <span class="red">ZenCoding04</span>
            </li>
            <li class="item">
                <span class="red">ZenCoding05</span>
            </li>
            <li class="item">
                <span class="red">ZenCoding06</span>
            </li>
        </ol>
    </div>
    

    ID和Class特性:#和.

    使用CSS样式语法可以创建一个元素,并给它赋予id或class特性。
    div#container.layout会生成下面的代码:

    <div id="container" class="layout"></div>

    自定义特性:[]

    可以使用中括号[]创建任何特性。
    div[title]会生成下面的代码:

    <div title=""></div>

    也可以创建多个特性并给特性赋值:
    input[placeholder="请输入姓名" type="text"]会生成下面的代码:

    <input type="text" value="" placeholder="请输入姓名" />

    子元素:>

    先要创建一个元素,然后才能创建它的子元素。
    比如,form#loginForm.login>input[type="text"]会生成下面的代码:

    <form id="loginForm" class="login">
          <input type="text" value="" />
     </form>

    兄弟元素:+

    使用Zen Coding可以很轻松地创建兄弟元素。
    footer>div>a+input可以生成下面的代码:

    <footer>
        <div>
            <a href=""></a>
            <input type="" value="" />
        </div>
    </footer>
    

    提升元素层次:^

    >符号会降低元素的层次,然而^符号的作用相反,它是用来提升元素的层次的,而且还可以提升多个级别。比如,1^可以提升一个级别,4^可以提升4个级别。该功能不常用。

    footer>div>a+input^^p,p标签要在input级别的基础上提升2个层次,这样p标签就和最外层的footer标签处于同一级别,所以,生成的代码如下:

    <footer>
        <div>
            <a href=""></a>
            <input type="" value="" />
        </div>
    </footer>
    <p></p>
    

    乘积:*

    创建n个同样的元素。
    ul>li*6会生成下面的代码:

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

    元素序号:$

    当使用乘积*创建n个同样的元素时,可以使用$给它们添加一个自增的数字。注意:使用多个$操作符(如$$)会创建使用多个0填充的数字。
    ul>li#id$$$*4会生成下面的代码:

    <ul>
        <li id="id001"></li>
        <li id="id002"></li>
        <li id="id003"></li>
        <li id="id004"></li>
    </ul>
    

    元素中的文本:{}

    要给元素输入文本时,可以使用{}符号。
    ul>li*10>span{Windows $}会生成以下代码:

    <ul>
        <li>
            <span>Windows 1</span>
        </li>
        <li>
            <span>Windows 2</span>
        </li>
        <li>
            <span>Windows 3</span>
        </li>
        <li>
            <span>Windows 4</span>
        </li>
        <li>
            <span>Windows 5</span>
        </li>
        <li>
            <span>Windows 6</span>
        </li>
        <li>
            <span>Windows 7</span>
        </li>
        <li>
            <span>Windows 8</span>
        </li>
        <li>
            <span>Windows 9</span>
        </li>
        <li>
            <span>Windows 10</span>
        </li>
    </ul>
    

    联合所有的符号

    联合多个功能可以更快地编写一些相当酷的HTML,甚至可以为模板创建一些Knockout.js的绑定,然后只需要改变属性名就行了。

    例如section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"]会生成下面的代码:

    <section data-bind="foreach:customers">
        <div>
            <input type="text" value="" data-bind="text:01" /></div>
        <div>
            <input type="text" value="" data-bind="text:02" /></div>
        <div>
            <input type="text" value="" data-bind="text:03" /></div>
        <div>
            <input type="text" value="" data-bind="text:04" /></div>
    </section>
    

    组合:()

    组合是Zen Coding中强大的功能,它可以创建复杂的表达式。
    例如 div>(header>div)+section>(ul>li*2>a)+footer>(div>span)可以生成下面的代码:

        <div>
            <header>
                <div></div>
            </header>
            <section>
                <ul>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
                <footer>
                    <div>
                        <span></span>
                    </div>
                </footer>
            </section>
        </div>
  • 相关阅读:
    Java Spring Boot VS .NetCore (十) Java Interceptor vs .NetCore Interceptor
    Java Spring Boot VS .NetCore (九) Spring Security vs .NetCore Security
    IdentityServer4 And AspNetCore.Identity Get AccessToken 问题
    Java Spring Boot VS .NetCore (八) Java 注解 vs .NetCore Attribute
    Java Spring Boot VS .NetCore (七) 配置文件
    Java Spring Boot VS .NetCore (六) UI thymeleaf vs cshtml
    Java Spring Boot VS .NetCore (五)MyBatis vs EFCore
    Java Spring Boot VS .NetCore (四)数据库操作 Spring Data JPA vs EFCore
    Java Spring Boot VS .NetCore (三)Ioc容器处理
    Java Spring Boot VS .NetCore (二)实现一个过滤器Filter
  • 原文地址:https://www.cnblogs.com/ywkpl/p/8477697.html
Copyright © 2011-2022 走看看