Emmet 备忘清单 | 竹山一叶

Emmet 是一个用于提升 HTML 和 CSS 代码编写的 Web 开发人员工具包，它允许您使用著名的 CSS 选择器以光速编写大型 HTML 代码块。

Emmet 语法

入门

让我们开始将您的开发提高到光速。

Visual Studio 代码中的 Emmet (code.visualstudio.com)
Sublime Text 的 Emmet 2 (github.com)
Emmet for Coda (emmet.io)
Emmet for Atom (github.com)

乘法：*

ul>li*5

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

孩子: >

nav>ul>li

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

自定义属性

p[title="Hello world"]

1	<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

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

[a='value1' b="value2"]

1	<div a="value1" b="value2"></div>

文本: {}

a{Click me}

1	<a href="">Click me</a>

p>{Click }+a{here}+{ 继续}

1	<p>Click <a href="">here</a> 继续</p>

ID 和 CLASS 属性

# header

1	<div id="header"></div>

.title

1	<div class="title"></div>

form#search.wide

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

p.class1.class2.class3

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

隐式标签名称

.class

1	<div class="class"></div>

em>.class

1	<em><span class="class"></span></em>

ul>.class

1
2
3

<ul>
    <li class="class"></li>
</ul>

table>.row>.col

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

兄弟: +

div+p+bq

1
2
3

<div></div>
<p></p>
<blockquote></blockquote>

$

ul>li.item$*3

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></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$$$*3

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

ul>li.item$@-*3

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

ul>li.item$@2*3

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

上一层: ^

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)*4)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

HTML

HTML 1

! 或者 html:5

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

1	<a href=""></a>

a:link

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

a:mail

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

abbr

1	<abbr title=""></abbr>

acronym, acr

1	<acronym title=""></acronym>

base

1	<base href="" />

basefont

1	<basefont />

<br />

frame

<frame />

<hr />

bdo

1	<bdo dir=""></bdo>

bdo:r

1	<bdo dir="rtl"></bdo>

bdo:l

1	<bdo dir="ltr"></bdo>

col

<col />

link

1	<link rel="stylesheet" href="" />

link:css

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

link:print

1	<link rel="stylesheet" href="print.css" media="print" />

link:favicon

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

link:touch

1	<link rel="apple-touch-icon" href="favicon.png" />

link:rss

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

link:atom

1	<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

link:import, link:im

1	<link rel="import" href="component.html" />

HTML 2

input:url 别名 inp[type=url]

1	<input type="url" name="" id="" />

input:password, input:p 别名 inp[type=password]

1	<input type="password" name="" id="" />

input:datetime 别名 inp[type=datetime]

1	<input type="datetime" name="" id="" />

input:date 别名 inp[type=date]

1	<input type="date" name="" id="" />

input:datetime-local 别名 inp[type=datetime-local]

1	<input type="datetime-local" name="" id="" />

input:month 别名 inp[type=month]

1	<input type="month" name="" id="" />

input:week 别名 inp[type=week]

1	<input type="week" name="" id="" />

input:time 别名 inp[type=time]

1	<input type="time" name="" id="" />

input:tel 别名 inp[type=tel]

1	<input type="tel" name="" id="" />

input:number 别名 inp[type=number]

1	<input type="number" name="" id="" />

input:color 别名 inp[type=color]

1	<input type="color" name="" id="" />

input:checkbox, input:c 别名 inp[type=checkbox]

1	<input type="checkbox" name="" id="" />

input:radio, input:r 别名 inp[type=radio]

1	<input type="radio" name="" id="" />

input:range 别名 inp[type=range]

1	<input type="range" name="" id="" />

input:file, input:f 别名 inp[type=file]

1	<input type="file" name="" id="" />

input:submit, input:s

1	<input type="submit" value="" />

input:image, input:i

1	<input type="image" src="" alt="" />

input:button, input:b

1	<input type="button" value="" />

isindex

1	<isindex />

input:reset 别名 input:button[type=reset]

1	<input type="reset" value="" />

select

1	<select name="" id=""></select>

select:disabled, select:d 别名 select[disabled.]

1	<select name="" id="" disabled="disabled"></select>

option, opt

1	<option value=""></option>

textarea

1	<textarea name="" id="" cols="30" rows="10"></textarea>

marquee

1	<marquee behavior="" direction=""></marquee>

menu:context, menu:c 别名 menu[type=context]>

