Emmet常用快捷键

# 基本语法

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>

@前端进阶之旅: 代码已经复制到剪贴板

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.item$*5

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

@前端进阶之旅: 代码已经复制到剪贴板

h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

@前端进阶之旅: 代码已经复制到剪贴板

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$@-*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

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

@前端进阶之旅: 代码已经复制到剪贴板

form#search.wide

<form id="search" class="wide"></form>

@前端进阶之旅: 代码已经复制到剪贴板

p.class1.class2.class3

<p class="class1 class2 class3"></p>

@前端进阶之旅: 代码已经复制到剪贴板

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

@前端进阶之旅: 代码已经复制到剪贴板

# HTML

!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

@前端进阶之旅: 代码已经复制到剪贴板

a:link

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

@前端进阶之旅: 代码已经复制到剪贴板

a:mail

<a href="mailto:"></a>

@前端进阶之旅: 代码已经复制到剪贴板

link:css

<link rel="stylesheet" href="style.css" />

@前端进阶之旅: 代码已经复制到剪贴板

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

@前端进阶之旅: 代码已经复制到剪贴板

link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

@前端进阶之旅: 代码已经复制到剪贴板

meta:utf

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

@前端进阶之旅: 代码已经复制到剪贴板

script:src

<script src=""></script>

@前端进阶之旅: 代码已经复制到剪贴板

form:get

<form action="" method="get"></form>

@前端进阶之旅: 代码已经复制到剪贴板

input:hidden, input:h

<input type="hidden" name="" />

@前端进阶之旅: 代码已经复制到剪贴板

input:text, input:t
input:password, input:p
input:checkbox, input:c
input:radio, input:r
input:file, input:f
input:submit, input:s
input:image, input:i
input:button, input:b

option, opt

<option value=""></option>

@前端进阶之旅: 代码已经复制到剪贴板

button:disabled, button:d, btn:d

<button disabled="disabled"></button>

@前端进阶之旅: 代码已经复制到剪贴板

ifr

<iframe src="" frameborder="0"></iframe>

@前端进阶之旅: 代码已经复制到剪贴板

btn

<button></button>

@前端进阶之旅: 代码已经复制到剪贴板

ul+

<ul>
    <li></li>
</ul>

@前端进阶之旅: 代码已经复制到剪贴板

dl+

<dl>
    <dt></dt>
    <dd></dd>
</dl>

@前端进阶之旅: 代码已经复制到剪贴板

table+

<table>
    <tr>
        <td></td>
    </tr>
</table>

@前端进阶之旅: 代码已经复制到剪贴板

tr+

<tr>
    <td></td>
</tr>

@前端进阶之旅: 代码已经复制到剪贴板

select+

<select name="" id="">
    <option value=""></option>
</select>

@前端进阶之旅: 代码已经复制到剪贴板

c

<!-- -->

@前端进阶之旅: 代码已经复制到剪贴板

cc:ie6

<!--[if lte IE 6]>
    ${child}
<![endif]-->

@前端进阶之旅: 代码已经复制到剪贴板

# CSS

# visual formating

pos:s

position:static;

@前端进阶之旅: 代码已经复制到剪贴板

pos:a

position:absolute;

@前端进阶之旅: 代码已经复制到剪贴板

pos:r

position:relative;

@前端进阶之旅: 代码已经复制到剪贴板

pos:f

position:fixed;

@前端进阶之旅: 代码已经复制到剪贴板

top:;

@前端进阶之旅: 代码已经复制到剪贴板

b:a

bottom:auto;

@前端进阶之旅: 代码已经复制到剪贴板

left:;

@前端进阶之旅: 代码已经复制到剪贴板

l:a

left:auto;

@前端进阶之旅: 代码已经复制到剪贴板

z-index:;

@前端进阶之旅: 代码已经复制到剪贴板

z:a

z-index:auto;

@前端进阶之旅: 代码已经复制到剪贴板

fl

float:left;

@前端进阶之旅: 代码已经复制到剪贴板

fl:n

float:none;

@前端进阶之旅: 代码已经复制到剪贴板

fl:l

float:left;

@前端进阶之旅: 代码已经复制到剪贴板

fl:r

float:right;

@前端进阶之旅: 代码已经复制到剪贴板

cl

clear:both;

@前端进阶之旅: 代码已经复制到剪贴板

cl:n

clear:none;

@前端进阶之旅: 代码已经复制到剪贴板

cl:l

clear:left;

@前端进阶之旅: 代码已经复制到剪贴板

cl:r

clear:right;

@前端进阶之旅: 代码已经复制到剪贴板

cl:b

clear:both;

@前端进阶之旅: 代码已经复制到剪贴板

display:block;

@前端进阶之旅: 代码已经复制到剪贴板

d:n

