导航
导航
文章目录󰁋
  1. 基本语法
  2. HTML
  3. CSS
    1. visual formating
    2. Margin & Padding
    3. Font
    4. Background
    5. Color
    6. 其他

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;
  • t

    top:;
  • b:a

    bottom:auto;
  • l

    left:;
  • l:a

    left:auto;
  • z

    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;
  • d

    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;
  • v

    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;
  • pt

    padding-top:;
  • pr

    padding-right:;
  • pb

    padding-bottom:;
  • pl

    padding-left:;

Font

  • fw

    font-weight:;
  • fw:n

    font-weight:normal;
  • fw:b

    font-weight:bold;
  • fw:br

    font-weight:bolder;
  • fw:lr

    font-weight:lighter;
  • fs

    font-style:${italic};
  • fs:n

    font-style:normal;
  • fz

    font-size:;
  • ff

    font-family:;
  • ff:s

    font-family:serif;
  • ff:ss

    font-family:sans-serif;
  • ff:m

    font-family:monospace;
  • ff:a

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  • ff:t

    font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
  • ff:v

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

Background

  • bg

    background:#000;
  • bg+

    background:#fff url() 0 0 no-repeat;
  • bg:n

    background:none;
  • bgc

    background-color:#fff;
  • bgc:t

    background-color:transparent;
  • bgi

    background-image:url();
  • bgi:n

    background-image:none;
  • bgr

    background-repeat:;
  • bgr:n

    background-repeat:no-repeat;
  • bgr:x

    background-repeat:repeat-x;
  • bgr:y

    background-repeat:repeat-y;
  • bgr:sp

    background-repeat:space;
  • bgr:rd

    background-repeat:round;
  • bga

    background-attachment:;
  • bga:f

    background-attachment:fixed;
  • bga:s

    background-attachment:scroll;
  • bgp

    background-position:0 0;
  • bgpx

    background-position-x:;
  • bgpy

    background-position-y:;
  • bgbk

    background-break:;
  • bgbk:bb

    background-break:bounding-box;
  • bgbk:eb

    background-break:each-box;
  • bgbk:c

    background-break:continuous;
  • bgcp

    background-clip:padding-box;
  • bgcp:bb

    background-clip:border-box;
  • bgcp:pb

    background-clip:padding-box;
  • bgcp:cb

    background-clip:content-box;
  • bgcp:nc

    background-clip:no-clip;
  • bgo

    background-origin:;
  • bgo:pb

    background-origin:padding-box;
  • bgo:bb

    background-origin:border-box;
  • bgo:cb

    background-origin:content-box;
  • bgsz

    background-size:;
  • bgsz:a

    background-size:auto;
  • bgsz:ct

    background-size:contain;
  • bgsz:cv

    background-size:cover;

Color


  • c

    color:#000;
  • c:r

    color:rgb(0, 0, 0);
  • c:ra

    color:rgba(0, 0, 0, .5);
  • op

    opacity:;

其他


  • ·@m·, @media·
@media screen {

}
  • @i, @import
@import url();
  • @kf
@keyframes identifier {
from { }
to { }
}
  • @f+
@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
font-face {
font-family:;
src:url(|);
}
  • !
!important
支持一下
扫一扫,支持poetries
  • 微信扫一扫
  • 支付宝扫一扫