1	<menu type="context"></menu>

menu:toolbar, menu:t 别名 menu[type=toolbar]>

1	<menu type="toolbar"></menu>

video

1	<video src=""></video>

audio

1	<audio src=""></audio>

html:xml

1	<html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

1	<keygen />

command

1	<command />

button:submit, button:s, btn:s 别名 button[type=submit]

1	<button type="submit"></button>

button:reset, button:r, btn:r 别名 button[type=reset]

1	<button type="reset"></button>

button:disabled, button:d, btn:d 别名 button[disabled.]

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

fieldset:disabled, fieldset:d, fset:d, fst:d 别名 fieldset[disabled.]

1	<fieldset disabled="disabled"></fieldset>

bq 别名 blockquote

1	<blockquote></blockquote>

fig 别名 figure

1	<figure></figure>

figc 别名 figcaption

1	<figcaption></figcaption>

pic 别名 picture

1	<picture></picture>

ifr 别名 iframe

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

emb 别名 embed

1	<embed src="" type="" />

obj 别名 object

1	<object data="" type=""></object>

cap 别名 caption

1	<caption></caption>

colg 别名 colgroup

1	<colgroup></colgroup>

fst, fset 别名 fieldset

1	<fieldset></fieldset>

btn 别名 button

1	<button></button>

optg 别名 optgroup

1	<optgroup></optgroup>

tarea 别名 textarea

1	<textarea name="" id="" cols="30" rows="10"></textarea>

leg 别名 legend

1	<legend></legend>

sect 别名 section

1	<section></section>

art 别名 article

1	<article></article>

hdr 别名 header

1	<header></header>

ftr 别名 footer

1	<footer></footer>

adr 别名 address

1	<address></address>

dlg 别名 dialog

1	<dialog></dialog>

str 别名 strong

1	<strong></strong>

prog 别名 progress

1	<progress></progress>

mn 别名 main

1	<main></main>

tem 别名 template

1	<template></template>

datag 别名 datagrid

1	<datagrid></datagrid>

datal 别名 datalist

1	<datalist></datalist>

kg 别名 keygen

1	<keygen />

out 别名 output

1	<output></output>

det 别名 details

1	<details></details>

HTML 3

cmd
Alias of command

1	<command />

doc 别名 html>(head>meta[charset=${charset}]+title{${1:Document}})+body

<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

doc4 别名 html>(head>meta[http-equiv=”Content-Type” content=”text/html;charset=${charset}”]+title{${1:Document}})+body

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

ri:dpr, ri:d 别名 img:s

1	<img srcset="" src="" alt="" />

ri:viewport, ri:v 别名 img:z

1	<img sizes="" srcset="" src="" alt="" />

ri:art, ri:a 别名 pic>src:m+img

<picture>
    <source media="(min-width: )" srcset="" />
    <img src="" alt="" />
</picture>

ri:type, ri:t 别名 pic>src:t+img

<picture>
    <source srcset="" type="image/" />
    <img src="" alt="" />
</picture>

html:4t 别名 !!!4t+doc4[lang=${lang}]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:4s 别名 !!!4s+doc4[lang=${lang}]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:xt 别名 !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:xs 别名 !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:xxs 别名 !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:5 别名 !!!+doc[lang=${lang}]

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

ol+ 别名 ol>li

1
2
3

<ol>
    <li></li>
</ol>

ul+ 别名 ul>li

1
2
3

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

dl+ 别名 dl>dt+dd

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

map+ 别名 map>area

1
2
3

<map name="">
    <area shape="" coords="" href="" alt="" />
</map>

table+ 别名 table>tr>td

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

colgroup+, colg+ 别名 colgroup>col

1
2
3

<colgroup>
    <col />
</colgroup>

tr+ 别名 tr>td

1
2
3

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

select+ 别名 select>option

1
2
3

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

optgroup+, optg+ 别名 optgroup>option

1
2
3

<optgroup>
    <option value=""></option>
</optgroup>

pic+ 别名 picture>source:srcset+img

<picture>
    <source srcset="" />
    <img src="" alt="" />
</picture>

!!!

1	<!DOCTYPE html>

!!!4t

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

1	<!-- ${child} -->

cc:ie6

1
2
3

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

cc:ie

1
2
3

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

cc:noie

1
2
3

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

CSS

视觉格式