display:none;

@前端进阶之旅: 代码已经复制到剪贴板

d:b

display:block;

@前端进阶之旅: 代码已经复制到剪贴板

d:i

display:inline;

@前端进阶之旅: 代码已经复制到剪贴板

d:ib

display:inline-block;

@前端进阶之旅: 代码已经复制到剪贴板

d:itb

display:inline-table;

@前端进阶之旅: 代码已经复制到剪贴板

d:tbc

display:table-cell;

@前端进阶之旅: 代码已经复制到剪贴板

visibility:hidden;

@前端进阶之旅: 代码已经复制到剪贴板

v:v

visibility:visible;

@前端进阶之旅: 代码已经复制到剪贴板

v:h

visibility:hidden;

@前端进阶之旅: 代码已经复制到剪贴板

ov

overflow:hidden;

@前端进阶之旅: 代码已经复制到剪贴板

ov:v

overflow:visible;

@前端进阶之旅: 代码已经复制到剪贴板

ov:h

overflow:hidden;

@前端进阶之旅: 代码已经复制到剪贴板

ov:s

overflow:scroll;

@前端进阶之旅: 代码已经复制到剪贴板

zoo, zm

zoom:1;

@前端进阶之旅: 代码已经复制到剪贴板

cur:d

cursor:default;

@前端进阶之旅: 代码已经复制到剪贴板

cur:ha

cursor:hand;

@前端进阶之旅: 代码已经复制到剪贴板

cur:p

cursor:pointer;

@前端进阶之旅: 代码已经复制到剪贴板

# Margin & Padding

m:a

margin:auto;

@前端进阶之旅: 代码已经复制到剪贴板

mt

margin-top:;

@前端进阶之旅: 代码已经复制到剪贴板

mt:a

margin-top:auto;

@前端进阶之旅: 代码已经复制到剪贴板

mr

margin-right:;

@前端进阶之旅: 代码已经复制到剪贴板

mr:a

margin-right:auto;

@前端进阶之旅: 代码已经复制到剪贴板

mb

margin-bottom:;

@前端进阶之旅: 代码已经复制到剪贴板

mb:a

margin-bottom:auto;

@前端进阶之旅: 代码已经复制到剪贴板

ml

margin-left:;

@前端进阶之旅: 代码已经复制到剪贴板

ml:a

margin-left:auto;

@前端进阶之旅: 代码已经复制到剪贴板

# 基本语法

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>

@前端进阶之旅: 代码已经复制到剪贴板

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.item$*5

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

@前端进阶之旅: 代码已经复制到剪贴板

h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

@前端进阶之旅: 代码已经复制到剪贴板

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$@-*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

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

@前端进阶之旅: 代码已经复制到剪贴板

form#search.wide

<form id="search" class="wide"></form>

@前端进阶之旅: 代码已经复制到剪贴板

p.class1.class2.class3

<p class="class1 class2 class3"></p>

@前端进阶之旅: 代码已经复制到剪贴板

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

@前端进阶之旅: 代码已经复制到剪贴板

# HTML

!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

@前端进阶之旅: 代码已经复制到剪贴板

a:link

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

@前端进阶之旅: 代码已经复制到剪贴板

a:mail

<a href="mailto:"></a>

@前端进阶之旅: 代码已经复制到剪贴板

link:css

<link rel="stylesheet" href="style.css" />

@前端进阶之旅: 代码已经复制到剪贴板

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

@前端进阶之旅: 代码已经复制到剪贴板

link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

@前端进阶之旅: 代码已经复制到剪贴板

meta:utf

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

@前端进阶之旅: 代码已经复制到剪贴板

script:src

<script src=""></script>

@前端进阶之旅: 代码已经复制到剪贴板

form:get

<form action="" method="get"></form>

@前端进阶之旅: 代码已经复制到剪贴板

input:hidden, input:h

<input type="hidden" name="" />

@前端进阶之旅: 代码已经复制到剪贴板

input:text, input:t
input:password, input:p
input:checkbox, input:c
input:radio, input:r
input:file, input:f
input:submit, input:s
input:image, input:i
input:button, input:b

option, opt

<option value=""></option>

@前端进阶之旅: 代码已经复制到剪贴板

button:disabled, button:d, btn:d

<button disabled="disabled"></button>

@前端进阶之旅: 代码已经复制到剪贴板

ifr

<iframe src="" frameborder="0"></iframe>

@前端进阶之旅: 代码已经复制到剪贴板

btn

<button></button>

@前端进阶之旅: 代码已经复制到剪贴板

ul+

<ul>
    <li></li>
</ul>

@前端进阶之旅: 代码已经复制到剪贴板

dl+

<dl>
    <dt></dt>
    <dd></dd>
</dl>

