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>
ZenCoding[Emmet]語法簡介【轉】的更多相关文章
- 用Razor語法寫範本-RazorEngine組件介紹【转——非常好,可以用它来代替NVelocity】
RazorEngine 官網網址:http://razorengine.codeplex.com 在找到RazorEngine之前曾經想過其他的方案,如T4與V8 Engine載jquery.temp ...
- 用Razor語法寫範本-RazorEngine組件介紹
最近剛好有要寫寄Email的程式,在代碼中寫HTML覺得很呆,抽出代碼外寫到txt或html檔當範本,由程式執行時在載入檔案時用Regex換關鍵字又覺得不夠好用,而且因為有時會有要判斷一些條件,就會寫 ...
- Scripting Languages 簡介
Scripting Languages 簡介 何謂 Scripting? 命令稿語言 scripting language 是什麼? 很難給一個嚴格的定義; 不妨看看最具代表性的幾個例子: perl, ...
- vue起步和模板語法
vue構造器里有哪些內容: var a=new Vue({}) 模板語法: 文本插值: html: html的屬性里的值應該使用v-bind: 表達式: 指令; 參數:v-bind,v-on 雙向用戶 ...
- 查看LINQ Expression編譯後的SQL語法(转)
在用了LINQ語法之後的一個月,我幾乎把SQL語法全部拋到腦後了,不過 LINQ好用歸好用,但是實際上操作資料庫的還是SQL語法,如果不知道LINQ語法 編譯過後產生怎樣的SQL語法,一不小心效能就會 ...
- Delphi APP 開發入門(六)Object Pascal 語法初探
Delphi APP 開發入門(六)Object Pascal 語法初探 分享: Share on facebookShare on twitterShare on google_plusone_sh ...
- Java學習筆記(基本語法)
本文件是以學習筆記的概念為基礎,用於自我的複習紀錄,不過也開放各位的概念指證.畢竟學習過程中難免會出現觀念錯誤的問題.也感謝各位的觀念指證. 安裝JDK 在Oracle網站中找自己系統的JDK下載位置 ...
- 開賣!下集 -- ASP.NET 4.5 專題實務(II)-範例應用與 4.5新功能【VB/C# 雙語法】
開賣!下集 -- ASP.NET 4.5 專題實務(II)-範例應用與 4.5新功能[VB/C# 雙語法] 我.....作者都沒拿到書呢! 全台灣最專業的電腦書店 -- 天瓏書局 已經開賣了! 感謝天 ...
- 【转自CSDN】深入 Microsoft.VisualBasic.Strings.StrConv 簡繁轉換
深入 Microsoft.VisualBasic.Strings.StrConv 簡繁轉換 昨天又遇到一個簡繁轉換的需求, 雖然這個問題以前已經處理過了, 但是以前是用自己建立的 b52gb 和 gb ...
随机推荐
- Django QuerySet API
https://docs.djangoproject.com/en/2.1/ref/models/querysets/
- 如何查看eclipse、mysql的版本 - 原创
Eclipse 1)如果实在官网下载的,看压缩包名字就可以看出来,只带有win32字样的是32位,带有win32-x86_64字样的是64位的. 2)找到eclipse安装目录的eclipse.ini ...
- java-给微信推送消息 利用企业微信
目的:给关注用户推送消息 场景:自动化测试,运维监控,接口访问等报错预警.例如线上接口报错,发送提醒消息 准备工作: 1:注册企业号(为什么不用公众号呢?) 企业号注册 2:常用参数介绍: 1:COR ...
- jsp:xpath - xml
.1 关于“/ ”和“// ”的使用“/”是表示当前文档的节点,类似 DOS 目录分割符,“//”则表示当前文档所有的节点.类似查看整个目录.(1)/authors/author:表示选择根目录下.父 ...
- 在Windows Server 2012上安装SharePoint 2010 SP1
现在很多企业的系统都开始用上了Windows 2012,最近公司需要建立一个门户系统,一开始就想到了微软的SharePoint2010,这玩意确实非常强悍,2008已经褪去,当然直接在Windows ...
- DGA短域名(360样本) mark下 下次分析可以参考
一共100万,按照长度排序后的前2000个: aagst.cnacyke.wsaefrd.ccaiqxg.ukakplh.pwalurx.pwamsmz.ccaogtp.inawwgf.inayveg ...
- 28-THREE.JS 扇形圆形
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- js中关于json常用的内容、js将数字保留两位小数
没什么好说的 保存起来 以后有个地方找 var json=eval("[]") //json定义 var s={"id":"xxx",& ...
- 016对象——__set __get get_class_methods get_class_vars
<?php /** */ //http://phpbasic.com/004object/16.php?type=admin /*session_start(); $_SESSION['utyp ...
- Sturts2 三种开发模式 (转)
1.实现与 Servlet API的交互struts2中提供了Map类型的request.session与application,可以从ActionContext对象中获得.ActionContext ...