:-	:-
`pos`	position:relative;
`pos:s`	position:static;
`pos:a`	position:absolute;
`pos:r`	position:relative;
`pos:f`	position:fixed;
`t`	top:;
`t:a`	top:auto;
`r`	right:;
`r:a`	right:auto;
`b`	bottom:;
`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:f`	display:flex;
`d:if`	display:inline-flex;
`d:i`	display:inline;
`d:ib`	display:inline-block;
`d:li`	display:list-item;
`d:ri`	display:run-in;
`d:cp`	display:compact;
`d:tb`	display:table;
`d:itb`	display:inline-table;
`d:tbcp`	display:table-caption;
`d:tbcl`	display:table-column;
`d:tbclg`	display:table-column-group;
`d:tbhg`	display:table-header-group;
`d:tbfg`	display:table-footer-group;
`d:tbr`	display:table-row;
`d:tbrg`	display:table-row-group;
`d:tbc`	display:table-cell;
`d:rb`	display:ruby;
`d:rbb`	display:ruby-base;
`d:rbbg`	display:ruby-base-group;
`d:rbt`	display:ruby-text;
`d:rbtg`	display:ruby-text-group;
`v`	visibility:hidden;
`v:v`	visibility:visible;
`v:h`	visibility:hidden;
`v:c`	visibility:collapse;
`ov`	overflow:hidden;
`ov:v`	overflow:visible;
`ov:h`	overflow:hidden;
`ov:s`	overflow:scroll;
`ov:a`	overflow:auto;
`ovx`	overflow-x:hidden;
`ovx:v`	overflow-x:visible;
`ovx:h`	overflow-x:hidden;
`ovx:s`	overflow-x:scroll;
`ovx:a`	overflow-x:auto;
`ovy`	overflow-y:hidden;
`ovy:v`	overflow-y:visible;
`ovy:h`	overflow-y:hidden;
`ovy:s`	overflow-y:scroll;
`ovy:a`	overflow-y:auto;
`ovs`	overflow-style:scrollbar;
`ovs:a`	overflow-style:auto;
`ovs:s`	overflow-style:scrollbar;
`ovs:p`	overflow-style:panner;
`ovs:m`	overflow-style:move;
`ovs:mq`	overflow-style:marquee;
`zoo, zm`	zoom:1;
`cp`	clip:;
`cp:a`	clip:auto;
`cp:r`	clip:rect(top right bottom left);
`rsz`	resize:;
`rsz:n`	resize:none;
`rsz:b`	resize:both;
`rsz:h`	resize:horizontal;
`rsz:v`	resize:vertical;
`cur`	cursor:${pointer};
`cur:a`	cursor:auto;
`cur:d`	cursor:default;
`cur:c`	cursor:crosshair;
`cur:ha`	cursor:hand;
`cur:he`	cursor:help;
`cur:m`	cursor:move;
`cur:p`	cursor:pointer;
`cur:t`	cursor:text;

边距和填充

:-	:-
`m`	margin:;
`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;
`p`	padding:;
`pt`	padding-top:;
`pr`	padding-right:;
`pb`	padding-bottom:;
`pl`	padding-left:;

盒子尺寸

:-	:-
`bxz`	box-sizing:border-box;
`bxz:cb`	box-sizing:content-box;
`bxz:bb`	box-sizing:border-box;
`bxsh`	box-shadow:inset hoff voff blur color;
`bxsh:r`	box-shadow:inset hoff voff blur spread rgb(0, 0, 0);
`bxsh:ra`	box-shadow:inset h v blur spread rgba(0, 0, 0, .5);
`bxsh:n`	box-shadow:none;
`w`	width:;
`w:a`	width:auto;
`h`	height:;
`h:a`	height:auto;
`maw`	max-width:;
`maw:n`	max-width:none;
`mah`	max-height:;
`mah:n`	max-height:none;
`miw`	min-width:;
`mih`	min-height:;

字体

:-	:-
`f`	font:;
`f+`	font:1em Arial,sans-serif;
`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;
`fs:i`	font-style:italic;
`fs:o`	font-style:oblique;
`fv`	font-variant:;
`fv:n`	font-variant:normal;
`fv:sc`	font-variant:small-caps;
`fz`	font-size:;
`fza`	font-size-adjust:;
`fza:n`	font-size-adjust:none;
`ff`	font-family:;
`ff:s`	font-family:serif;
`ff:ss`	font-family:sans-serif;
`ff:c`	font-family:cursive;
`ff:f`	font-family:fantasy;
`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;
`fef`	font-effect:;
`fef:n`	font-effect:none;
`fef:eg`	font-effect:engrave;
`fef:eb`	font-effect:emboss;
`fef:o`	font-effect:outline;
`fem`	font-emphasize:;
`femp`	font-emphasize-position:;
`femp:b`	font-emphasize-position:before;
`femp:a`	font-emphasize-position:after;
`fems`	font-emphasize-style:;
`fems:n`	font-emphasize-style:none;
`fems:ac`	font-emphasize-style:accent;
`fems:dt`	font-emphasize-style:dot;
`fems:c`	font-emphasize-style:circle;
`fems:ds`	font-emphasize-style:disc;
`fsm`	font-smooth:;
`fsm:a`	font-smooth:auto;
`fsm:n`	font-smooth:never;
`fsm:aw`	font-smooth:always;
`fst`	font-stretch:;
`fst:n`	font-stretch:normal;
`fst:uc`	font-stretch:ultra-condensed;
`fst:ec`	font-stretch:extra-condensed;
`fst:c`	font-stretch:condensed;
`fst:sc`	font-stretch:semi-condensed;
`fst:se`	font-stretch:semi-expanded;
`fst:e`	font-stretch:expanded;
`fst:ee`	font-stretch:extra-expanded;
`fst:ue`	font-stretch:ultra-expanded;

背景

:-	:-
`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;

