【说明】本系列博文是依据 Emmet 官方文档翻译的,原文地址为:http://docs.emmet.io/,部分内容已经在博主之前的博文中节选过,为方便已经收藏过之前博文的朋友,没有删除这些博文,仅将其完整的收录于本系列中。这一节其实没有什么可翻译的,只是为了保持文档的完整性,并且,这个表在实际使用时是很有用的。不过限于博客的排版格式,这里的呈献形式远不如原文。在此列出原文的地址(http://docs.emmet.io/cheat-sheet/),朋友们可以经常拿来参考:)
语法
Child: >
nav>ul>liSibling: +
div+p+bqClimb-up: ^
div+div>p>span+em^bq
Grouping: ()
div>(header>ul>li*2>a)+footer>pMultiplication: *
ul>li*5Item numbering: $
ul>li.item$*5Header 1
Header 2
Header 3
ul>li.item$$$*5ID and CLASS attributes
#header.titleform#search.widep.class1.class2.class3Custom 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
.classem>.classul>.classHTML
全部未知的缩写都被转换成标签,如 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:hiddenAlias of input[type=hidden name]
input:hAlias of input:hidden
input:text, input:tAlias of inp
text" name="" id="" />input:searchAlias of inp[type=search]
input:emailAlias of inp[type=email]
input:urlAlias of inp[type=url]
input:passwordAlias of inp[type=password]
input:pAlias of input:password
input:datetimeAlias of inp[type=datetime]
input:dateAlias of inp[type=date]
input:datetime-localAlias of inp[type=datetime-local]
input:monthAlias of inp[type=month]
input:weekAlias of inp[type=week]
input:timeAlias of inp[type=time]
input:numberAlias of inp[type=number]
input:colorAlias of inp[type=color]
input:checkboxAlias of inp[type=checkbox]
input:cAlias of input:checkbox
input:radioAlias of inp[type=radio]
input:rAlias of input:radio
input:rangeAlias of inp[type=range]
input:fileAlias of inp[type=file]
input:fAlias of input:file
input:submitinput:sAlias of input:submit
input:imageinput:iAlias of input:image
input:buttoninput:bAlias of input:button
input:resetAlias of input:button[type=reset]
selectoptiontextareamenu:contextAlias of menu[type=context]>
menu:cAlias of menu:context
menu:toolbarAlias of menu[type=toolbar]>
menu:tAlias of menu:toolbar
videoaudiohtml:Alias of blockquoteacrAlias of acronym
figAlias of figure
figcAlias of figcaption
ifrAlias of iframe
embAlias of embed
objAlias of object
srcAlias of source
capAlias of caption
colgAlias of colgroup
fst, fsetAlias of fieldset
btnAlias of button
optgAlias of optgroup
optAlias of option
tareaAlias of textarea
legAlias of legend
sectAlias of section
artAlias of article
hdrAlias of header
ftrAlias of footer
adrAlias of address
dlgAlias of dialog
strAlias of strong
progAlias of progress
datagAlias of datagrid
datalAlias of datalist
kgAlias of keygen
outAlias of output
detAlias of details
cmdAlias of command
docAlias of html>(head>meta[charset=UTF-8]+title{${1:Document}})+body
doc4Alias of html>(head>meta[http-equiv="Content-Type" content="text/html;charset=${charset}"]+title{${1:Document}})
html:4tAlias of !!!4t+doc4[lang=${lang}]
html:4sAlias of !!!4s+doc4[lang=${lang}]
html:xtAlias of !!!xt+doc4[
html:xsAlias of !!!xs+doc4[
html:xxsAlias of !!!xxs+doc4[
html:5Alias of !!!+doc[lang=${lang}]
ol+Alias of ol>li
Alias of ul>li
Alias of dl>dt+dd
- map+
Alias of map>area
table+Alias of table>tr>td
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(0, 0, 0);bxsh:rabox-shadow:inset h v blur spread rgba(0, 0, 0, .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(0, 0, 0);tsh:ratext-shadow:h v blur rgba(0, 0, 0, .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(0, 0, 0);c:racolor:rgba(0, 0, 0, .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.1, 0.7, 1.0, 0.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(x, y);trf:scxtransform: scaleX(x);trf:scytransform: scaleY(y);trf:skxtransform: skewX(angle);trf:skytransform: skewY(angle);trf:ttransform: translate(x, y);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
Alias of tm
tntnameAlias of tn
callapapiimpincchxsl:whenwhAlias of xsl:when
otifparparevarvarewpkeyelemattrattrscpcovaleachforAlias of each
texcommsgfallnumnampresstripprocsortchoose+Alias of xsl:choose>xsl:when+xsl:otherwise
xslAlias of !!!+xsl:stylesheet[version=1.0 { |}