Emmet 速查表
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"]
<p title="Hello world"></p>
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
[a='value1' b="value2"]
<div a="value1" b="value2"></div>
文本: {}
a{Click me}
<a href="">Click me</a>
p>{Click }+a{here}+{ 继续}
<p>Click <a href="">here</a> 继续</p>
ID 和 CLASS 属性
# header
<div id="header"></div>
.title
<div class="title"></div>
form#search.wide
<form id="search" class="wide"></form>
p.class1.class2.class3
<p class="class1 class2 class3"></p>
隐式标签名称
.class
<div class="class"></div>
em>.class
<em><span class="class"></span></em>
ul>.class
<ul>
<li class="class"></li>
</ul>
table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
兄弟: +
div+p+bq
<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
<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>
a
<a href=""></a>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
abbr
<abbr title=""></abbr>
acronym, acr
<acronym title=""></acronym>
base
<base href="" />
basefont
<basefont />
br
<br />
frame
<frame />
hr
<hr />
bdo
<bdo dir=""></bdo>
bdo:r
<bdo dir="rtl"></bdo>
bdo:l
<bdo dir="ltr"></bdo>
col
<col />
link
<link rel="stylesheet" href="" />
link:css
<link rel="stylesheet" href="style.css" />
link:print
<link rel="stylesheet" href="print.css" media="print" />
link:favicon
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
link:touch
<link rel="apple-touch-icon" href="favicon.png" />
link:rss
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
link:atom
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
link:import, link:im
<link rel="import" href="component.html" />
meta
<meta />
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
style
<style></style>
script
<script></script>
script:src
<script src=""></script>
img
<img src="" alt="" />
img:srcset, img:s
<img srcset="" src="" alt="" />
img:sizes, img:z
<img sizes="" srcset="" src="" alt="" />
picture
<picture></picture>
source, src
<source />
source:src, src:sc
<source src="" type="" />
source:srcset, src:s
<source srcset="" />
source:media, src:m
<source media="(min-width: )" srcset="" />
source:type, src:t
<source srcset="" type="image/" />
source:sizes, src:z
<source sizes="" srcset="" />
source:media:type, src:mt
<source media="(min-width: )" srcset="" type="image/" />
source:media:sizes, src:mz
<source media="(min-width: )" sizes="" srcset="" />
source:sizes:type, src:zt
<source sizes="" srcset="" type="image/" />
iframe
<iframe src="" frameborder="0"></iframe>
embed
<embed src="" type="" />
object
<object data="" type=""></object>
param
<param name="" value="" />
map
<map name=""></map>
area
<area shape="" coords="" href="" alt="" />
area:d
<area shape="default" href="" alt="" />
area:c
<area shape="circle" coords="" href="" alt="" />
area:r
<area shape="rect" coords="" href="" alt="" />
area:p
<area shape="poly" coords="" href="" alt="" />
form
<form action=""></form>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
label
<label for=""></label>
input
<input type="text" />
inp
<input type="text" name="" id="" />
input:hidden, input:h 别名 input[type=hidden name]
<input type="hidden" name="" />
input:text, input:t 别名 inp
<input type="text" name="" id="" />
input:search 别名 inp[type=search]
<input type="search" name="" id="" />
input:email 别名 inp[type=email]
<input type="email" name="" id="" />
HTML 2
input:url 别名 inp[type=url]
<input type="url" name="" id="" />
input:password, input:p 别名 inp[type=password]
<input type="password" name="" id="" />
input:datetime 别名 inp[type=datetime]
<input type="datetime" name="" id="" />
input:date 别名 inp[type=date]
<input type="date" name="" id="" />
input:datetime-local 别名 inp[type=datetime-local]
<input type="datetime-local" name="" id="" />
input:month 别名 inp[type=month]
<input type="month" name="" id="" />
input:week 别名 inp[type=week]
<input type="week" name="" id="" />
input:time 别名 inp[type=time]
<input type="time" name="" id="" />
input:tel 别名 inp[type=tel]
<input type="tel" name="" id="" />
input:number 别名 inp[type=number]
<input type="number" name="" id="" />
input:color 别名 inp[type=color]
<input type="color" name="" id="" />
input:checkbox, input:c 别名 inp[type=checkbox]
<input type="checkbox" name="" id="" />
input:radio, input:r 别名 inp[type=radio]
<input type="radio" name="" id="" />
input:range 别名 inp[type=range]
<input type="range" name="" id="" />
input:file, input:f 别名 inp[type=file]
<input type="file" name="" id="" />
input:submit, input:s
<input type="submit" value="" />
input:image, input:i
<input type="image" src="" alt="" />
input:button, input:b
<input type="button" value="" />
isindex
<isindex />
input:reset 别名 input:button[type=reset]
<input type="reset" value="" />
select
<select name="" id=""></select>
select:disabled, select:d 别名 select[disabled.]
<select name="" id="" disabled="disabled"></select>
option, opt
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
marquee
<marquee behavior="" direction=""></marquee>
menu:context, menu:c 别名 menu[type=context]>
<menu type="context"></menu>
menu:toolbar, menu:t 别名 menu[type=toolbar]>
<menu type="toolbar"></menu>
video
<video src=""></video>
audio
<audio src=""></audio>
html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
keygen
<keygen />
command
<command />
button:submit, button:s, btn:s 别名 button[type=submit]
<button type="submit"></button>
button:reset, button:r, btn:r 别名 button[type=reset]
<button type="reset"></button>
button:disabled, button:d, btn:d 别名 button[disabled.]
<button disabled="disabled"></button>
fieldset:disabled, fieldset:d, fset:d, fst:d 别名 fieldset[disabled.]
<fieldset disabled="disabled"></fieldset>
bq 别名 blockquote
<blockquote></blockquote>
fig 别名 figure
<figure></figure>
figc 别名 figcaption
<figcaption></figcaption>
pic 别名 picture
<picture></picture>
ifr 别名 iframe
<iframe src="" frameborder="0"></iframe>
emb 别名 embed
<embed src="" type="" />
obj 别名 object
<object data="" type=""></object>
cap 别名 caption
<caption></caption>
colg 别名 colgroup
<colgroup></colgroup>
fst, fset 别名 fieldset
<fieldset></fieldset>
btn 别名 button
<button></button>
optg 别名 optgroup
<optgroup></optgroup>
tarea 别名 textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
leg 别名 legend
<legend></legend>
sect 别名 section
<section></section>
art 别名 article
<article></article>
hdr 别名 header
<header></header>
ftr 别名 footer
<footer></footer>
adr 别名 address
<address></address>
dlg 别名 dialog
<dialog></dialog>
str 别名 strong
<strong></strong>
prog 别名 progress
<progress></progress>
mn 别名 main
<main></main>
tem 别名 template
<template></template>
datag 别名 datagrid
<datagrid></datagrid>
datal 别名 datalist
<datalist></datalist>
kg 别名 keygen
<keygen />
out 别名 output
<output></output>
det 别名 details
<details></details>
HTML 3
cmd Alias of command
<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
<img srcset="" src="" alt="" />
ri:viewport, ri:v 别名 img:z
<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
<ol>
<li></li>
</ol>
ul+ 别名 ul>li
<ul>
<li></li>
</ul>
dl+ 别名 dl>dt+dd
<dl>
<dt></dt>
<dd></dd>
</dl>
map+ 别名 map>area
<map name="">
<area shape="" coords="" href="" alt="" />
</map>
table+ 别名 table>tr>td
<table>
<tr>
<td></td>
</tr>
</table>
colgroup+, colg+ 别名 colgroup>col
<colgroup>
<col />
</colgroup>
tr+ 别名 tr>td
<tr>
<td></td>
</tr>
select+ 别名 select>option
<select name="" id="">
<option value=""></option>
</select>
optgroup+, optg+ 别名 optgroup>option
<optgroup>
<option value=""></option>
</optgroup>
pic+ 别名 picture>source:srcset+img
<picture>
<source srcset="" />
<img src="" alt="" />
</picture>
!!!
<!DOCTYPE html>
!!!4t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
!!!4s
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
!!!xt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
!!!xs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
!!!xxs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
c
<!-- ${child} -->
cc:ie6
<!--[if lte IE 6]>
${child}
<![endif]-->
cc:ie
<!--[if IE]>
${child}
<![endif]-->
cc:noie
<!--[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; |
:- | :- |
---|---|
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
@import url();
@kf
@-webkit-keyframes identifier {
from { }
to { }
}
@-o-keyframes identifier {
from { }
to { }
}
@-moz-keyframes identifier {
from { }
to { }
}
@keyframes identifier {
from { }
to { }
}
@m, @media
@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
XSL
tmatch, tm
<xsl:template match="" mode=""></xsl:template>
tname, tn
<xsl:template name=""></xsl:template>
call
<xsl:call-template name="" />
ap
<xsl:apply-templates select="" mode="" />
api
<xsl:apply-imports />
imp
<xsl:import href="" />
inc
<xsl:include href="" />
ch
<xsl:choose></xsl:choose>
xsl:when, wh
<xsl:when test=""></xsl:when>
ot
<xsl:otherwise></xsl:otherwise>
if
<xsl:if test=""></xsl:if>
par
<xsl:param name=""></xsl:param>
pare
<xsl:param name="" select="" />
var
<xsl:variable name=""></xsl:variable>
XSL
vare
<xsl:variable name="" select="" />
wp
<xsl:with-param name="" select="" />
key
<xsl:key name="" match="" use="" />
elem
<xsl:element name=""></xsl:element>
attr
<xsl:attribute name=""></xsl:attribute>
attrs
<xsl:attribute-set name=""></xsl:attribute-set>
cp
<xsl:copy select="" />
co
<xsl:copy-of select="" />
val
<xsl:value-of select="" />
each, for
<xsl:for-each select=""></xsl:for-each>
tex
<xsl:text></xsl:text>
com
<xsl:comment></xsl:comment>
msg
<xsl:message terminate="no"></xsl:message>
fall
<xsl:fallback></xsl:fallback>
XSL
num
<xsl:number value="" />
nam
<namespace-alias stylesheet-prefix="" result-prefix="" />
pres
<xsl:preserve-space elements="" />
strip
<xsl:strip-space elements="" />
proc
<xsl:processing-instruction name=""></xsl:processing-instruction>
sort
<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]>{ | }
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>
!!!
<?xml version="1.0" encoding="UTF-8"?>
另见
- Emmet Cheat sheet (docs.emmet.io)
评论
欢迎提交文档错误或者建议。提交成功后自己可见,其他用户待审核通过后才可见。