Emmet常用快捷键

Created at 2016-09-09 Updated at 2017-01-06 Category 工欲善其事必先利其器 Tag Emmet

基本语法

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

    1
    2
    3
    4
    5
    <div></div>
    <div>
        <p><span></span><em></em></p>
        <blockquote></blockquote>
    </div>

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

1
2
3
4
5
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
  • div>(header>ul>li*2>a)+footer>p
1
2
3
4
5
6
7
8
9
10
11
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>
  • ul>li.item$*5
1
2
3
4
5
6
7
<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
1
2
3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
  • ul>li.item$$$*5
1
2
3
4
5
6
7
<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
1
2
3
4
5
6
7
<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
1
2
3
4
5
6
7
<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
1
<form id="search" class="wide"></form>
  • p.class1.class2.class3
1
<p class="class1 class2 class3"></p>
  • td[rowspan=2 colspan=3 title]
1
<td rowspan="2" colspan="3" title=""></td>

HTML

  • !
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • a:link
1
<a href="http://"></a>
  • a:mail
1
<a href="mailto:"></a>
  • link:css
1
<link rel="stylesheet" href="style.css" />
  • link:favicon
1
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  • link:rss
1
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
  • meta:utf
1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  • script:src
1
<script src=""></script>
  • form:get
1
<form action="" method="get"></form>
  • input:hidden,input:h
1
<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
1
<option value=""></option>
  • button:disabled,button:d, btn:d
1
<button disabled="disabled"></button>
  • ifr
1
<iframe src="" frameborder="0"></iframe>
  • btn
1
<button></button>
  • ul+
1
2
3
<ul>
    <li></li>
</ul>
  • dl+
1
2
3
4
5
<dl>
    <dt></dt>
    <dd></dd>
