8/11/2015 Cheat Sheet Syntax - Myany.city

Transcription

8/11/2015Cheat SheetSyntaxChild: nav 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 Multiplication: *ul li*5 ul li /li li /li li /li li /li li /li /ul Item numbering: http://docs.emmet.io/cheat-sheet/1/19

8/11/2015Cheat Sheetul li.item *5h [title item ]{Header }*3 ul li li li li li /ul h1 title "item1" Header 1 /h1 h2 title "item2" Header 2 /h2 h3 title "item3" Header 3 /h3 class "item1" /li class "item2" /li class "item3" /li class "item4" /li class "item5" /li 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 @3*5 ul li li li li li /ul ul li.item *5 ul class "item5" /li class "item4" /li class "item3" /li class "item2" /li class "item1" /li 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.title div id "header" /div 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"]td[rowspan 2 colspan 3 title] p title "Hello world" /p td rowspan "2" colspan "3" title "" /td [a 'value1' b "value2"] div a "value1" b "value2" /div Text: {}a{Click me}p {Click } a{here} { to continue} a href "" Click me /a p Click a href "" here /a to continue /p Implicit tag names.classem .class div class "class" /div 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 HTMLAll unknown abbreviations will be transformed to tag, e.g. foo foo /foo .http://docs.emmet.io/cheat-sheet/2/19

8/11/2015Cheat Sheet!aa:link a href " " /a Alias of html:5a:mail !DOCTYPE html html lang "en" head meta charset "UTF-8" / a href "http:// " /a abbr a href "mailto: " /a acronym, acr abbr title " " /abbr base acronym title " " /acronym title Document /title basefont /head body base href " " / br basefont / frame /body /html br / hr frame / bdo hr / bdo:r bdo dir " " /bdo bdo:lcol bdo dir "ltr" /bdo bdo dir "rtl" /bdo link col / link:csslink:print link rel "stylesheet" href " style .css" / link:touchfavicon.png " / link:favicon link rel "stylesheet" href " print .css" link rel "shortcut icon" type "image/x-icon"media "print" / href " favicon.ico " / link:rss link rel "apple-touch-icon" href " link rel "stylesheet" href " " / link:atom link rel "alternate"type "application/rss xml" title "RSS" href " link rel "alternate"type "application/atom xml" title "Atom" href "rss.xml " / link:import, link:immeta link rel "import" href " component .html" / meta:winmeta:utf meta / meta:vp meta http-equiv "Content-Type"content "text/html;charset windows-1251" / script:src script src " " /script img:srcset, img:simg:sizes, img:z img srcset " " src " " alt " " / source, src source src " " type " " / source:media, src:m source media "( min-width: img sizes " " srcset " " src " " alt " " / source:src, src:sc source / source:type, src:t)" srcset " " / meta:compat meta http-equiv "X-UA-Compatible" content "device-width , user-scalable no , initialscale 1.0 " / script /script meta http-equiv "Content-Type"content "text/html;charset UTF-8" / meta name "viewport" content "width scale 1.0 , maximum-scale 1.0 , minimum-scriptatom.xml " / source srcset " " type " image/ " / IE 7 " / style style /style img img src " " alt " " / picture picture /picture source:srcset, src:s source srcset " " / source:sizes, src:z source sizes " " srcset " " / source:media:type, src:mt source media "( min-width:)" srcset " "type " image/ " / http://docs.emmet.io/cheat-sheet/3/19