Lists

:-	:-
`lis`	list-style:;
`lis:n`	list-style:none;
`lisp`	list-style-position:;
`lisp:i`	list-style-position:inside;
`lisp:o`	list-style-position:outside;
`list`	list-style-type:;
`list:n`	list-style-type:none;
`list:d`	list-style-type:disc;
`list:c`	list-style-type:circle;
`list:s`	list-style-type:square;
`list:dc`	list-style-type:decimal;
`list:dclz`	list-style-type:decimal-leading-zero;
`list:lr`	list-style-type:lower-roman;
`list:ur`	list-style-type:upper-roman;
`lisi`	list-style-image:;
`lisi:n`	list-style-image:none;

Tables

:-	:-
`tbl`	table-layout:;
`tbl:a`	table-layout:auto;
`tbl:f`	table-layout:fixed;
`cps`	caption-side:;
`cps:t`	caption-side:top;
`cps:b`	caption-side:bottom;
`ec`	empty-cells:;
`ec:s`	empty-cells:show;
`ec:h`	empty-cells:hide;

颜色

:-	:-
`c`	color:#000;
`c:r`	color:rgb(0, 0, 0);
`c:ra`	color:rgba(0, 0, 0, .5);
`op`	opacity:;

文本

:-	:-
`va`	vertical-align:top;
`va:sup`	vertical-align:super;
`va:t`	vertical-align:top;
`va:tt`	vertical-align:text-top;
`va:m`	vertical-align:middle;
`va:bl`	vertical-align:baseline;
`va:b`	vertical-align:bottom;
`va:tb`	vertical-align:text-bottom;
`va:sub`	vertical-align:sub;
`ta`	text-align:left;
`ta:l`	text-align:left;
`ta:c`	text-align:center;
`ta:r`	text-align:right;
`ta:j`	text-align:justify;
`ta-lst`	text-align-last:;
`tal:a`	text-align-last:auto;
`tal:l`	text-align-last:left;
`tal:c`	text-align-last:center;
`tal:r`	text-align-last:right;
`td`	text-decoration:none;
`td:n`	text-decoration:none;
`td:u`	text-decoration:underline;
`td:o`	text-decoration:overline;
`td:l`	text-decoration:line-through;
`te`	text-emphasis:;
`te:n`	text-emphasis:none;
`te:ac`	text-emphasis:accent;
`te:dt`	text-emphasis:dot;
`te:c`	text-emphasis:circle;
`te:ds`	text-emphasis:disc;
`te:b`	text-emphasis:before;
`te:a`	text-emphasis:after;
`th`	text-height:;
`th:a`	text-height:auto;
`th:f`	text-height:font-size;
`th:t`	text-height:text-size;
`th:m`	text-height:max-size;
`ti`	text-indent:;
`ti:-`	text-indent:-9999px;
`tj`	text-justify:;
`tj:a`	text-justify:auto;
`tj:iw`	text-justify:inter-word;
`tj:ii`	text-justify:inter-ideograph;
`tj:ic`	text-justify:inter-cluster;
`tj:d`	text-justify:distribute;
`tj:k`	text-justify:kashida;
`tj:t`	text-justify:tibetan;
`to`	text-outline:;
`to+`	text-outline:0 0 #000;
`to:n`	text-outline:none;
`tr`	text-replace:;
`tr:n`	text-replace:none;
`tt`	text-transform:uppercase;
`tt:n`	text-transform:none;
`tt:c`	text-transform:capitalize;
`tt:u`	text-transform:uppercase;
`tt:l`	text-transform:lowercase;
`tw`	text-wrap:;
`tw:n`	text-wrap:normal;
`tw:no`	text-wrap:none;
`tw:u`	text-wrap:unrestricted;
`tw:s`	text-wrap:suppress;
`tsh`	text-shadow:hoff voff blur #000;
`tsh:r`	text-shadow:h v blur rgb(0, 0, 0);
`tsh:ra`	text-shadow:h v blur rgba(0, 0, 0, .5);
`tsh+`	text-shadow:0 0 0 #000;
`tsh:n`	text-shadow:none;
`lh`	line-height:;
`lts`	letter-spacing:;
`lts-n`	letter-spacing:normal;
`whs`	white-space:;
`whs:n`	white-space:normal;
`whs:p`	white-space:pre;
`whs:nw`	white-space:nowrap;
`whs:pw`	white-space:pre-wrap;
`whs:pl`	white-space:pre-line;
`whsc`	white-space-collapse:;
`whsc:n`	white-space-collapse:normal;
`whsc:k`	white-space-collapse:keep-all;
`whsc:l`	white-space-collapse:loose;
`whsc:bs`	white-space-collapse:break-strict;
`whsc:ba`	white-space-collapse:break-all;
`wob`	word-break:;
`wob:n`	word-break:normal;
`wob:k`	word-break:keep-all;
`wob:ba`	word-break:break-all;
`wos`	word-spacing:;
`wow`	word-wrap:;
`wow:nm`	word-wrap:normal;
`wow:n`	word-wrap:none;
`wow:u`	word-wrap:unrestricted;
`wow:s`	word-wrap:suppress;
`wow:b`	word-wrap:break-word;

