[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-573468-105":3,"detail-sidebar-cat-1-en-105":80,"doc-detail-573468-en":126},{"code":4,"msg":5,"data":6},0,"ok",{"site_id":7,"language":8,"slug":9,"title":10,"keywords":11,"description":12,"schema_data":13,"social_meta":73,"head_meta":75,"extra_data":77,"updated_unix":79},105,"en","emmet-cheat-sheet-2017-03","Emmet - Cheat Sheet (2017-03)","","Emmet Cheat Sheet provides a structured reference for HTML and related workflow shortcuts, covering core syntax operators (child, sibling, climb-up, grouping) and powerful shorthand for repetition, naming, and numbering. It details how to generate IDs, classes, custom attributes, and text quickly, then expands to HTML building blocks such as common tags, links, metadata, styles, scripts, images, and layout-oriented elements. The sheet also outlines broader CSS features and layout utilities for fast page construction.",{"@graph":14,"@context":72},[15,34,55],{"@type":16,"itemListElement":17},"BreadcrumbList",[18,23,27,31],{"item":19,"name":20,"@type":21,"position":22},"https://docshare.wps.com","Home","ListItem",1,{"item":24,"name":25,"@type":21,"position":26},"https://docshare.wps.com/template/","Template",2,{"item":28,"name":29,"@type":21,"position":30},"https://docshare.wps.com/template/presentations/","Presentations",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/template/emmet-cheat-sheet-2017-03/573468/",4,{"url":32,"name":10,"@type":35,"image":36,"author":41,"headline":10,"publisher":44,"fileFormat":47,"inLanguage":8,"description":12,"dateModified":48,"datePublished":49,"encodingFormat":47,"isAccessibleForFree":50,"interactionStatistic":51},"DigitalDocument",{"url":37,"@type":38,"width":39,"height":40},"https://docshare.wps.com/thumbnails/emmet-cheat-sheet-2017-03/573468.png","ImageObject",442,249,{"name":42,"@type":43},"pop out","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-10-17","2026-10-14",true,{"@type":52,"interactionType":53,"userInteractionCount":30},"InteractionCounter",{"@type":54},"ViewAction",{"@type":56,"mainEntity":57},"FAQPage",[58,64,68],{"name":59,"@type":60,"acceptedAnswer":61},"What are the main Emmet syntax operators for building nested HTML quickly?","Question",{"text":62,"@type":63},"Use operators like Child (>) to nest, Sibling (+) to create same-level elements, Climb-up (^) to move up the hierarchy, and Grouping (()) to combine structures.","Answer",{"name":65,"@type":60,"acceptedAnswer":66},"How does Emmet handle repeating elements and automatic numbering?",{"text":67,"@type":63},"Use multiplication (*) to repeat nodes and numbering variables like $ to generate sequential values, including combinations with attributes and class names.",{"name":69,"@type":60,"acceptedAnswer":70},"How can Emmet generate IDs, classes, and custom attributes in HTML?",{"text":71,"@type":63},"Declare IDs and classes using # and ., and add custom attributes via bracket syntax like [title=\"...\"] or by specifying multiple key-value pairs directly in the selector.","https://schema.org",{"og:url":32,"og:type":74,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":76,"canonical":32},"index,follow",{"doc_id":78,"site_id":7},573468,1792023031,{"code":4,"msg":81,"data":82},"success",[83,87,92,97,102,107,112,117,122],{"id":84,"doc_module":22,"doc_module_name":25,"category_name":29,"show_sort_weight":85,"slug":86},11,90,"presentations",{"id":88,"doc_module":22,"doc_module_name":25,"category_name":89,"show_sort_weight":90,"slug":91},12,"Resumes",80,"resumes",{"id":93,"doc_module":22,"doc_module_name":25,"category_name":94,"show_sort_weight":95,"slug":96},14,"Invoices",70,"invoices",{"id":98,"doc_module":22,"doc_module_name":25,"category_name":99,"show_sort_weight":100,"slug":101},15,"Posters",60,"posters",{"id":103,"doc_module":22,"doc_module_name":25,"category_name":104,"show_sort_weight":105,"slug":106},16,"Social Media",50,"social-media",{"id":108,"doc_module":22,"doc_module_name":25,"category_name":109,"show_sort_weight":110,"slug":111},17,"Forms",40,"forms",{"id":113,"doc_module":22,"doc_module_name":25,"category_name":114,"show_sort_weight":115,"slug":116},18,"Letters",30,"letters",{"id":118,"doc_module":22,"doc_module_name":25,"category_name":119,"show_sort_weight":120,"slug":121},21,"Paper Templates",5,"papers-templates",{"id":123,"doc_module":22,"doc_module_name":25,"category_name":124,"show_sort_weight":4,"slug":125},158,"General","general-158",{"code":4,"msg":81,"data":127},{"doc_id":78,"user_id":128,"nickname":42,"user_avatar":129,"doc_module":22,"category_id":84,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":30,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":135,"language":136,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":137,"faqs":138,"seo_title":139,"seo_description":12,"update_tm":140,"read_time":141},962090760408,"https://ap-avatar.wpscdn.com/davatar_085a072bc5b1113ac321206ff7593b45","1  \nEmmet | Cheat Sheet (2017-03)  \n Syntax  .  .  .  .  .  .  .  . 1   \nChild: >  .  .  .  .  .  .  .  .  .  .  . 1  \nSibling: +  .  .  .  .  .  .  .  .  .  . 1  \nClimb-up: ^  .  .  .  .  .  .  .  . 1  \nGrouping: ()  ........ 1  \nMultiplication: *  ......2  \nNaming and numbering: $ 2  \nID and CLASS attributes  ..2 Custom attributes  .....2  \nText: {}  ........... 2  \nImplicit tag names  .....2  \nHTML  .  .  .  .  .  .  .  . 3  \nForm, Input, Button  .  .  .  .4  \nCSS  .  .  .  .  .  .  .  .  . 7  \nVisual Formatting  .....7  \nMargin & Padding  .....9  \nBox Sizing  .  .  .  .  .  .  .  .  . 9  \nFont  .  .  .  .  .  .  .  .  .  .  .  . 9  \nText  .  .  .  .  .  .  .  .  .  .  .  . 11  \nBackground  .  .  .  .  .  .  . 13  \nColor  .  .  .  .  .  .  .  .  .  .  . 14  \nGenerated content  .  .  .  . 14  \nOutline  .  .  .  .  .  .  .  .  .  . 15  \nTables  .  .  .  .  .  .  .  .  .  . 15  \nBorder  .  .  .  .  .  .  .  .  .  . 15  \nLists  .  .  .  .  .  .  .  .  .  .  . 18  \nPrint  .  .  .  .  .  .  .  .  .  .  . 18  \nOthers  .  .  .  .  .  .  .  .  .  . 18  \nAnimation  .  .  .  .  .  .  .  . 19  \nFlex  .  .  .  .  .  .  .  .  .  .  .  . 20  \nTransform, Transition  .  . 21  \nXSL  .  .  .  .  .  .  .  . 22  \nHTML DOCTYPES  . 23  \n[http://docs](http://docs)  . emmet  . io/  \nSYNTAX Child: >  \nnav>ul>li  \n\u003Cnav>  \n\u003Cul>\u003Cli>\u003C/li>  \n\u003C/ul>\u003C/nav>  \nSibling: +  \ndiv+p+bq  \n\u003Cdiv>\u003C/div>  \n\u003Cp>\u003C/p>  \n\u003Cblockquote>\u003C/blockquote>  \nClimb-up: ^  \ndiv+div>p>span+em^bq  \n\u003Cdiv>\u003C/div>  \n\u003Cdiv>  \n\u003Cp>\u003Cspan>\u003C/span>\u003Cem>\u003C/em>\u003C/p>  \n\u003Cblockquote>\u003C/blockquote>\u003C/div>  \ndiv+div>p>span+em^^bq \u003Cdiv>\u003C/div>\u003Cdiv>  \n\u003Cp>\u003Cspan>\u003C/span>\u003Cem>\u003C/em>\u003C/p>\u003C/div>  \n\u003Cblockquote>\u003C/blockquote>  \nGrouping: ()  \ndiv>(header>ul>li*2>a)+footer>p  \n\u003Cdiv>  \n\u003Cheader>  \n\u003Cul>  \n\u003Cli>\u003Ca href=\"\">\u003C/a>\u003C/li>  \n\u003Cli>\u003Ca href=\"\">\u003C/a>\u003C/li>\u003C/ul>  \n\u003C/header>  \n\u003Cfooter>  \n\u003Cp>\u003C/p>  \n\u003C/footer>\u003C/div>  \n(div>dl>(dt+dd)*3)+footer>p  \n\u003Cdiv>  \n\u003Cdl>  \n\u003Cdt>\u003C/dt>  \n\u003Cdd>\u003C/dd>  \n\u003Cdt>\u003C/dt>  \n\u003Cdd>\u003C/dd>  \n\u003Cdt>\u003C/dt>  \n\u003Cdd>\u003C/dd>  \n\u003C/dl>\u003C/div>\u003Cfooter>  \n\u003Cp>\u003C/p>\u003C/footer>  \n2  \nMultiplication: *  \nul>li*5  \n\u003Cul>\u003Cli>\u003C/li>  \n\u003Cli>\u003C/li>  \n\u003Cli>\u003C/li>  \n\u003Cli>\u003C/li>  \n\u003Cli>\u003C/li>\u003C/ul>  \nNaming and numbering: $  \nul>li.sample$*5  \n\u003Cul>  \n\u003Cli class=\"sample1\">\u003C/li>  \n\u003Cli class=\"sample2\">\u003C/li>  \n\u003Cli class=\"sample3\">\u003C/li>  \n\u003Cli class=\"sample4\">\u003C/li>  \n\u003Cli class=\"sample5\">\u003C/li>\u003C/ul>  \nh$[title=topic$]{Headline $}*3  \n\u003Ch1 title=\"topic1\">Headline 1\u003C/h1>  \n\u003Ch2 title=\"topic2\">Headline 2\u003C/h2>  \n\u003Ch3 title=\"topic3\">Headline 3\u003C/h3>  \nul>li.item$$$*5  \n\u003Cul>  \n\u003Cli class=\"item001\">\u003C/li>  \n\u003Cli class=\"item002\">\u003C/li>  \n\u003Cli class=\"item003\">\u003C/li>  \n\u003Cli class=\"item004\">\u003C/li>  \n\u003Cli class=\"item005\">\u003C/li>\u003C/ul>  \nul>li.item$@-*5  \n\u003Cul>  \n\u003Cli class=\"item5\">\u003C/li>  \n\u003Cli class=\"item4\">\u003C/li>  \n\u003Cli class=\"item3\">\u003C/li>  \n\u003Cli class=\"item2\">\u003C/li>  \n\u003Cli class=\"item1\">\u003C/li>\u003C/ul>  \nul>li.item$@3*5  \n\u003Cul>  \n\u003Cli class=\"item3\">\u003C/li>  \n\u003Cli class=\"item4\">\u003C/li>  \n\u003Cli class=\"item5\">\u003C/li>  \n\u003Cli class=\"item6\">\u003C/li>  \n\u003Cli class=\"item7\">\u003C/li>\u003C/ul>  \nID and CLASS attributes  \n\\#header  \n\u003Cdiv id=\"header\">\u003C/div>  \n.title  \n\u003Cdiv class=\"title\">\u003C/div>  \nform\\#search.wide  \n\u003Cform id=\"search\" class=\"wide\">\u003C/ form>  \np.class1.class2.class3  \n\u003Cp class=\"class1 class2 class3\">\u003C/p>  \nCustom attributes  \np[title=\"Hello world\"]  \n\u003Cp title=\"Hello world\">\u003C/p>  \ntd[rowspan=2 colspan=3 title]  \n\u003Ctd rowspan=\"2\" colspan=\"3\"title=\"\">\u003C/td>  \n[a=‘value1‘ b=\"value2\"]  \n\u003Cdiv a=\"value1\" b=\"value2\">\u003C/div>  \nText: {}  \na{Click me}  \n\u003Ca href=\"\">Click me\u003C/a>  \np>{Click }+a{here}+{ to continue}  \n\u003Cp>Click \u003Ca href=\"\">here\u003C/a> to continue\u003C/p>  \nImplicit tag names  \n.class  \n\u003Cdiv class=\"class\">\u003C/div>  \nem> .class  \n\u003Cem>\u003Cspan class=\"class\">\u003C/span>\u003C/ em>  \nul> .class  \n\u003Cul>  \n\u003Cli class=\"class\">\u003C/li>\u003C/ul>  \ntable> . row> .col  \n\u003Ctable>  \n\u003Ctr class=\"row\">  \n\u003Ctd class=\"col\">\u003C/td>\u003C/tr>  \n\u003C/table>  \n3  \nHTML  \nAll unknown abbreviations will be transformed to tag, [e.g. foo](e.g. foo) → \u003Cfoo>\u003C/foo> .  \na  \n\u003Ca href=\"\">\u003C/a>  \na:link  \n\u003Ca href=\"[http://\">\u003C/a>](http://\">\u003C/a>)  \na:mail  \n\u003Ca href=\"mailto:\">\u003C/a>  \nabbr  \n\u003Cabbr title=\"\">\u003C/abbr> ","cbCaijBMnOQeRxKp","https://ap.wps.com/l/cbCaijBMnOQeRxKp","pdf",262380,24,"English","# Syntax\n## Core operators\n## Repetition, naming, and numbering\n## Attributes and text\n# HTML\n## Common tags and attributes\n# CSS and layout\n## Visual formatting\n## Flex, transforms, and animation","[{\"question\":\"What are the main Emmet syntax operators for building nested HTML quickly?\",\"answer\":\"Use operators like Child (\\u003e) to nest, Sibling (+) to create same-level elements, Climb-up (^) to move up the hierarchy, and Grouping (()) to combine structures.\"},{\"question\":\"How does Emmet handle repeating elements and automatic numbering?\",\"answer\":\"Use multiplication (*) to repeat nodes and numbering variables like $ to generate sequential values, including combinations with attributes and class names.\"},{\"question\":\"How can Emmet generate IDs, classes, and custom attributes in HTML?\",\"answer\":\"Declare IDs and classes using # and ., and add custom attributes via bracket syntax like [title=\\\"...\\\"] or by specifying multiple key-value pairs directly in the selector.\"}]","Emmet - Cheat Sheet (2017-03) | PDF",1791940388,8]