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

关注作者公众号

和万千小伙伴一起学习

公众号：前端进价之旅

Emmet常用快捷键

2016.09.09 Poetry 工欲善其事必先利其器  热度 ℃   字数统计 1.4k字   阅读时长 8分

基本语法

  • 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
  • 微信扫一扫
  • 支付宝扫一扫