8/11/2015Cheat Sheetsource:media:sizes, src:mz source media "( min-width:source:sizes:type, src:zt)" sizes " "iframe iframe src " " frameborder "0" /iframe source sizes " " srcset " " type " image/ " / srcset " " / embed embed src " " type " " / object object data " " type " " /object area area shape " " coords " " href " " alt " " / area:r area shape "rect" coords " " href " " alt " "/ param param name " " value " " / area:d area shape "default" href " " alt " " / area:p area shape "poly" coords " " href " " alt " "/ map map name " " /map area:c area shape "circle" coords " " href " " alt "" / form form action " " /form form:get form action " " method "get" /form form:post form action " " method "post" /form inplabel label for " " /label input:hidden, input:h input type " text " name " " id " " / input:searchinput input type " text " / input:text, input:tAlias of input[type hidden name]Alias of inp input type "hidden" name " " / input type " text " name " " id " " / input:emailinput:urlAlias of inp[type search]Alias of inp[type email]Alias of inp[type url] input type "search" name " " id " " / input type "email" name " " id " " / input type "url" name " " id " " / input:password, input:pinput:datetimeinput:dateAlias of inp[type password]Alias of inp[type datetime]Alias of inp[type date] input type "password" name " " id " " / input type "datetime" name " " id " " / input type "date" name " " id " " / input:datetime-localinput:monthinput:weekAlias of inp[type datetime-local]Alias of inp[type month]Alias of inp[type week] input type "datetime-local" name " " id " " / input type "month" name " " id " " / input type "week" name " " id " " / input:timeinput:telinput:numberAlias of inp[type time]Alias of inp[type tel]Alias of inp[type number] input type "time" name " " id " " / input type "tel" name " " id " " / input type "number" name " " id " " / input:colorinput:checkbox, input:cinput:radio, input:rAlias of inp[type color]Alias of inp[type checkbox]Alias of inp[type radio] input type "color" name " " id " " / input type "checkbox" name " " id " " / input type "radio" name " " id " " / input:rangeinput:file, input:fAlias of inp[type range]Alias of inp[type file] input type "range" name " " id " " / input type "file" name " " id " " / http://docs.emmet.io/cheat-sheet/input:submit, input:s input type "submit" value " " / input:image, input:i input type "image" src " " alt " " / 4/19

8/11/2015input:button, input:bCheat Sheetisindex input type "button" value " " / input:reset isindex / Alias of input:button[type reset] input type "reset" value " " / selectselect:disabled, select:d select name " " id " " /select option, opt option value " " /option Alias of select[disabled.] select name " " id " " disabled "disabled" /select textarea textarea name " " id " " cols " 30 " rows "10 " /textarea marqueemenu:context, menu:c marquee behavior " " direction " " /marquee videokeygenAlias of menu[type context] Alias of menu[type toolbar] menu type "context" /menu menu type "toolbar" /menu audio video src " " /video menu:toolbar, menu:thtml:xml audio src " " /audio command keygen / html xmlns "http://www.w3.org/1999/xhtml" /html button:submit, button:s, btn:s command / Alias of button[type submit] button type "submit" /button button:reset, button:r, btn:rbutton:disabled, button:d, btn:dfieldset:disabled, fieldset:d, fset:d, fst:dAlias of button[type reset]Alias of button[disabled.]Alias of fieldset[disabled.] button type "reset" /button button disabled "disabled" /button fieldset disabled "disabled" /fieldset bqfigfigcAlias of blockquoteAlias of figureAlias of figcaption blockquote /blockquote figure /figure figcaption /figcaption picifrembAlias of pictureAlias of iframeAlias of embed picture /picture iframe src " " frameborder "0" /iframe embed src " " type " " / objcapcolgAlias of objectAlias of captionAlias of colgroup object data " " type " " /object caption /caption colgroup /colgroup fst, fsetbtnoptgAlias of fieldsetAlias of buttonAlias of optgroup fieldset /fieldset button /button optgroup /optgroup tarealegsectAlias of textareaAlias of legendAlias of section textarea name " " id " " cols " 30 " rows " legend /legend section /section 10 " /textarea http://docs.emmet.io/cheat-sheet/5/19

8/11/2015artCheat SheethdrftrAlias of articleAlias of headerAlias of footer article /article header /header footer /footer adrdlgstrAlias of addressAlias of dialogAlias of strong address /address dialog /dialog strong /strong progmntemAlias of progressAlias of mainAlias of template progress /progress main /main template /template datagdatalAlias of datagridAlias of datalist datagrid /datagrid datalist /datalist kgAlias of keygen keygen / outAlias of output output /output detcmdAlias of details details /details docAlias of commandAlias of html command / (head meta[charset {charset}] title{ {1:Document}}) body html head meta charset "UTF-8" / title Document /title /head body /body /html http://docs.emmet.io/cheat-sheet/6/19

