您的位置：首页 > Web前端

Emmet介绍 -- 前端开发工具（前身 Zen Coding）

2013-06-15 12:10 344 查看
Emmet 是什么？在用的同学请跳过此文，没听说过的可以继续...

Zen Coding 就不用我说了吧，之前一直是前端的一个非常使用的工具，支持各种编辑器（DW, Notepad++, Sublime Text等）。（没听说过的同学可以看看 http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html ）。

Zen Coding 就是 Emmet 的 前身。下面是Emmet几个简单的例子。

HTML


-- Doctype

　　




html:5
或 
!
=> HTML5 doctype

html:xt
=> XHTML transitional doctype

html:4s
=> HTML4 strict doctype

-- class、id、attr 等

a.link#traget[href=#, target=_blank]{hello} => <a href="#," class="link" id="traget" target="_blank">hello</a>

-- 多个列表

h3.title{List}+ul.list-1>li.item-$*3 => <h3 class="title">List</h3>



<ul class="list-1">





<li class="item-1"></li>





<li class="item-2"></li>





<li class="item-3"></li>





</ul>









CSS


-- 值（单位）




p
→ %

e
→ em

x
→ ex





w100 => width: 100px;





h5e => height: 5em;





ml8 => margin-left: 8px;





-- 前缀





trf => -webkit-transform: ;





-moz-transform: ;





-ms-transform: ;





-o-transform: ;





transform: ;












扩展



-- 测试文字

lorem
=>




Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat maxime culpa explicabo cumque amet placeat tempore natus nulla illo accusamus eaque numquam! Suscipit adipisci reiciendis consequuntur quam beatae quasi architecto.





资料


官方主页 ： http://docs.emmet.io/



速查表 ： http://docs.emmet.io/cheat-sheet/




支持编辑器



Sublime Text 2

TextMate 1.x

Eclipse/Aptana

Coda 1.6 and 2.x

Espresso

Notepad++

PSPad

<textarea>

CodeMirror2/3

Brackets

文章参考资料：



官方主页 ： http://docs.emmet.io/

Smashing Magazine 的一篇文章 ： http://coding.smashingmagazine.com/2013/03/26/goodbye-zen-coding-hello-emmet/ (图片来源)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航