Border

:-	:-
`bd`	border:;
`bd+`	border:1px solid #000;
`bd:n`	border:none;
`bdbk`	border-break:close;
`bdbk:c`	border-break:close;
`bdcl`	border-collapse:;
`bdcl:c`	border-collapse:collapse;
`bdcl:s`	border-collapse:separate;
`bdc`	border-color:#000;
`bdc:t`	border-color:transparent;
`bdi`	border-image:url();
`bdi:n`	border-image:none;
`bdti`	border-top-image:url();
`bdti:n`	border-top-image:none;
`bdri`	border-right-image:url();
`bdri:n`	border-right-image:none;
`bdbi`	border-bottom-image:url();
`bdbi:n`	border-bottom-image:none;
`bdli`	border-left-image:url();
`bdli:n`	border-left-image:none;
`bdci`	border-corner-image:url();
`bdci:n`	border-corner-image:none;
`bdci:c`	border-corner-image:continue;
`bdtli`	border-top-left-image:url();
`bdtli:n`	border-top-left-image:none;
`bdtli:c`	border-top-left-image:continue;
`bdtri`	border-top-right-image:url();
`bdtri:n`	border-top-right-image:none;
`bdtri:c`	border-top-right-image:continue;
`bdbri`	border-bottom-right-image:url();
`bdbri:n`	border-bottom-right-image:none;
`bdbri:c`	border-bottom-right-image:continue;
`bdbli`	border-bottom-left-image:url();
`bdbli:n`	border-bottom-left-image:none;
`bdbli:c`	border-bottom-left-image:continue;
`bdf`	border-fit:repeat;
`bdf:c`	border-fit:clip;
`bdf:r`	border-fit:repeat;
`bdf:sc`	border-fit:scale;
`bdf:st`	border-fit:stretch;
`bdf:ow`	border-fit:overwrite;
`bdf:of`	border-fit:overflow;
`bdf:sp`	border-fit:space;
`bdlen`	border-length:;
`bdlen:a`	border-length:auto;
`bdsp`	border-spacing:;
`bds`	border-style:;
`bds:n`	border-style:none;
`bds:h`	border-style:hidden;
`bds:dt`	border-style:dotted;
`bds:ds`	border-style:dashed;
`bds:s`	border-style:solid;
`bds:db`	border-style:double;
`bds:dtds`	border-style:dot-dash;
`bds:dtdtds`	border-style:dot-dot-dash;
`bds:w`	border-style:wave;
`bds:g`	border-style:groove;
`bds:r`	border-style:ridge;
`bds:i`	border-style:inset;
`bds:o`	border-style:outset;
`bdw`	border-width:;
`bdt, bt`	border-top:;
`bdt+`	border-top:1px solid #000;
`bdt:n`	border-top:none;
`bdtw`	border-top-width:;
`bdts`	border-top-style:;
`bdts:n`	border-top-style:none;
`bdtc`	border-top-color:#000;
`bdtc:t`	border-top-color:transparent;
`bdr, br`	border-right:;
`bdr+`	border-right:1px solid #000;
`bdr:n`	border-right:none;
`bdrw`	border-right-width:;
`bdrst`	border-right-style:;
`bdrst:n`	border-right-style:none;
`bdrc`	border-right-color:#000;
`bdrc:t`	border-right-color:transparent;
`bdb, bb`	border-bottom:;
`bdb+`	border-bottom:1px solid #000;
`bdb:n`	border-bottom:none;
`bdbw`	border-bottom-width:;
`bdbs`	border-bottom-style:;
`bdbs:n`	border-bottom-style:none;
`bdbc`	border-bottom-color:#000;
`bdbc:t`	border-bottom-color:transparent;
`bdl, bl`	border-left:;
`bdl+`	border-left:1px solid #000;
`bdl:n`	border-left:none;
`bdlw`	border-left-width:;
`bdls`	border-left-style:;
`bdls:n`	border-left-style:none;
`bdlc`	border-left-color:#000;
`bdlc:t`	border-left-color:transparent;
`bdrs`	border-radius:;
`bdtrrs`	border-top-right-radius:;
`bdtlrs`	border-top-left-radius:;
`bdbrrs`	border-bottom-right-radius:;
`bdblrs`	border-bottom-left-radius:;