8/11/2015Cheat Sheetdoc4ri:dpr, ri:dri:viewport, ri:vAlias of html (head meta[http-Alias of img:sAlias of img:zequiv "Content-Type"content "text/html;charset {charset}"] ti img srcset " " src " " alt " " / img sizes " " srcset " " src " " alt " " / tle{ {1:Document}}) body html head meta http-equiv "Content-Type"content "text/html;charset UTF-8" / title Document /title /head body ri:art, ri:ari:type, ri:tAlias of pic src:m imgAlias of pic src:t img picture source media "( min-width: picture )" srcset " "/ img src " " alt " " / /picture source srcset " " type " image/ " / img src " " alt " " / /picture html:4tAlias of !!!4t doc4[lang {lang}] /body /html !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML oose.dtd" html lang "en" head meta http-equiv "Content-Type"content "text/html;charset UTF-8" / title Document /title /head body /body /html html:4shtml:xtAlias of !!!4s doc4[lang {lang}] !DOCTYPE HTML PUBLIC "-//W3C//DTD d" html lang "en" head meta http-equiv "Content-Type"content "text/html;charset UTF-8" / title Document /title /head body /body /html http://docs.emmet.io/cheat-sheet/html:xsAlias ofAlias of!!!xt doc4[xmlns http://www.w3.org/1999/xh!!!xs doc4[xmlns http://www.w3.org/1999/xhtml xml:lang {lang}]tml xml:lang {lang}] !DOCTYPE html PUBLIC "-//W3C//DTD XHTML TD/xhtml1transitional.dtd" html xmlns "http://www.w3.org/1999/xhtml"xml:lang "en" head meta http-equiv "Content-Type"content "text/html;charset UTF-8" / !DOCTYPE html PUBLIC "-//W3C//DTD XHTML ml1strict.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 title Document /title /head body /head body /body /html /body /html 7/19

8/11/2015Cheat Sheethtml:xxsAlias of!!!xxs doc4[xmlns http://www.w3.org/1999/xhtml xml:lang {lang}] !DOCTYPE html PUBLIC "-//W3C//DTD ml11.dtd" html xmlns "http://www.w3.org/1999/xhtml"xml:lang "en" head meta http-equiv "Content-Type"content "text/html;charset UTF-8" / html:5ol Alias of !!! doc[lang {lang}]Alias of ol li !DOCTYPE html html lang "en" head meta charset "UTF-8" / ol title Document /title li /li /ol ul Alias of ul li /head body ul li /li /ul /body /html dl title Document /title /head body Alias of dl dt dd /body /html dt /dt dd /dd /dl map dl table colgroup , colg Alias of map areaAlias of table tr tdAlias of colgroup col map name " " area shape " " coords " " href " " alt " "/ /map table tr colgroup col / /colgroup td /td /tr /table tr Alias of tr td tr td /td /tr select optgroup , optg pic Alias of select optionAlias of optgroup optionAlias of picture source:srcset img select name " " id " " option value " " /option /select optgroup option value " " /option /optgroup picture source srcset " " / img src " " alt " " / /picture !!!!!!4t !DOCTYPE html !!!xt !DOCTYPE html PUBLIC "-//W3C//DTD XHTML TD/xhtml1transitional.dtd" !!!4s !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML oose.dtd" !!!xs !DOCTYPE html PUBLIC "-//W3C//DTD XHTML ml1strict.dtd" !DOCTYPE HTML PUBLIC "-//W3C//DTD d" !!!xxs !DOCTYPE html PUBLIC "-//W3C//DTD ml11.dtd" c !--http://docs.emmet.io/cheat-sheet/ {child} -- 8/19

8/11/2015Cheat Sheetcc:ie6cc:ie !--[if lte IE 6] {child} ![endif]-- cc:noie !--[if IE] {child} ![endif]-- !--[if !IE] !-- {child} !-- ![endif]-- CSSCSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h ov-h ovh oh.If abbreviation wasn’t found, it is transformed into property name: foo-bar foo-bar: ;You can prefix abbreviations with hyphen to produce vendor prefixed properties: -fooVisual Formattingposposition: relative position: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 clear:left;fl:rfloat:right;clclear: both ;cl:rclear:right;cl:bclear:both;ddisplay: block ;d

8/11/2015 Cheat Sheet http://docs.emmet.io/cheat-sheet/ 5/19. input:button, input:b input type "button" value " " / isindex isindex / input:reset. Alias of input:button[type reset] input type "reset" value " " / select select name " " id " " /select select:disabled, select:d. Alias of select[disabled.]