杂话
我前面有一篇【今天发现新大陆:haml和Emmet 】,其实一开始的想法是写给自己看的。
有人去阅读我的博客和评论,虽然不算多,但是对于我这种刚入门的小白渣渣还是受宠若惊的。我这大喜的蠢样子也是经常被男票说四不四傻……ㄟ(⊙ω⊙ㄟ)
嗯,跑偏了。总之,以后写东西不管是给自己看也好,给别人看都好 。秉持着分享的精神一定认真好好的写(~Q~)
关于Emmet
Emmet插件的前身是Zen coding,可以大幅度提高前端开发效率的一个工具,也有人说类似于jade(高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用)。再官方一些的官方语言的叽叽喳喳我就不详写了,直接百度可以找到。
Emmet支持的编辑器 :
Sublime Text 2 TextMate 1.x Eclipse/Aptana Coda 1.6 and 2.x Espresso Chocolat (通过[Install Mixin]对话框添加) Komodo Edit/IDE (通过Tools → Add-ons菜单添加) Notepad++ PSPad CodeMirror2/3 Brackets
第三方插件的支持
下面这些编辑器的插件都是由第三方开发者所提供的,所以可能并不支持所有Emmet的功能和特性。
SynWrite WebStorm PhpStorm Vim HTML-Kit HippoEDIT CodeLobster PHP Edition TinyMCE
Emmet安装方法(Sublime text 3安装emmet插件的方法:http://blog.csdn.net/mengke1124/article/details/41696779)
因为我用的是Sublime text 3,其他编辑器安装的方法可能要根据自己的需要在网上搜刮了
Emmet插件实用常用方法
(http://www.w3cplus.com/tools/emmet-cheat-sheet.html)
这篇文档写的很清晰,也有安装插件的方法。但是介绍的方法太多,感觉有点冗长,我汇总了一些我个人觉得比较实用常用的方法。
略写版 :
div>(header>ul>li*2>a)+footer>p (+号连接下一个兄弟元素)
(div>dl>(dt+dd)*3)+footer>p (括号内为一个组)
ul>li$[title=item$]{hhh $}*5 (li$,表示li自增+1)
h.item${hhh $}*5 ({}括号内为显示文本)
ul>li.item$$$*5 ($为自增,三个$为三位数字)
ul>li.item$@3*5 (@从3开始自增+1)
ul>li.item$@-*5 (@-,自减)
ul>li.item$@-3*5 (@-3,自减最小数字为3)
form#search.wide (#为id,.为类)
p[title='hello word'] (自定义属性)
(隐式标签)
.class
em>.class
ul>.class
table>.row>.col
!(页面html开始代码缩写)
(缩写)
a
a:link
hr
link
link.css
meta:utf
script:src
img
详写版 :
div+div>p>span+em^bq(^为上级元素)
div > div > div > p > span > span > em > em > p > blockquote > blockquote > div >
查看更多关于Emmet插件比较实用常用的写法的详细内容...