Emmet的一些新的用法【转】
2013-04-20 23:53
260 查看
Zen Coding是知名的前端编码辅助工具,可以极大简化HTML/CSS代码输入。简单说Zen Coding就是一个强大、智能的自动补全工具。出于品牌管理的考虑,Zen Coding这个名字已成往事,2012年年末作者把它改名为Emmet。其实我挺喜欢她原先大气上档次的名字,所以冒着标题党的危险,用Zen coding做标题,其实下面主要讲的是Emmet。
尽管Emmet(蚂蚁)名字略显屌丝,不过相比更新之前的 Zen Coding,支持的编辑器更多了,包括:Sublime Text,TextMate, Eclipse,Coda,NotePad++,CodeMirror等,甚至一些在线代码服务也支持:JSFiddle、JS Bin等。功能也增强了很多,提供了对HTML5和CSS3的支持,下面列举一些进行说明:
[/code]
上面输出的是HTML5的文本类型申明,如果想要输出HTML4文本类型申明可以输入
基本的标签缩写和展开形式如下:
[/code]
Emmet能够智能的补全标签名,如果输入省略了标签名,默认使用div,除非上下文标签有关联的情况,比如在
[/code]
除了这些,Emmet考虑到了一些复杂的标签结构,因此提供了非常丰富的缩写方式,比如:
标签属性
[/code]
一些标签属性还有进一步的缩写:
[/code]
组合
[/code]
标签计数
[/code]
注释及条件注释
[/code]
属性
CSS的缩写官方有说明,基本是属性名缩写,比如:
[/code]
CSS属性非常多,包括CSS3的属性都能通过类似的缩写来展开,记不住官方文档里的缩写也不要紧,前面说了她的智能匹配特性,凭感觉写就好,你的想法Emmet基本都能猜到的。
属性前缀
CSS3的很多属性都包含浏览器厂商前缀,写起来异常蛋疼,不过没关系,用Emmet写CSS3属性会自动添加前缀,比如输入
[/code]
属性值 Emmet支持自动扩展属性值单位,比如
[/code]
看到这里想必你已跃跃欲试,如本文开头所说,Emmet的编辑器插件已经覆盖到Mac和Windows下的几款主流编辑器,不妨今天就装一个试试。
详细的语法参考手册,有兴趣的同学可以到这里查看:http://docs.emmet.io/cheat-sheet/ 。
Goodbye Zen Coding, Hello Emmet
本站文章均由远尘原创,转载请注明:
转载自前端网事博客,本文链接地址:Zen Coding 禅境编程
尽管Emmet(蚂蚁)名字略显屌丝,不过相比更新之前的 Zen Coding,支持的编辑器更多了,包括:Sublime Text,TextMate, Eclipse,Coda,NotePad++,CodeMirror等,甚至一些在线代码服务也支持:JSFiddle、JS Bin等。功能也增强了很多,提供了对HTML5和CSS3的支持,下面列举一些进行说明:
HTML缩写语法
输入!或者
html:5再按Tab可以输出HTML基本结构:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
[/code]
上面输出的是HTML5的文本类型申明,如果想要输出HTML4文本类型申明可以输入
html:4s或者
html:4t。
基本的标签缩写和展开形式如下:
a -> <a href=""></a> div.class -> <div class="class"></div> div#id -> <div id="id"></div> div>p -> <div><p></p></div> div+p -> <div></div><p></p>
[/code]
Emmet能够智能的补全标签名,如果输入省略了标签名,默认使用div,除非上下文标签有关联的情况,比如在
ul中会自动采用
li:
.class -> <div class="class"></div> ul>.class -> <ul><li class="class"></li></ul>
[/code]
除了这些,Emmet考虑到了一些复杂的标签结构,因此提供了非常丰富的缩写方式,比如:
标签属性
a[href] -> <a href=""></a>
[/code]
一些标签属性还有进一步的缩写:
a:link -> <a href="http://"></a> input:c -> <input type="checkbox" name="" id="" />
[/code]
组合
(div>p)+(div>span) -> <div><p></p></div> <div><span></span></div>
[/code]
标签计数
ul>li*2 -> <ul> <li></li> <li></li> </ul> ul>li.item$*2 -> <ul> <li class="item1"></li> <li class="item2"></li> </ul>
[/code]
注释及条件注释
c -> <!-- --> cc:ie6 -> <!--[if lte IE 6]> <![endif]-->
[/code]
CSS缩写语法
跟HTML的补全相比,CSS的补全更强大。Emmet会识别不完整的CSS属性,自动选择最匹配的结果来展开,比如ov:h或者
overf:h都会展开成
overflow:hidden。
属性
CSS的缩写官方有说明,基本是属性名缩写,比如:
pos:s -> position:static; mr -> margin-right:;
[/code]
CSS属性非常多,包括CSS3的属性都能通过类似的缩写来展开,记不住官方文档里的缩写也不要紧,前面说了她的智能匹配特性,凭感觉写就好,你的想法Emmet基本都能猜到的。
属性前缀
CSS3的很多属性都包含浏览器厂商前缀,写起来异常蛋疼,不过没关系,用Emmet写CSS3属性会自动添加前缀,比如输入
trs会展开为:
-webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;
[/code]
属性值 Emmet支持自动扩展属性值单位,比如
w100展开以后是
width: 100px;,当然不仅仅支持像素,还支持%和em:
w10 -> width:10px; w10p -> width:10%; w1.5e -> width:1.5em
[/code]
看到这里想必你已跃跃欲试,如本文开头所说,Emmet的编辑器插件已经覆盖到Mac和Windows下的几款主流编辑器,不妨今天就装一个试试。
详细的语法参考手册,有兴趣的同学可以到这里查看:http://docs.emmet.io/cheat-sheet/ 。
参考资料
Emmet Cheat SheetGoodbye Zen Coding, Hello Emmet
本站文章均由远尘原创,转载请注明:
转载自前端网事博客,本文链接地址:Zen Coding 禅境编程
相关文章推荐
- Math及一些数学类的一些用法
- rspec的一些常见用法
- asp.net中System.DateTime.Now.ToString()的一些用法
- 有关iPhone UIDevice UIApplication的一些常见用法
- rsync同步的一些用法
- C#中一些字符串操作的常用用法
- MySQL中distinct及group by的一些用法
- java中 FileWriter类 和 FileReader类的一些基本用法
- TCppWebBrowser控件的一些用法
- UIWebView的一些用法总结
- javaScript秘密花园,主要关心 JavaScript 一些古怪用法的文档。
- new一些鲜为人知的用法!
- 关于getDeclaredMethod一些用法
- curl 一些用法
- C# ToString()方法一些特殊用法集锦
- 关于Calendar用法的一些总结
- C语言中#宏的一些用法和预编译宏展开问题
- Aptana一些快键用法
- 正则表达式中 ? 符号的一些用法
- Apache Pig的一些基础概念及用法总结2(转)