快速参考

以下是支持的特性:

ele creates an HTML element tag
展开一个HTML元素标签
# creates an id attribute
作用于元素标签,展开一个id属性
. creates a class attribute
作用于元素标签,展开一个类属性,一个标签可以跟多个类属性,最终展开会一起呗加入class属性中
[] creates a custom attribute
作用于元素标签,展开一个HTML元素标签的属性,可以是任意非标准属性名称,写法同CSS选择器。
> creates a child element
作用于元素标签或组,紧跟展开一个子元素标签或组,参考CSS选择器
+ creates a sibling element
作用于元素标签或组,紧跟展开一个兄弟元素标签或组,参考CSS选择器
^ climbs up
作用于元素标签或组,紧跟的元素标签或组爬升到上一个层级
* is element multiplication. This creates the same thing n number of times
作用于元素标签或组,展开重复次数,后面跟一个数字。
$ is replaced with an incremental number
配合*使用,代表拷贝的序号
$$ is used for numbers with padding
序号占位,用0填充
{} creates text in an element
展开为文本
() as a group
将标签组作为一组,可嵌套。

ID和类属性:#and.

<!-- Type this -->
div#contentRegion.address <!-- Creates this -->
<div id="contentRegion" class="address"></div>

自定义属性:[]

<!-- Type this -->
div[title] <!-- Creates this -->
<div title=""></div>

也可以包含属性值

<!-- Type this -->
input[placeholder="Name" type="text"] <!-- Creates this -->
<input type="text" value="" placeholder="Name" />

子组:>

<!-- Type this -->
div#menu>span.item[title] <!-- Creates this -->
<div id="menu">
<span class="item" title=""></span>
</div>

兄弟组:+

<!-- Type this -->
footer>div>a+input <!-- Creates this -->
<footer>
<div>
<a href=""></a>
<input type value="" />
</div>
</footer>

爬升:^

<!-- Type this -->
footer>div>a+input^p <!-- Creates this -->
<footer>
<div>
<a href=""></a>
<input type value="" />
</div>
<p></p>
</footer>

重复次数:*

<!-- Type this -->
ul>li*4>span <!-- Creates this -->
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>

重复序号:$

<!-- Type this -->
section>article.item$$*4 <!-- Creates this -->
<section>
<article class="item01"></article>
<article class="item02"></article>
<article class="item03"></article>
<article class="item04"></article>
</section>

文本:{}

<!-- Type this -->
ul>li*4>span{Caption $$} <!-- Creates this -->
<ul>
<li><span>Caption 01</span></li>
<li><span>Caption 02</span></li>
<li><span>Caption 03</span></li>
<li><span>Caption 04</span></li>
</ul>

组:()

<!-- Type this -->
((a+span)+(a>span))*3 <!-- Creates this -->
<a href=""></a>
<span></span>
<span><a href=""></a></span>
<a href=""></a>
<span></span>
<span><a href=""></a></span>
<a href=""></a>
<span></span>
<span><a href=""></a></span>

Emmet/Zen Coding 快速入门说明的更多相关文章

  1. Emmet(Zen Coding)语法规则简介

    ———Emmet(Zen Coding)语法规则简介——— [Zen Coding可谓快速开发HTML和CSS的利器,主要采用仿css类选择器方式编写代码,以下是该利器的基本语法规则和代码示例] 基础 ...

  2. Web开发人员必备工具-Emmet (Zen Coding)

    如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuy ...

  3. 我也来谈谈使用Zen Coding快速开发html和css原理

    zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...

  4. Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

  5. phpstorm使用zen coding 快速编辑补全html/css代码

    百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...

  6. sublime + emmet(Zen Coding)

    今天接触sublime这个编辑器,一下子就喜欢上它了,以前我一直使用NOTEPAD++,果断换上sublime玩玩,呵呵 编辑功能啥的没话,作为前端开发的话,和emmet(原名叫Zen Coding) ...

  7. 结合Zen Coding快速编写HTML代码(sublime text2篇)

    首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...

  8. 前端必备工具-Emmet (Zen Coding)

    Emmet 可以快速的编写 HTML 和 CSS,输入指令如: ul#nav>li*4>a*4 敲击一下TAB 键,就会输出: <ul id="nav"> ...

  9. emmet(Zen coding)帮助文档

    葵花宝典终可成,半途而废万事空. 官方地址:http://docs.emmet.io/cheat-sheet/ 我导出了pdf版,需要的同学可以下载: 链接:http://pan.baidu.com/ ...

随机推荐

  1. FPGA學習筆記(貳)--- 流水燈

    平臺:FPGA黑金开发板 AX301 開發環境:Quartus Prime Version 17.0.0 Build 595 04/25/2017 Standard Edition 引脚配置:鼠標托拉 ...

  2. HTTP之请求消息Request

    客户端发送一个HTTP请求到服务器的请求消息包括以下格式: 请求行(request line).请求头部(header).空行和请求数据四个部分组成. 请求行以一个方法符号开头,以空格分开,后面跟着请 ...

  3. pycharm汉化(3.6版本)

    step 1:下载pycharm汉化包  链接:https://pan.baidu.com/s/1htgcbZY 密码:8uia step 2:将pycharm安装目录下的lib文件夹内下的resou ...

  4. Programming for Everyone !

    Hello Internet ! This blog is to store my algorithm practices. Since Evernote code blocks do not sho ...

  5. Code First的实体继承模式

    Entity Framework的Code First模式有三种实体继承模式 1.Table per Type (TPT)继承 2.Table per Class Hierarchy(TPH)继承 3 ...

  6. zepto 源码 $.contains 学习笔记

    $.contains(parent,node)  返回值为一个布尔值 ==> boolean parent,node我们需要检查的节点检查父节点是否包含给定的dom节点,如果两者是相同的节点,返 ...

  7. javabean转换为map对象

    在调用第三方接口发现对方使用map进行接收(不包括秘钥等),将bean类属性转换为map,直接贴代码: /** * JavaBean对象转化成Map对象 * * @param javaBean */p ...

  8. Dom事件流、冒泡、捕获

    Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...

  9. Notes on Distributed System -- Distributed Hash Table Based On Chord

    task: 基于Chord实现一个Hash Table 我负责写Node,队友写SuperNode和Client.总体参考paper[Stoica et al., 2001]上的伪代码 FindSuc ...

  10. linux 解压 压缩 常见命令

    压缩命令: .tar tar -cvf 文件名称.tar 文件或者文件夹 .tar.gz tar -zcvf 文件名称.tar.gz 文件或者文件夹 .tar.xz tar -Jcf 文件名称.tar ...