【说明】本系列博文是依据 Emmet 官方文档翻译的,原文地址为:http://docs.emmet.io/,部分内容已经在博主之前的博文中节选过,为方便已经收藏过之前博文的朋友,没有删除这些博文,仅将其完整的收录于本系列中。这一节其实没有什么可翻译的,只是为了保持文档的完整性,并且,这个表在实际使用时是很有用的。不过限于博客的排版格式,这里的呈献形式远不如原文。在此列出原文的地址(http://docs.emmet.io/cheat-sheet/),朋友们可以经常拿来参考:)

语法 

Child: >

nav>ul>li

Sibling: +

div+p+bq

Climb-up: ^

div+div>p>span+em^bq

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

Grouping: ()

div>(header>ul>li*2>a)+footer>p
(div>dl>(dt+dd)*3)+footer>p

Multiplication: *

ul>li*5

Item numbering: $

ul>li.item$*5
h$[title=item$]{Header $}*3

Header 1

Header 2

Header 3

ul>li.item$$$*5
ul>li.item$@-*5
ul>li.item$@3*5

ID and CLASS attributes

#header
.title
form#search.widep.class1.class2.class3

Custom attributes

p[title="Hello world"]td[rowspan=2 colspan=3 title][a='value1' b="value2"]

Text: {}

a{Click me}p>{Click }+a{here}+{ to continue}

Click to continue

Implicit tag names

.class
em>.classul>.class
table>.row>.col

HTML

全部未知的缩写都被转换成标签,如 foo → 。

!

Alias of html:5

aa:linka:mailabbracronymbasebdobdo:rbdo:llinklink:cssstyle.css" media="all" />link:printprint.css" media="print" />link:faviconfavicon.ico" />link:touchfavicon.png" />link:rssrss." />link:atomatom." />meta:utfmeta:winmeta:vpdevice-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />meta:compatIE=7" />stylescriptscript:srcimgiframeembedobjectparammapareaarea:darea:carea:rarea:pformform:getform:postlabelinputtext" />inptext" name="" id="" />input:hidden

Alias of input[type=hidden name]

input:h

Alias of input:hidden

input:text, input:t

Alias of inp

text" name="" id="" />input:search

Alias of inp[type=search]

input:email

Alias of inp[type=email]

input:url

Alias of inp[type=url]

input:password

Alias of inp[type=password]

input:p

Alias of input:password

input:datetime

Alias of inp[type=datetime]

input:date

Alias of inp[type=date]

input:datetime-local

Alias of inp[type=datetime-local]

input:month

Alias of inp[type=month]

input:week

Alias of inp[type=week]

input:time

Alias of inp[type=time]

input:number

Alias of inp[type=number]

input:color

Alias of inp[type=color]

input:checkbox

Alias of inp[type=checkbox]

input:c

Alias of input:checkbox

input:radio

Alias of inp[type=radio]

input:r

Alias of input:radio

input:range

Alias of inp[type=range]

input:file

Alias of inp[type=file]

input:f

Alias of input:file

input:submitinput:s

Alias of input:submit

input:imageinput:i

Alias of input:image

input:buttoninput:b

Alias of input:button

input:reset

Alias of input:button[type=reset]

selectoptiontextareamenu:context

Alias of menu[type=context]>

menu:c

Alias of menu:context

menu:toolbar

Alias of menu[type=toolbar]>

menu:t

Alias of menu:toolbar

videoaudiohtml:Alias of blockquote

acr

Alias of acronym

fig

Alias of figure

figc

Alias of figcaption

ifr

Alias of iframe

emb

Alias of embed

obj

Alias of object

src

Alias of source

cap

Alias of caption

colg

Alias of colgroup

fst, fset

Alias of fieldset

btn

Alias of button

optg

Alias of optgroup

opt

Alias of option

tarea

Alias of textarea

leg

Alias of legend

sect

Alias of section

art

Alias of article

hdr

Alias of header

ftr

Alias of footer

adr

Alias of address

dlg

Alias of dialog

str

Alias of strong