</dl>
`
  • table+
1
2
3
4
5
<table>
    <tr>
        <td></td>
    </tr>
</table>
  • tr+
1
2
3
<tr>
    <td></td>
</tr>
  • select+
1
2
3
<select name="" id="">
    <option value=""></option>
</select>
  • c
1
<!-- -->
  • cc:ie6
1
2
3
<!--[if lte IE 6]>
    ${child}
<![endif]-->

CSS

visual formating

  • pos:s

    1
    position:static;

  • pos:a

    1
    position:absolute;

  • pos:r

    1
    position:relative;

  • pos:f

    1
    position:fixed;

  • t

    1
    top:;

  • b:a

    1
    bottom:auto;

  • l

    1
    left:;

  • l:a

    1
    left:auto;

  • z

    1
    z-index:;

  • z:a

    1
    z-index:auto;

  • fl

    1
    float:left;

  • fl:n

    1
    float:none;

  • fl:l

    1
    float:left;

  • fl:r

    1
    float:right;

  • cl

    1
    clear:both;

  • cl:n

    1
    clear:none;

  • cl:l

    1
    clear:left;

  • cl:r

    1
    clear:right;

  • cl:b

    1
    clear:both;

  • d

    1
    display:block;

  • d:n

    1
    display:none;

  • d:b

    1
    display:block;

  • d:i

    1
    display:inline;

  • d:ib

    1
    display:inline-block;

  • d:itb

    1
    display:inline-table;

  • d:tbc

    1
    display:table-cell;

  • v

    1
    visibility:hidden;

  • v:v

    1
    visibility:visible;

  • v:h

    1
    visibility:hidden;

  • ov

    1
    overflow:hidden;

  • ov:v

    1
    overflow:visible;

  • ov:h

    1
    overflow:hidden;

  • ov:s

    1
    overflow:scroll;

  • zoo, zm

    1
    zoom:1;

  • cur:d

    1
    cursor:default;

  • cur:ha

    1
    cursor:hand;

  • cur:p

    1
    cursor:pointer;

Margin & Padding

  • m:a

    1
    margin:auto;

  • mt

    1
    margin-top:;

  • mt:a

    1
    margin-top:auto;

  • mr

    1
    margin-right:;

  • mr:a

    1
    margin-right:auto;

  • mb

    1
    margin-bottom:;

  • mb:a

    1
    margin-bottom:auto;

  • ml

    1
    margin-left:;

  • ml:a

    1
    margin-left:auto;

  • pt

    1
    padding-top:;

  • pr

    1
    padding-right:;

  • pb

    1
    padding-bottom:;

  • pl

    1
    padding-left:;

Font

  • fw

    1
    font-weight:;

  • fw:n

    1
    font-weight:normal;

  • fw:b

    1
    font-weight:bold;

  • fw:br

    1
    font-weight:bolder;

  • fw:lr

    1
    font-weight:lighter;

  • fs

    1
    font-style:${italic};

  • fs:n

    1
    font-style:normal;

  • fz

    1
    font-size:;

  • ff

    1
    font-family:;

  • ff:s

    1
    font-family:serif;

  • ff:ss

    1
    font-family:sans-serif;

  • ff:m

    1
    font-family:monospace;

  • ff:a

    1
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

  • ff:t

    1
    font-family: "Times New Roman", Times, Baskerville, Georgia, serif;

  • ff:v

    1
    font-family: Verdana, Geneva, sans-serif;

Background

  • bg

    1
    background:#000;

  • bg+

    1
    background:#fff url() 0 0 no-repeat;

  • bg:n

    1
    background:none;

  • bgc

    1
    background-color:#fff;

  • bgc:t

    1
    background-color:transparent;

  • bgi

    1
    background-image:url();

  • bgi:n

    1
    background-image:none;

  • bgr

    1
    background-repeat:;

  • bgr:n

    1
    background-repeat:no-repeat;

  • bgr:x

    1
    background-repeat:repeat-x;

  • bgr:y

    1
    background-repeat:repeat-y;

  • bgr:sp

    1
    background-repeat:space;

  • bgr:rd

    1
    background-repeat:round;

  • bga

    1
    background-attachment:;

  • bga:f

    1
    background-attachment:fixed;

  • bga:s

    1
    background-attachment:scroll;

  • bgp

    1
    background-position:0 0;

  • bgpx

    1
    background-position-x:;

  • bgpy

    1
    background-position-y:;

  • bgbk

    1
    background-break:;

  • bgbk:bb

    1
    background-break:bounding-box;

  • bgbk:eb

    1
    background-break:each-box;

  • bgbk:c

    1
    background-break:continuous;

  • bgcp

    1
    background-clip:padding-box;

  • bgcp:bb

    1
    background-clip:border-box;

  • bgcp:pb

    1
    background-clip:padding-box;

  • bgcp:cb

    1
    background-clip:content-box;

  • bgcp:nc

    1
    background-clip:no-clip;

  • bgo

    1
    background-origin:;

  • bgo:pb

    1
    background-origin:padding-box;

  • bgo:bb

    1
    background-origin:border-box;

  • bgo:cb

    1
    background-origin:content-box;

  • bgsz

    1
    background-size:;

  • bgsz:a

    1
    background-size:auto;

  • bgsz:ct

    1
    background-size:contain;

  • bgsz:cv

    1
    background-size:cover;

Color

  • c

    1
    color:#000;

  • c:r

    1
    color:rgb(0, 0, 0);

  • c:ra

    1
    color:rgba(0, 0, 0, .5);

  • op

    1
    opacity:;

其他

  • ·@m·, @media·
1
2
3
@media screen {
    
}
  • @i, @import
1
@import url();
  • @kf
1
2
3
4
@keyframes identifier {
    from {  }
    to {  }
}
  • @f+
1
2
3
4
5
6
7
8
9
10
@font-face {
    font-family: 'FontName';
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'),
         url('FileName.woff') format('woff'),
         url('FileName.ttf') format('truetype'),
         url('FileName.svg#FontName') format('svg');
    font-style: normal;
    font-weight: normal;
}
  • @f
1
2
3
4
font-face {
    font-family:;
    src:url(|);
}
  • !
1
!important

Table of Content

  1. 基本语法
  2. HTML
  3. CSS
    1. visual formating
    2. Margin & Padding
    3. Font
    4. Background
    5. Color
    6. 其他
Site by Poetry using Hexo & Random
© 2015 - 2017

技术改变生活

Hide