生成的内容

:-	:-
`cnt`	content:’’;
`cnt:n, ct:n`	content:normal;
`cnt:oq, ct:oq`	content:open-quote;
`cnt:noq, ct:noq`	content:no-open-quote;
`cnt:cq, ct:cq`	content:close-quote;
`cnt:ncq, ct:ncq`	content:no-close-quote;
`cnt:a, ct:a`	content:attr();
`cnt:c, ct:c`	content:counter();
`cnt:cs, ct:cs`	content:counters();
`ct`	content:;
`q`	quotes:;
`q:n`	quotes:none;
`q:ru`	quotes:’\00AB’ ‘\00BB’ ‘\201E’ ‘\201C’;
`q:en`	quotes:’\201C’ ‘\201D’ ‘\2018’ ‘\2019’;
`coi`	counter-increment:;
`cor`	counter-reset:;

Outline

:-	:-
`ol`	outline:;
`ol:n`	outline:none;
`olo`	outline-offset:;
`olw`	outline-width:;
`olw:tn`	outline-width:thin;
`olw:m`	outline-width:medium;
`olw:tc`	outline-width:thick;
`ols`	outline-style:;
`ols:n`	outline-style:none;
`ols:dt`	outline-style:dotted;
`ols:ds`	outline-style:dashed;
`ols:s`	outline-style:solid;
`ols:db`	outline-style:double;
`ols:g`	outline-style:groove;
`ols:r`	outline-style:ridge;
`ols:i`	outline-style:inset;
`ols:o`	outline-style:outset;
`olc`	outline-color:#000;
`olc:i`	outline-color:invert;

Print

:-	:-
`pgbb`	page-break-before:;
`pgbb:au`	page-break-before:auto;
`pgbb:al`	page-break-before:always;
`pgbb:l`	page-break-before:left;
`pgbb:r`	page-break-before:right;
`pgbi`	page-break-inside:;
`pgbi:au`	page-break-inside:auto;
`pgbi:av`	page-break-inside:avoid;
`pgba`	page-break-after:;
`pgba:au`	page-break-after:auto;
`pgba:al`	page-break-after:always;
`pgba:l`	page-break-after:left;
`pgba:r`	page-break-after:right;
`orp`	orphans:;
`wid`	widows:;

Others

:-	:-
`!`	!important

@f

@font-face {
    font-family:;
    src:url(|);
}

@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;
}

@i, @import