prog

Alias of progress

datag

Alias of datagrid

datal

Alias of datalist

kg

Alias of keygen

out

Alias of output

det

Alias of details

cmd

Alias of command

doc

Alias of html>(head>meta[charset=UTF-8]+title{${1:Document}})+body

doc4

Alias of html>(head>meta[http-equiv="Content-Type" content="text/html;charset=${charset}"]+title{${1:Document}})

html:4t

Alias of !!!4t+doc4[lang=${lang}]

html:4s

Alias of !!!4s+doc4[lang=${lang}]

html:xt

Alias of !!!xt+doc4[

html:xs

Alias of !!!xs+doc4[

html:xxs

Alias of !!!xxs+doc4[

html:5

Alias of !!!+doc[lang=${lang}]

ol+

Alias of ol>li

ul+

Alias of ul>li

dl+

Alias of dl>dt+dd

map+

Alias of map>area

table+

Alias of table>tr>td

colgroup+, colg+

Alias of colgroup>col

tr+

Alias of tr>td

select+

Alias of select>option

optgroup+, optg+

Alias of optgroup>option

!!!!!!4t!!!4s!!!xt!!!xs!!!xxsccc:ie6cc:iecc:noie ${child}

CSS

CSS 模块使用模糊搜索查找未知的缩写,如 ov:h == ov-h == ovh == oh。

如果缩写找不到,将转换为属性名: foo-bar → foo-bar: |;

可以使用连字符作为缩写的前缀,产生 vendor 前缀的属性:-foo

视觉格式化

posposition:relative;pos:sposition:static;pos:aposition:absolute;pos:rposition:relative;pos:fposition:fixed;ttop:;t:atop:auto;rright:;r:aright:auto;bbottom:;b:abottom:auto;lleft:;l:aleft:auto;zz-index:;z:az-index:auto;flfloat:left;fl:nfloat:none;fl:lfloat:left;fl:rfloat:right;clclear:both;cl:nclear:none;cl:lclear:left;cl:rclear:right;cl:bclear:both;ddisplay:block;d:ndisplay:none;d:bdisplay:block;d:idisplay:inline;d:ibdisplay:inline-block;d:lidisplay:list-item;d:ridisplay:run-in;d:cpdisplay:compact;d:tbdisplay:table;d:itbdisplay:inline-table;d:tbcpdisplay:table-caption;d:tbcldisplay:table-column;d:tbclgdisplay:table-column-group;d:tbhgdisplay:table-header-group;d:tbfgdisplay:table-footer-group;d:tbrdisplay:table-row;d:tbrgdisplay:table-row-group;d:tbcdisplay:table-cell;d:rbdisplay:ruby;d:rbbdisplay:ruby-base;d:rbbgdisplay:ruby-base-group;d:rbtdisplay:ruby-text;d:rbtgdisplay:ruby-text-group;vvisibility:hidden;v:vvisibility:visible;v:hvisibility:hidden;v:cvisibility:collapse;ovoverflow:hidden;ov:voverflow:visible;ov:hoverflow:hidden;ov:soverflow:scroll;ov:aoverflow:auto;ovxoverflow-x:hidden;ovx:voverflow-x:visible;ovx:hoverflow-x:hidden;ovx:soverflow-x:scroll;ovx:aoverflow-x:auto;ovyoverflow-y:hidden;ovy:voverflow-y:visible;ovy:hoverflow-y:hidden;ovy:soverflow-y:scroll;ovy:aoverflow-y:auto;ovsoverflow-style:scrollbar;ovs:aoverflow-style:auto;ovs:soverflow-style:scrollbar;ovs:poverflow-style:panner;ovs:moverflow-style:move;ovs:mqoverflow-style:marquee;zoo, zmzoom:1;cpclip:;cp:aclip:auto;cp:rclip:rect(top right bottom left);rszresize:;rsz:nresize:none;rsz:bresize:both;rsz:hresize:horizontal;rsz:vresize:vertical;curcursor:${pointer};cur:acursor:auto;cur:dcursor:default;cur:ccursor:crosshair;cur:hacursor:hand;cur:hecursor:help;cur:mcursor:move;cur:pcursor:pointer;cur:tcursor:text;

外边距和内边距

mmargin:;m:amargin:auto;mtmargin-top:;mt:amargin-top:auto;mrmargin-right:;mr:amargin-right:auto;mbmargin-bottom:;mb:amargin-bottom:auto;mlmargin-left:;ml:amargin-left:auto;ppadding:;ptpadding-top:;prpadding-right:;pbpadding-bottom:;plpadding-left:;

盒尺寸

bxzbox-sizing:border-box;bxz:cbbox-sizing:content-box;bxz:bbbox-sizing:border-box;bxshbox-shadow:inset hoff voff blur color;bxsh:rbox-shadow:inset hoff voff blur spread rgb(000);bxsh:rabox-shadow:inset h v blur spread rgba(000, .5);bxsh:nbox-shadow:none;wwidth:;w:awidth:auto;hheight:;h:aheight:auto;mawmax-width:;maw:nmax-width:none;mahmax-height:;mah:nmax-height:none;miwmin-width:;mihmin-height:;

字体

ffont:;f+font:1em Arial,sans-serif;fwfont-weight:;fw:nfont-weight:normal;fw:bfont-weight:bold;fw:brfont-weight:bolder;fw:lrfont-weight:lighter;fsfont-style:${italic};fs:nfont-style:normal;fs:ifont-style:italic;fs:ofont-style:oblique;fvfont-variant:;fv:nfont-variant:normal;fv:scfont-variant:small-caps;fzfont-size:;fzafont-size-adjust:;fza:nfont-size-adjust:none;fffont-family:;ff:sfont-family:serif;ff:ssfont-family:sans-serif;ff:cfont-family:cursive;ff:ffont-family:fantasy;ff:mfont-family:monospace;feffont-effect:;fef:nfont-effect:none;fef:egfont-effect:engrave;fef:ebfont-effect:emboss;fef:ofont-effect:outline;femfont-emphasize:;fempfont-emphasize-position:;femp:bfont-emphasize-position:before;femp:afont-emphasize-position:after;femsfont-emphasize-style:;fems:nfont-emphasize-style:none;fems:acfont-emphasize-style:accent;fems:dtfont-emphasize-style:dot;fems:cfont-emphasize-style:circle;fems:dsfont-emphasize-style:disc;fsmfont-smooth:;fsm:afont-smooth:auto;fsm:nfont-smooth:never;fsm:awfont-smooth:always;fstfont-stretch:;fst:nfont-stretch:normal;fst:ucfont-stretch:ultra-condensed;fst:ecfont-stretch:extra-condensed;fst:cfont-stretch:condensed;fst:scfont-stretch:semi-condensed;fst:sefont-stretch:semi-expanded;fst:efont-stretch:expanded;fst:eefont-stretch:extra-expanded;fst:uefont-stretch:ultra-expanded;

文本

vavertical-align:top;va:supvertical-align:super;va:tvertical-align:top;va:ttvertical-align:text-top;va:mvertical-align:middle;va:blvertical-align:baseline;va:bvertical-align:bottom;va:tbvertical-align:text-bottom;va:subvertical-align:sub;tatext-align:left;ta:ltext-align:left;ta:ctext-align:center;ta:rtext-align:right;ta:jtext-align:justify;ta-lsttext-align-last:;tal:atext-align-last:auto;tal:ltext-align-last:left;tal:ctext-align-last:center;tal:rtext-align-last:right;tdtext-decoration:none;td:ntext-decoration:none;td:utext-decoration:underline;td:otext-decoration:overline;td:ltext-decoration:line-through;tetext-emphasis:;te:ntext-emphasis:none;te:actext-emphasis:accent;te:dttext-emphasis:dot;te:ctext-emphasis:circle;te:dstext-emphasis:disc;te:btext-emphasis:before;te:atext-emphasis:after;thtext-height:;th:atext-height:auto;th:ftext-height:font-size;th:ttext-height:text-size;th:mtext-height:max-size;titext-indent:;ti:-text-indent:-9999px;tjtext-justify:;tj:atext-justify:auto;tj:iwtext-justify:inter-word;tj:iitext-justify:inter-ideograph;tj:ictext-justify:inter-cluster;tj:dtext-justify:distribute;tj:ktext-justify:kashida;tj:ttext-justify:tibetan;totext-outline:;to+text-outline:0 0 #000;to:ntext-outline:none;trtext-replace:;tr:ntext-replace:none;tttext-transform:uppercase;tt:ntext-transform:none;tt:ctext-transform:capitalize;tt:utext-transform:uppercase;tt:ltext-transform:lowercase;twtext-wrap:;tw:ntext-wrap:normal;tw:notext-wrap:none;tw:utext-wrap:unrestricted;tw:stext-wrap:suppress;tshtext-shadow:hoff voff blur #000;tsh:rtext-shadow:h v blur rgb(000);tsh:ratext-shadow:h v blur rgba(000, .5);tsh+text-shadow:0 0 0 #000;tsh:ntext-shadow:none;lhline-height:;ltsletter-spacing:;whswhite-space:;whs:nwhite-space:normal;whs:pwhite-space:pre;whs:nwwhite-space:nowrap;whs:pwwhite-space:pre-wrap;whs:plwhite-space:pre-line;whscwhite-space-collapse:;whsc:nwhite-space-collapse:normal;whsc:kwhite-space-collapse:keep-all;whsc:lwhite-space-collapse:loose;whsc:bswhite-space-collapse:break-strict;whsc:bawhite-space-collapse:break-all;wobword-break:;wob:nword-break:normal;wob:kword-break:keep-all;wob:lword-break:loose;wob:bsword-break:break-strict;wob:baword-break:break-all;wosword-spacing:;wowword-wrap:;wow:nmword-wrap:normal;wow:nword-wrap:none;wow:uword-wrap:unrestricted;wow:sword-wrap:suppress;

背景

bgbackground:;bg+background:#fff url() 0 0 no-repeat;bg:nbackground:none;bgcbackground-color:#fff;bgc:tbackground-color:transparent;bgibackground-image:url();bgi:nbackground-image:none;bgrbackground-repeat:;bgr:nbackground-repeat:no-repeat;bgr:xbackground-repeat:repeat-x;bgr:ybackground-repeat:repeat-y;bgr:spbackground-repeat:space;bgr:rdbackground-repeat:round;bgabackground-attachment:;bga:fbackground-attachment:fixed;bga:sbackground-attachment:scroll;bgpbackground-position:0 0;bgpxbackground-position-x:;bgpybackground-position-y:;bgbkbackground-break:;bgbk:bbbackground-break:bounding-box;bgbk:ebbackground-break:each-box;bgbk:cbackground-break:continuous;bgcpbackground-clip:padding-box;bgcp:bbbackground-clip:border-box;bgcp:pbbackground-clip:padding-box;bgcp:cbbackground-clip:content-box;bgcp:ncbackground-clip:no-clip;bgobackground-origin:;bgo:pbbackground-origin:padding-box;bgo:bbbackground-origin:border-box;bgo:cbbackground-origin:content-box;bgszbackground-size:;bgsz:abackground-size:auto;bgsz:ctbackground-size:contain;bgsz:cvbackground-size:cover;

颜色

ccolor:#000;c:rcolor:rgb(000);c:racolor:rgba(000, .5);opopacity:;

生成内容

cntcontent:'';cnt:n, ct:ncontent:normal;cnt:oq, ct:oqcontent:open-quote;cnt:noq, ct:noqcontent:no-open-quote;cnt:cq, ct:cqcontent:close-quote;cnt:ncq, ct:ncqcontent:no-close-quote;cnt:a, ct:acontent:attr();cnt:c, ct:ccontent:counter();cnt:cs, ct:cscontent:counters();ctcontent:;qquotes:;q:nquotes:none;q:ruquotes:'\00AB' '\00BB' '\201E' '\201C';q:enquotes:'\201C' '\201D' '\2018' '\2019';coicounter-increment:;corcounter-reset:;

轮廓

oloutline:;ol:noutline:none;olooutline-offset:;olwoutline-width:;olsoutline-style:;olcoutline-color:#000;olc:ioutline-color:invert;

表格

tbltable-layout:;tbl:atable-layout:auto;tbl:ftable-layout:fixed;cpscaption-side:;cps:tcaption-side:top;cps:bcaption-side:bottom;ecempty-cells:;ec:sempty-cells:show;ec:hempty-cells:hide;

边框

bdborder:;bd+border:1px solid #000;bd:nborder:none;bdbkborder-break:close;bdbk:cborder-break:close;bdclborder-collapse:;bdcl:cborder-collapse:collapse;bdcl:sborder-collapse:separate;bdcborder-color:#000;bdc:tborder-color:transparent;bdiborder-image:url();bdi:nborder-image:none;bdtiborder-top-image:url();bdti:nborder-top-image:none;bdriborder-right-image:url();bdri:nborder-right-image:none;bdbiborder-bottom-image:url();bdbi:nborder-bottom-image:none;bdliborder-left-image:url();bdli:nborder-left-image:none;bdciborder-corner-image:url();bdci:nborder-corner-image:none;bdci:cborder-corner-image:continue;bdtliborder-top-left-image:url();bdtli:nborder-top-left-image:none;bdtli:cborder-top-left-image:continue;bdtriborder-top-right-image:url();bdtri:nborder-top-right-image:none;bdtri:cborder-top-right-image:continue;bdbriborder-bottom-right-image:url();bdbri:nborder-bottom-right-image:none;bdbri:cborder-bottom-right-image:continue;bdbliborder-bottom-left-image:url();bdbli:nborder-bottom-left-image:none;bdbli:cborder-bottom-left-image:continue;bdfborder-fit:repeat;bdf:cborder-fit:clip;bdf:rborder-fit:repeat;bdf:scborder-fit:scale;bdf:stborder-fit:stretch;bdf:owborder-fit:overwrite;bdf:ofborder-fit:overflow;bdf:spborder-fit:space;bdlenborder-length:;bdlen:aborder-length:auto;bdspborder-spacing:;bdsborder-style:;bds:nborder-style:none;bds:hborder-style:hidden;bds:dtborder-style:dotted;bds:dsborder-style:dashed;bds:sborder-style:solid;bds:dbborder-style:double;bds:dtdsborder-style:dot-dash;bds:dtdtdsborder-style:dot-dot-dash;bds:wborder-style:wave;bds:gborder-style:groove;bds:rborder-style:ridge;bds:iborder-style:inset;bds:oborder-style:outset;bdwborder-width:;bdt, btborder-top:;bdt+border-top:1px solid #000;bdt:nborder-top:none;bdtwborder-top-width:;bdtsborder-top-style:;bdts:nborder-top-style:none;bdtcborder-top-color:#000;bdtc:tborder-top-color:transparent;bdr, brborder-right:;bdr+border-right:1px solid #000;bdr:nborder-right:none;bdrwborder-right-width:;bdrstborder-right-style:;bdrst:nborder-right-style:none;bdrcborder-right-color:#000;bdrc:tborder-right-color:transparent;bdb, bbborder-bottom:;bdb+border-bottom:1px solid #000;bdb:nborder-bottom:none;bdbwborder-bottom-width:;bdbsborder-bottom-style:;bdbs:nborder-bottom-style:none;bdbcborder-bottom-color:#000;bdbc:tborder-bottom-color:transparent;bdl, blborder-left:;bdl+border-left:1px solid #000;bdl:nborder-left:none;bdlwborder-left-width:;bdlsborder-left-style:;bdls:nborder-left-style:none;bdlcborder-left-color:#000;bdlc:tborder-left-color:transparent;bdrsborder-radius:;bdtrrsborder-top-right-radius:;bdtlrsborder-top-left-radius:;bdbrrsborder-bottom-right-radius:;bdblrsborder-bottom-left-radius:;

列表

lislist-style:;lis:nlist-style:none;lisplist-style-position:;lisp:ilist-style-position:inside;lisp:olist-style-position:outside;listlist-style-type:;list:nlist-style-type:none;list:dlist-style-type:disc;list:clist-style-type:circle;list:slist-style-type:square;list:dclist-style-type:decimal;list:dclzlist-style-type:decimal-leading-zero;list:lrlist-style-type:lower-roman;list:urlist-style-type:upper-roman;lisilist-style-image:;lisi:nlist-style-image:none;

打印

pgbbpage-break-before:;pgbb:aupage-break-before:auto;pgbb:alpage-break-before:always;pgbb:lpage-break-before:left;pgbb:rpage-break-before:right;pgbipage-break-inside:;pgbi:aupage-break-inside:auto;pgbi:avpage-break-inside:avoid;pgbapage-break-after:;pgba:aupage-break-after:auto;pgba:alpage-break-after:always;pgba:lpage-break-after:left;pgba:rpage-break-after:right;orporphans:;widwidows:;

其它

!!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 { }animanimation:;anim-animation:name duration timing-function delay iteration-count direction fill-mode;animdelanimation-delay:time;animdiranimation-direction:normal;animdir:aanimation-direction:alternate;animdir:aranimation-direction:alternate-reverse;animdir:nanimation-direction:normal;animdir:ranimation-direction:reverse;animduranimation-duration:0s;animfmanimation-fill-mode:both;animfm:banimation-fill-mode:backwards;animfm:bt, animfm:bhanimation-fill-mode:both;animfm:fanimation-fill-mode:forwards;animicanimation-iteration-count:1;animic:ianimation-iteration-count:infinite;animnanimation-name:none;animpsanimation-play-state:running;animps:panimation-play-state:paused;animps:ranimation-play-state:running;animtfanimation-timing-function:linear;animtf:cbanimation-timing-function:cubic-bezier(0.10.71.00.1);animtf:eanimation-timing-function:ease;animtf:eianimation-timing-function:ease-in;animtf:eioanimation-timing-function:ease-in-out;animtf:eoanimation-timing-function:ease-out;animtf:lanimation-timing-function:linear;apappearance:${none}bg:iefilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');cm/* ${child} */colmcolumns:;colmccolumn-count:;colmfcolumn-fill:;colmgcolumn-gap:;colmrcolumn-rule:;colmrccolumn-rule-color:;colmrscolumn-rule-style:;colmrwcolumn-rule-width:;colmscolumn-span:;colmwcolumn-width:;marmax-resolution:res;mirmin-resolution:res;op:iefilter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);op:ms-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';oriorientation:;ori:lorientation:landscape;ori:porientation:portrait;tovtext-overflow:${ellipsis};tov:ctext-overflow:clip;tov:etext-overflow:ellipsis;trftransform:;trf:rtransform: rotate(angle);trf:sctransform: scale(xy);trf:scxtransform: scaleX(x);trf:scytransform: scaleY(y);trf:skxtransform: skewX(angle);trf:skytransform: skewY(angle);trf:ttransform: translate(xy);trf:txtransform: translateX(x);trf:tytransform: translateY(y);trfotransform-origin:;trfstransform-style:preserve-3d;trstransition:prop time;trsdetransition-delay:time;trsdutransition-duration:time;trsptransition-property:prop;trstftransition-timing-function:tfunc;ususer-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;

XSL

 
tmtmatch

Alias of tm

tntname

Alias of tn

callapapiimpincchxsl:whenwh

Alias of xsl:when

otifparparevarvarewpkeyelemattrattrscpcovaleachfor

Alias of each

texcommsgfallnumnampresstripprocsortchoose+

Alias of xsl:choose>xsl:when+xsl:otherwise

xsl

Alias of !!!+xsl:stylesheet[version=1.0 { |}

----------- 全文完 -----------

09-01 20:03
查看更多