Transcription
1Emmet Cheat Sheet(2017-03)Syntax . . . . . . . . 1Child: . . . . . . . . . . 1Sibling: . . . . . . . . . 1Climb-up: . . . . . . . . 1Grouping: () . . . . . . . . 1Multiplication: * . . . . . . 2Naming and numbering: 2ID and CLASS attributes . 2Custom attributes . . . . . 2Text: {} . . . . . . . . . . . 2Implicit tag names . . . . 2HTML . . . . . . . . 3Form, Input, Button . . . . 4CSS . . . . . . . . . 7Visual Formatting . . . . . 7Margin & Padding . . . . . 9Box Sizing . . . . . . . . . 9Font . . . . . . . . . . . . 9Text . . . . . . . . . . . . 11Background . . . . . . . 13Color . . . . . . . . . . . 14Generated content . . . . 14Outline . . . . . . . . . . 15Tables . . . . . . . . . . 15Border . . . . . . . . . . 15Lists . . . . . . . . . . . 18Print . . . . . . . . . . . 18Others . . . . . . . . . . 18Animation . . . . . . . . 19Flex . . . . . . . . . . . . 20Transform, Transition . . 21XSL . . . . . . . . .22HTML DOCTYPES . . 23http://docs.emmet.io/Child: SYNTAXnav ul li nav ul li /li /ul /nav Sibling: div p bq div /div p /p blockquote /blockquote Climb-up: 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 Grouping: ()div (header ul li*2 a) footer p div header ul li a href "" /a /li li a href "" /a /li /ul /header footer p /p /footer /div (div dl (dt dd)*3) footer p div dl dt /dt dd /dd dt /dt dd /dd dt /dt dd /dd /dl /div footer p /p /footer
2Multiplication: *ul li*5 ul li /li li /li li /li li /li li /li /ul Naming and numbering: ul li.sample *5 ul li li li li li /ul class "sample1" /li class "sample2" /li class "sample3" /li class "sample4" /li class "sample5" /li h [title topic ]{Headline }*3 h1 title "topic1" Headline 1 /h1 h2 title "topic2" Headline 2 /h2 h3 title "topic3" Headline 3 /h3 ul li.item *5 ul li li li li li /ul class "item001" /li class "item002" /li class "item003" /li class "item004" /li class "item005" /li ul li.item @-*5 ul li li li li li /ul class "item5" /li class "item4" /li class "item3" /li class "item2" /li class "item1" /li ul li.item @3*5 ul li li li li li /ul class "item3" /li class "item4" /li class "item5" /li class "item6" /li class "item7" /li ID and CLASS attributes#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 Custom attributesp[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 Text: {}a{Click me} a href "" Click me /a p {Click } a{here} { to continue} p Click a href "" here /a tocontinue /p Implicit tag names.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
3HTMLAll unknown abbreviations will be transformed totag, e.g. foo foo /foo .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 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 "ContentType" content "text/html;charset windows-1251" / meta:vp meta name "viewport"content "width device-width, userscalable no, initial-scale 1.0,maximum-scale 1.0, minimumscale 1.0" / meta:compat meta http-equiv "X-UA-Compatible"content "IE 7" / bdo:lstylecolscriptlinkscript:src bdo dir "ltr" /bdo col / 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" / style /style script /script 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 "" /
4source: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 "" / Form, Input, Buttonform 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:text, input:t input type "text" name "" id ""/ input:search input type "search" name "" id ""/ input:email input type "email" name "" id ""/ mapinput:urlareainput:password, input:p map name "" /map 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 "" / input type "url" name "" id "" / input type "password" name ""id "" / input:datetime input type "datetime" name ""id "" / input:date input type "date" name "" id ""/ input:datetime-local input type "datetime-local"name "" id "" / input:month input type "month" name "" id ""/ input:week input type "week" name "" id ""/ input:time input type "time" name "" id ""/
en input type "tel" name "" id "" / input type "number" name "" id ""/ input type "color" name "" id ""/ input:checkbox, input:c input type "checkbox" name ""id "" / input:radio, input:r input type "radio" name "" id ""/ input:range input type "range" name "" id ""/ input:file, input:f input type "file" name "" id "" / audio src "" /audio html xmlns "http://www.w3.org/1999/xhtml" /html keygen / command command / button:submit, button:s, btn:s button type "submit" /button button:reset, button:r, btn:r button type "reset" /button button:disabled, button:d, btn:d button disabled "disabled" /button fieldset:disabled,fieldset:d, fset:d, fst:d fieldset disabled "disabled" /fieldset 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 "" / bq blockquote /blockquote fig figure /figure figc figcaption /figcaption isindexpicinput:resetifr isindex / input type "reset" value "" / select select name "" id "" /select select:disabled, select:d select name "" id ""disabled "disabled" /select picture /picture iframe src "" frameborder "0" /iframe emb embed src "" type "" / obj object data "" type "" /object option, optcaptextareacolg option value "" /option textarea name "" id "" cols "30"rows "10" /textarea marquee marquee behavior ""direction "" /marquee menu:context, menu:c menu type "context" /menu menu:toolbar, menu:t menu type "toolbar" /menu video video src "" /video caption /caption colgroup /colgroup fst, fset fieldset /fieldset btn button /button optg optgroup /optgroup tarea textarea name "" id "" cols "30"rows "10" /textarea
6leg legend /legend sect section /section art article /article hdr header /header ftr footer /footer adr address /address dlg dialog /dialog str strong /strong prog progress /progress mn main /main tem template /template datag datagrid /datagrid datal datalist /datalist kg keygen / out output /output det details /details cmd command / ri:dpr, ri:d img srcset "" src "" alt "" / ri:viewport, ri:v img sizes "" srcset "" src ""alt "" / ri:art, ri:a picture source media "(min-width: )"srcset "" / img src "" alt "" / /picture ri:type, ri:t picture source srcset "" type "image/"/ img src "" alt "" / /picture ol ol li /li /ol ul ul li /li /ul dl dl dt /dt dd /dd /dl map map name "" area shape "" coords ""href "" alt "" / /map table table tr td /td /tr /table colgroup , colg colgroup col / /colgroup tr tr td /td /tr select select name "" id "" option value "" /option /select optgroup , optg optgroup option value "" /option /optgroup pic picture source srcset "" / img src "" alt "" / /picture
7CSSfl:rfloat:right;CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h ov-h ovh oh.clIf abbreviation wasn’t found, it is transformed intoproperty name: foo-bar foo-bar: ;cl:nYou can prefix abbreviations with hyphen to producevendor-prefixed properties: -fooVisual :table-column-group;display:table-header-group;
vs:mv:hovs:mqv:czoo, oll;ov:aoverflow:auto;clip:auto;clip:rect(top right bottom ize:horizontal;rsz:vresize:vertical;curcursor: {pointer};
ft:;Box set hoff voff blurcolor;bxsh:rbox-shadow:inset hoff voff blurspread rgb(0, 0, 0);cur:tcursor:text;Margin & sh:nwmr:ambbox-shadow:inset h v blur spreadrgba(0, 0, 0, ttom:;Fontffont:;
10f fwfont:1em al;ff:tfont-family: „Times New Roman",Times, Baskerville, Georgia, serif;ff:vfont-family: Verdana, Geneva,sans-serif;fw:bfeffw:brfef:nfw:lrfef:egfs, y;font-family:monospace;font-family: Arial, „HelveticaNeue", Helvetica, smooth:never;font-smooth:always;
lfst:sctal:cfst:setal:rfst:etd, lign-last:right;text-decoration:none;text-decorati
Emmet Cheat Sheet (2017-03) Syntax . . . . . . . .1 Child: . . . . . . . . . . 1 . Sibling: . . . . . . . . . 1 . Climb-up: . . . . . . . .1 Grouping: . . . . . . . .1 Multiplication: * . . . . . .2 Naming and numbering: 2 ID File Size: 256KBPage Count: 24