1	@import url();

@kf

@-webkit-keyframes identifier {
    from {  }
    to {  }
}
@-o-keyframes identifier {
    from {  }
    to {  }
}
@-moz-keyframes identifier {
    from {  }
    to {  }
}
@keyframes identifier {
    from {  }
    to {  }
}

@m, @media

1
2
3

@media screen {
    
}

transform

:-	:-
`trf`	transform:;
`trf:r`	transform: rotate(angle);
`trf:rx`	transform: rotateX(angle);
`trf:ry`	transform: rotateY(angle);
`trf:rz`	transform: rotateZ(angle);
`trf:sc`	transform: scale(x, y);
`trf:sc3`	transform: scale3d(x, y, z);
`trf:scx`	transform: scaleX(x);
`trf:scy`	transform: scaleY(y);
`trf:scz`	transform: scaleZ(z);
`trf:skx`	transform: skewX(angle);
`trf:sky`	transform: skewY(angle);
`trf:t`	transform: translate(x, y);
`trf:t3`	transform: translate3d(tx, ty, tz);
`trf:tx`	transform: translateX(x);
`trf:ty`	transform: translateY(y);
`trf:tz`	transform: translateZ(z);
`trfo`	transform-origin:;
`trfs`	transform-style:preserve-3d;

Other

:-	:-
`ac`	align-content:;
`ac:c`	align-content:center;
`ac:fe`	align-content:flex-end;
`ac:fs`	align-content:flex-start;
`ac:s`	align-content:stretch;
`ac:sa`	align-content:space-around;
`ac:sb`	align-content:space-between;
`ai`	align-items:;
`ai:b`	align-items:baseline;
`ai:c`	align-items:center;
`ai:fe`	align-items:flex-end;
`ai:fs`	align-items:flex-start;
`ai:s`	align-items:stretch;
`ap`	appearance:${none};
`as`	align-self:;
`as:a`	align-self:auto;
`as:b`	align-self:baseline;
`as:c`	align-self:center;
`as:fe`	align-self:flex-end;
`as:fs`	align-self:flex-start;
`as:s`	align-self:stretch;
`bfv`	backface-visibility:;
`bfv:h`	backface-visibility:hidden;
`bfv:v`	backface-visibility:visible;
`bg:ie`	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’x.png’,sizingMethod=’crop’);
`cm`	/* ${child} */
`colm`	columns:;
`colmc`	column-count:;
`colmf`	column-fill:;
`colmg`	column-gap:;
`colmr`	column-rule:;
`colmrc`	column-rule-color:;
`colmrs`	column-rule-style:;
`colmrw`	column-rule-width:;
`colms`	column-span:;
`colmw`	column-width:;
`d:ib+`	display: inline-block; display: inline; zoom: 1;
`jc`	justify-content:;
`jc:c`	justify-content:center;
`jc:fe`	justify-content:flex-end;
`jc:fs`	justify-content:flex-start;
`jc:sa`	justify-content:space-around;
`jc:sb`	justify-content:space-between;
`mar`	max-resolution:res;
`mir`	min-resolution:res;
`op+`	opacity: ; filter: alpha(opacity=);
`op:ie`	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
`op:ms`	-ms-filter:’progid:DXImageTransform.Microsoft.Alpha(Opacity=100)’;
`ord`	order:;
`ori`	orientation:;
`ori:l`	orientation:landscape;
`ori:p`	orientation:portrait;
`tov`	text-overflow:${ellipsis};
`tov:c`	text-overflow:clip;
`tov:e`	text-overflow:ellipsis;
`trs`	transition:prop time;
`trsde`	transition-delay:time;
`trsdu`	transition-duration:time;
`trsp`	transition-property:prop;
`trstf`	transition-timing-function:tfunc;
`us`	user-select:${none};
`wfsm`	-webkit-font-smoothing:${antialiased};
`wfsm:a`	-webkit-font-smoothing:antialiased;
`wfsm:n`	-webkit-font-smoothing:none;
`wfsm:s, wfsm:sa`	-webkit-font-smoothing:subpixel-antialiased;
`wm`	writing-mode:lr-tb;
`wm:btl`	writing-mode:bt-lr;
`wm:btr`	writing-mode:bt-rl;
`wm:lrb`	writing-mode:lr-bt;
`wm:lrt`	writing-mode:lr-tb;
`wm:rlb`	writing-mode:rl-bt;
`wm:rlt`	writing-mode:rl-tb;
`wm:tbl`	writing-mode:tb-lr;
`wm:tbr`	writing-mode:tb-rl;