@前端进阶之旅: 代码已经复制到剪贴板

table+

<table>
    <tr>
        <td></td>
    </tr>
</table>

@前端进阶之旅: 代码已经复制到剪贴板

tr+

<tr>
    <td></td>
</tr>

@前端进阶之旅: 代码已经复制到剪贴板

select+

<select name="" id="">
    <option value=""></option>
</select>

@前端进阶之旅: 代码已经复制到剪贴板

c

<!-- -->

@前端进阶之旅: 代码已经复制到剪贴板

cc:ie6

<!--[if lte IE 6]>
    ${child}
<![endif]-->

@前端进阶之旅: 代码已经复制到剪贴板

# CSS

# visual formating

pos:s

position:static;

@前端进阶之旅: 代码已经复制到剪贴板

pos:a

position:absolute;

@前端进阶之旅: 代码已经复制到剪贴板

pos:r

position:relative;

@前端进阶之旅: 代码已经复制到剪贴板

pos:f

position:fixed;

@前端进阶之旅: 代码已经复制到剪贴板

top:;

@前端进阶之旅: 代码已经复制到剪贴板

b:a

bottom:auto;

@前端进阶之旅: 代码已经复制到剪贴板

left:;

@前端进阶之旅: 代码已经复制到剪贴板

l:a

left:auto;

@前端进阶之旅: 代码已经复制到剪贴板

z-index:;

@前端进阶之旅: 代码已经复制到剪贴板

z:a

z-index:auto;

@前端进阶之旅: 代码已经复制到剪贴板

fl

float:left;

@前端进阶之旅: 代码已经复制到剪贴板

fl:n

float:none;

@前端进阶之旅: 代码已经复制到剪贴板

fl:l

float:left;

@前端进阶之旅: 代码已经复制到剪贴板

fl:r

float:right;

@前端进阶之旅: 代码已经复制到剪贴板

cl

clear:both;

@前端进阶之旅: 代码已经复制到剪贴板

cl:n

clear:none;

@前端进阶之旅: 代码已经复制到剪贴板

cl:l

clear:left;

@前端进阶之旅: 代码已经复制到剪贴板

cl:r

clear:right;

@前端进阶之旅: 代码已经复制到剪贴板

cl:b

clear:both;

@前端进阶之旅: 代码已经复制到剪贴板

display:block;

@前端进阶之旅: 代码已经复制到剪贴板

d:n

display:none;

@前端进阶之旅: 代码已经复制到剪贴板

d:b

display:block;

@前端进阶之旅: 代码已经复制到剪贴板

d:i

display:inline;

@前端进阶之旅: 代码已经复制到剪贴板

d:ib

display:inline-block;

@前端进阶之旅: 代码已经复制到剪贴板

d:itb

display:inline-table;

@前端进阶之旅: 代码已经复制到剪贴板

d:tbc

display:table-cell;

@前端进阶之旅: 代码已经复制到剪贴板

visibility:hidden;

@前端进阶之旅: 代码已经复制到剪贴板

v:v

visibility:visible;

@前端进阶之旅: 代码已经复制到剪贴板

v:h

visibility:hidden;

@前端进阶之旅: 代码已经复制到剪贴板

ov

overflow:hidden;

@前端进阶之旅: 代码已经复制到剪贴板

ov:v

overflow:visible;

@前端进阶之旅: 代码已经复制到剪贴板

ov:h

overflow:hidden;

@前端进阶之旅: 代码已经复制到剪贴板

ov:s

overflow:scroll;

@前端进阶之旅: 代码已经复制到剪贴板

zoo, zm

zoom:1;

@前端进阶之旅: 代码已经复制到剪贴板

cur:d

cursor:default;

@前端进阶之旅: 代码已经复制到剪贴板

cur:ha

cursor:hand;

@前端进阶之旅: 代码已经复制到剪贴板

cur:p

cursor:pointer;

@前端进阶之旅: 代码已经复制到剪贴板

# Margin & Padding

m:a

margin:auto;

@前端进阶之旅: 代码已经复制到剪贴板

mt

margin-top:;

@前端进阶之旅: 代码已经复制到剪贴板

mt:a

margin-top:auto;

@前端进阶之旅: 代码已经复制到剪贴板

mr

margin-right:;

@前端进阶之旅: 代码已经复制到剪贴板

mr:a

margin-right:auto;

@前端进阶之旅: 代码已经复制到剪贴板

mb

margin-bottom:;

@前端进阶之旅: 代码已经复制到剪贴板

mb:a

margin-bottom:auto;

@前端进阶之旅: 代码已经复制到剪贴板

ml

margin-left:;

@前端进阶之旅: 代码已经复制到剪贴板

ml:a

margin-left:auto;

@前端进阶之旅: 代码已经复制到剪贴板