Emmet/Zen Coding 快速入门说明
快速参考
以下是支持的特性:
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 快速入门说明的更多相关文章
- Emmet(Zen Coding)语法规则简介
———Emmet(Zen Coding)语法规则简介——— [Zen Coding可谓快速开发HTML和CSS的利器,主要采用仿css类选择器方式编写代码,以下是该利器的基本语法规则和代码示例] 基础 ...
- Web开发人员必备工具-Emmet (Zen Coding)
如果你从事前端开发或者web开发的话,一定听说过Zen coding - 一种快速编写HTML/CSS代码的方法.它使用仿CSS选择器的语法来快速开发HTML和CSS - 由Sergey Chikuy ...
- 我也来谈谈使用Zen Coding快速开发html和css原理
zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...
- Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...
- phpstorm使用zen coding 快速编辑补全html/css代码
百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...
- sublime + emmet(Zen Coding)
今天接触sublime这个编辑器,一下子就喜欢上它了,以前我一直使用NOTEPAD++,果断换上sublime玩玩,呵呵 编辑功能啥的没话,作为前端开发的话,和emmet(原名叫Zen Coding) ...
- 结合Zen Coding快速编写HTML代码(sublime text2篇)
首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...
- 前端必备工具-Emmet (Zen Coding)
Emmet 可以快速的编写 HTML 和 CSS,输入指令如: ul#nav>li*4>a*4 敲击一下TAB 键,就会输出: <ul id="nav"> ...
- emmet(Zen coding)帮助文档
葵花宝典终可成,半途而废万事空. 官方地址:http://docs.emmet.io/cheat-sheet/ 我导出了pdf版,需要的同学可以下载: 链接:http://pan.baidu.com/ ...
随机推荐
- FPGA學習筆記(貳)--- 流水燈
平臺:FPGA黑金开发板 AX301 開發環境:Quartus Prime Version 17.0.0 Build 595 04/25/2017 Standard Edition 引脚配置:鼠標托拉 ...
- HTTP之请求消息Request
客户端发送一个HTTP请求到服务器的请求消息包括以下格式: 请求行(request line).请求头部(header).空行和请求数据四个部分组成. 请求行以一个方法符号开头,以空格分开,后面跟着请 ...
- pycharm汉化(3.6版本)
step 1:下载pycharm汉化包 链接:https://pan.baidu.com/s/1htgcbZY 密码:8uia step 2:将pycharm安装目录下的lib文件夹内下的resou ...
- Programming for Everyone !
Hello Internet ! This blog is to store my algorithm practices. Since Evernote code blocks do not sho ...
- Code First的实体继承模式
Entity Framework的Code First模式有三种实体继承模式 1.Table per Type (TPT)继承 2.Table per Class Hierarchy(TPH)继承 3 ...
- zepto 源码 $.contains 学习笔记
$.contains(parent,node) 返回值为一个布尔值 ==> boolean parent,node我们需要检查的节点检查父节点是否包含给定的dom节点,如果两者是相同的节点,返 ...
- javabean转换为map对象
在调用第三方接口发现对方使用map进行接收(不包括秘钥等),将bean类属性转换为map,直接贴代码: /** * JavaBean对象转化成Map对象 * * @param javaBean */p ...
- Dom事件流、冒泡、捕获
Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...
- Notes on Distributed System -- Distributed Hash Table Based On Chord
task: 基于Chord实现一个Hash Table 我负责写Node,队友写SuperNode和Client.总体参考paper[Stoica et al., 2001]上的伪代码 FindSuc ...
- linux 解压 压缩 常见命令
压缩命令: .tar tar -cvf 文件名称.tar 文件或者文件夹 .tar.gz tar -zcvf 文件名称.tar.gz 文件或者文件夹 .tar.xz tar -Jcf 文件名称.tar ...