animation

:-	:-
`anim`	animation:;
`anim-`	animation:name duration timing-function delay iteration-count direction fill-mode;
`animdel`	animation-delay:time;
`animdir`	animation-direction:normal;
`animdir:a`	animation-direction:alternate;
`animdir:ar`	animation-direction:alternate-reverse;
`animdir:n`	animation-direction:normal;
`animdir:r`	animation-direction:reverse;
`animdur`	animation-duration:0s;
`animfm`	animation-fill-mode:both;
`animfm:b`	animation-fill-mode:backwards;
`animfm:bt, animfm:bh`	animation-fill-mode:both;
`animfm:f`	animation-fill-mode:forwards;
`animic`	animation-iteration-count:1;
`animic:i`	animation-iteration-count:infinite;
`animn`	animation-name:none;
`animps`	animation-play-state:running;
`animps:p`	animation-play-state:paused;
`animps:r`	animation-play-state:running;
`animtf`	animation-timing-function:linear;
`animtf:cb`	animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);
`animtf:e`	animation-timing-function:ease;
`animtf:ei`	animation-timing-function:ease-in;
`animtf:eio`	animation-timing-function:ease-in-out;
`animtf:eo`	animation-timing-function:ease-out;
`animtf:l`	animation-timing-function:linear;

flex

:-	:-
`fx`	flex:;
`fxb`	flex-basis:;
`fxd`	flex-direction:;
`fxd:c`	flex-direction:column;
`fxd:cr`	flex-direction:column-reverse;
`fxd:r`	flex-direction:row;
`fxd:rr`	flex-direction:row-reverse;
`fxf`	flex-flow:;
`fxg`	flex-grow:;
`fxsh`	flex-shrink:;
`fxw`	flex-wrap: ;
`fxw:n`	flex-wrap:nowrap;
`fxw:w`	flex-wrap:wrap;
`fxw:wr`	flex-wrap:wrap-reverse;

XSL

tmatch, tm

1	<xsl:template match="" mode=""></xsl:template>

tname, tn

1	<xsl:template name=""></xsl:template>

call

1	<xsl:call-template name="" />

1	<xsl:apply-templates select="" mode="" />

api

1	<xsl:apply-imports />

imp

1	<xsl:import href="" />

inc

1	<xsl:include href="" />

1	<xsl:choose></xsl:choose>

xsl:when, wh

1	<xsl:when test=""></xsl:when>

1	<xsl:otherwise></xsl:otherwise>

1	<xsl:if test=""></xsl:if>

par

1	<xsl:param name=""></xsl:param>

pare

1	<xsl:param name="" select="" />

var

1	<xsl:variable name=""></xsl:variable>

XSL

vare

1	<xsl:variable name="" select="" />

1	<xsl:with-param name="" select="" />

key

1	<xsl:key name="" match="" use="" />

elem

1	<xsl:element name=""></xsl:element>

attr

1	<xsl:attribute name=""></xsl:attribute>

attrs

1	<xsl:attribute-set name=""></xsl:attribute-set>

1	<xsl:copy select="" />

1	<xsl:copy-of select="" />

val

1	<xsl:value-of select="" />

each, for

1	<xsl:for-each select=""></xsl:for-each>

tex

1	<xsl:text></xsl:text>

com

1	<xsl:comment></xsl:comment>

msg

1	<xsl:message terminate="no"></xsl:message>

fall

1	<xsl:fallback></xsl:fallback>

XSL

num

1	<xsl:number value="" />

nam

1	<namespace-alias stylesheet-prefix="" result-prefix="" />

pres

1	<xsl:preserve-space elements="" />

strip

1	<xsl:strip-space elements="" />

proc

1	<xsl:processing-instruction name=""></xsl:processing-instruction>

sort

1	<xsl:sort select="" order="" />

choose+ A别名 xsl:choose>xsl:when+xsl:otherwise

<xsl:choose>
    <xsl:when test=""></xsl:when>
    <xsl:otherwise></xsl:otherwise>
</xsl:choose>

xsl 别名 !!!+xsl:stylesheet[version=1.0 xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{ | }

1 2	<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>

!!!

1	<?xml version="1.0" encoding="UTF-8"?>

另见

Emmet Cheat sheet (docs.emmet.io)