Emmet插件比较实用常用的写法

看了一些关于Emmet插件写法的文档，港真，怎么可以写这么长啊。其实知道几个大概要点加上实践基本就能上手写了啊

杂话

我前面有一篇【今天发现新大陆：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>

div+div>p>span+em^^bq

div>div>
div>
    p>span>span>em>em>p>
div>
blockquote>blockquote>

ul>li*5(>为后代缩写,*表示有几个)

ul>
    li>li>
    li>li>
    li>li>
    li>li>
    li>li>
ul>

div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)

div>
    header>
        ul>
            li>a href="">a>li>
            li>a href="">a>li>
        ul>
    header>
    footer>
        p>p>
    footer>
div>

(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)

div>
    dl>
        dt>dt>
        dd>dd>
        dt>dt>
        dd>dd>
        dt>dt>
        dd>dd>
    dl>
div>
footer>
    p>p>
footer>

ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)

ul>
    li1 title="item1">hhh 1li1>
    li2 title="item2">hhh 2li2>
    li3 title="item3">hhh 3li3>
    li4 title="item4">hhh 4li4>
    li5 title="item5">hhh 5li5>
ul>

h.item${hhh $}*5({}括号内为显示文本)

h class="item1">hhh 1h>
h class="item2">hhh 2h>
h class="item3">hhh 3h>
h class="item4">hhh 4h>
h class="item5">hhh 5h>

ul>li.item$$$*5($为自增,三个$为三位数字)

ul>
    li class="item001">li>
    li class="item002">li>
    li class="item003">li>
    li class="item004">li>
    li class="item005">li>
ul>

ul>li.item$@3*5(@从3开始自增+1)

ul>
    li class="item3">li>
    li class="item4">li>
    li class="item5">li>
    li class="item6">li>
    li class="item7">li>
ul>

ul>li.item$@-*5(@-,自减)

ul>
    li class="item5">li>
    li class="item4">li>
    li class="item3">li>
    li class="item2">li>
    li class="item1">li>
ul>

ul>li.item$@-3*5(@-3,自减最小数字为3)

ul>
    li class="item7">li>
    li class="item6">li>
    li class="item5">li>
    li class="item4">li>
    li class="item3">li>
ul>

form#search.wide(#为id,.为类)

form action="" id="search" class="wide">form>

p[title='hello word'](自定义属性)

p title="hello word">p>

(隐式标签)
.class

div class="class">div>

em>.class

em>span class="class">span>em>

ul>.class

ul>
    li class="class">li>
ul>

table>.row>.col

table>
    tr class="row">
        td class="col">td>
    tr>
table>

!(页面html开始代码缩写)

doctype html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
head>
body>
    
body>
html>

(缩写)
a

a href="">a>

a:link

a href="http://">a>

hr

hr>

link

link rel="stylesheet" href="">

link.css

link rel="stylesheet" href="" class="css">

meta:utf

meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

script:src

script src="">script>

img

img src="" alt="">

官方api：http://docs.emmet.io/cheat-sheet/

api表：http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg

(●-●) 真心讨厌弄文本格式，感觉好浪费时间……