Emmet 缩写语言速查reference 速查表仓库中的 HTML / CSS / XSL 片段全解【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference本文基于参考速查表Quick Reference仓库中的 Emmet 备忘清单 docs/emmet.md完整梳理 Emmet 的缩写语法规则以及它内置的 HTML、CSS、XSL 三套缩写速查表。读完本文后你可以用类 CSS 选择器语法一次性写出成片的嵌套 HTML 结构用单字母缩写快速展开常用 CSS 声明并直接复用表中的现成展开结果Doctype、表单控件、字体、边框、Flex 动画等在 VS Code、Sublime Text 等编辑器中获得即查即用的编码效率。1. Emmet 是什么、在哪些环境使用按 docs/emmet.md 开篇的定义Emmet 是一个用于提升 HTML 和 CSS 代码编写的 Web 开发人员工具包它允许你使用著名的 CSS 选择器以光速编写大型 HTML 代码块。清单中列出的常见使用入口有Visual Studio Code 内置的 Emmet 支持Sublime Text 的 Emmet 2 插件Coda 中的 EmmetAtom 的 Emmet 插件。在这类编辑器里你只需输入一个“缩写表达式”比如ulli.item$*3按下 Tab 或触发扩展快捷键Emmet 就会把它展开为完整的 HTML/CSS 片段。在 reference 仓库中这份 Emmet 清单属于“前端”类别速查表与 HTML 备忘清单 中引用的 HTML 速查表 相互配套仓库通过 package.json 中的refs-cli构建脚本把所有docs/*.md清单编译成静态网页导航页使用的 Emmet 图标见 assets/emmet.svg。2. Emmet 缩写的核心语法本节继承 docs/emmet.md “Emmet 语法”部分的全部示例。所有操作符都可以在一个表达式里组合使用。2.1 语法总览| 操作符 | 含义 | 示例 | | :- | :- | :- | |*| 乘法重复生成元素 |ulli*5| || 子代嵌套子元素 |navulli| || 兄弟并列同级元素 |divpbq| |#| 指定 id |#header| |.| 指定 class单独出现时隐含标签名 |.title| |[]| 自定义属性 |p[titleHello world]| |{}| 元素内文本 |a{Click me}| |$| 递增计数器配合重复使用 |ulli.item$*3| |^| 上升一层回到父级 |pspanem^bq| |()| 分组 |div(headerul)footer|2.2 乘法*在元素后追加*n表示重复生成该元素 n 次。ulli*5ul li/li li/li li/li li/li li/li /ul2.3 孩子表示子代关系生成嵌套结构。navullinav ul li/li /ul /nav2.4 兄弟表示同级兄弟元素。divpbqdiv/div p/p blockquote/blockquote2.5 ID 和 CLASS 属性#后接文本表示 id.后接文本表示 class可连续书写、与标签名组合。| 缩写 | 展开结果 | | :- | :- | |#header|div idheader/div| |.title|div classtitle/div| |form#search.wide|form idsearch classwide/form| |p.class1.class2.class3|p classclass1 class2 class3/p|2.6 隐式标签名称只写.class而不写标签名时Emmet 会按上下文推断父元素的“默认子标签”裸.class生成divem下默认子标签是spanul下默认是litable下则是trtd。.classdiv classclass/divem.classemspan classclass/span/emul.classul li classclass/li /ultable.row.coltable tr classrow td classcol/td /tr /table2.7 自定义属性用[]在标签后附加属性支持任意键值对省略值时生成空字符串属性。p[titleHello world]p titleHello world/ptd[rowspan2 colspan3 title]td rowspan2 colspan3 title/td[avalue1 bvalue2]div avalue1 bvalue2/div2.8 文本{}{}写入元素内容文本在兄弟链中后紧跟{}表示该文本作为前一个元素的兄弟文本节点。a{Click me}a hrefClick me/ap{Click }a{here}{ 继续}pClick a hrefhere/a 继续/p2.9 计数器$$是一个占位计数器与*重复使用时按迭代次数递增从 1 开始它可出现在 class、属性值或文本中多处$会同步替换。ulli.item$*3ul li classitem1/li li classitem2/li li classitem3/li /ulh$[titleitem$]{Header $}*3标签名中的$会让 h1/h2/h3 递增同时替换属性与文本h1 titleitem1Header 1/h1 h2 titleitem2Header 2/h2 h3 titleitem3Header 3/h3ulli.item$$$*3$$$零填充为 3 位ul li classitem001/li li classitem002/li li classitem003/li /ululli.item$-*3$-反向递减ul li classitem3/li li classitem2/li li classitem1/li /ululli.item$2*3$2从 2 开始递增ul li classitem2/li li classitem3/li li classitem4/li /ul2.10 上一层^表达式默认沿一直深入最后一层^表示“返回上一层再书写兄弟节点”每多一个^就再上升一层。divdivpspanem^bqdiv/div div pspan/spanem/em/p blockquote/blockquote /divdivdivpspanem^^bqdiv/div div pspan/spanem/em/p /div blockquote/blockquote2.11 分组()用括号把子表达式打包配合*可以让整组结构一起重复。div(headerulli*2a)footerpdiv header ul lia href/a/li lia href/a/li /ul /header footer p/p /footer /div(divdl(dtdd)*4)footerpdiv dl dt/dt dd/dd dt/dt dd/dd dt/dt dd/dd dt/dt dd/dd /dl /div footer p/p /footer3. HTML 缩写速查表以下是 docs/emmet.md 中 “HTML” 部分收录的全部内置缩写。这些缩写在 HTML 语境下直接输入即可展开展开结果中的空值如href是留给光标或占位符填写的位置。3.1 文档模板与 Doctype!或者html:5!DOCTYPE html html langen head meta charsetUTF-8 / titleDocument/title /head body /body /htmldoc别名html(headmeta[charset${charset}]title{${1:Document}})bodyhtml head meta charsetUTF-8 / titleDocument/title /head body /body /htmldoc4别名html(headmeta[http-equivContent-Type contenttext/html;charset${charset}]title{${1:Document}})bodyhtml head meta http-equivContent-Type contenttext/html;charsetUTF-8 / titleDocument/title /head body /body /htmlhtml:4t别名!!!4tdoc4[lang${lang}]!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd html langen head meta http-equivContent-Type contenttext/html;charsetUTF-8 / titleDocument/title /head body /body /htmlhtml:4s别名!!!4sdoc4[lang${lang}]!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd html langen head meta http-equivContent-Type contenttext/html;charsetUTF-8 / titleDocument/title /head body /body /htmlhtml:xt别名!!!xtdoc4[xmlnshttp://www.w3.org/1999/xhtml xml:lang${lang}]!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlnshttp://www.w3.org/1999/xhtml xml:langen head meta http-equivContent-Type contenttext/html;charsetUTF-8 / titleDocument/title /head body /body /htmlhtml:xs别名!!!xsdoc4[xmlnshttp://www.w3.org/1999/xhtml xml:lang${lang}]!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlnshttp://www.w3.org/1999/xhtml xml:langen head meta http-equivContent-Type contenttext/html;charsetUTF-8 / titleDocument/title /head body /body /htmlhtml:xxs别名!!!xxsdoc4[xmlnshttp://www.w3.org/1999/xhtml xml:lang${lang}]!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd html xmlnshttp://www.w3.org/1999/xhtml xml:langen head meta http-equivContent-Type contenttext/html;charsetUTF-8 / titleDocument/title /head body /body /htmlhtml:5别名!!!doc[lang${lang}]展开结果同!。仅生成 Doctype 的缩写| 缩写 | 展开结果 | | :- | :- | |!!!|!DOCTYPE html| |!!!4t|!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd| |!!!4s|!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd| |!!!xt|!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd| |!!!xs|!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd| |!!!xxs|!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd|html:xmlhtml xmlnshttp://www.w3.org/1999/xhtml/html3.2 常用标签与资源声明| 缩写 | 展开结果 | | :- | :- | |a|a href/a| |a:link|a hrefhttp:///a| |a:mail|a hrefmailto:/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 dirrtl/bdo| |bdo:l|bdo dirltr/bdo| |col|col /| |link|link relstylesheet href /| |link:css|link relstylesheet hrefstyle.css /| |link:print|link relstylesheet hrefprint.css mediaprint /| |link:favicon|link relshortcut icon typeimage/x-icon hreffavicon.ico /| |link:touch|link relapple-touch-icon hreffavicon.png /| |link:rss|link relalternate typeapplication/rssxml titleRSS hrefrss.xml /| |link:atom|link relalternate typeapplication/atomxml titleAtom hrefatom.xml /| |link:import, link:im|link relimport hrefcomponent.html /| |meta|meta /| |meta:utf|meta http-equivContent-Type contenttext/html;charsetUTF-8 /| |meta:win|meta http-equivContent-Type contenttext/html;charsetwindows-1251 /| |meta:vp|meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0 /| |meta:compat|meta http-equivX-UA-Compatible contentIE7 /| |style|style/style| |script|script/script| |script:src|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 /| |source:srcset, src:s|source srcset /| |source:media, src:m|source media(min-width: ) srcset /| |source:type, src:t|source srcset typeimage/ /| |source:sizes, src:z|source sizes srcset /| |source:media:type, src:mt|source media(min-width: ) srcset typeimage/ /| |source:media:sizes, src:mz|source media(min-width: ) sizes srcset /| |source:sizes:type, src:zt|source sizes srcset typeimage/ /| |iframe|iframe src frameborder0/iframe| |embed|embed src type /| |object|object data type/object| |param|param name value /| |map|map name/map| |area|area shape coords href alt /| |area:d|area shapedefault href alt /| |area:c|area shapecircle coords href alt /| |area:r|area shaperect coords href alt /| |area:p|area shapepoly coords href alt /| |video|video src/video| |audio|audio src/audio| |isindex|isindex /| |keygen|keygen /| |command|command /| |marquee|marquee behavior direction/marquee| |menu:context, menu:c|menu typecontext/menu别名menu[typecontext] | |menu:toolbar, menu:t|menu typetoolbar/menu别名menu[typetoolbar] |响应式图片ri:系列| 缩写 | 等价别名 | 展开结果 | | :- | :- | :- | |ri:dpr, ri:d|img:s|img srcset src alt /| |ri:viewport, ri:v|img:z|img sizes srcset src alt /| |ri:art, ri:a|picsrc:mimg|picturesource media(min-width: ) srcset /img src alt //picture| |ri:type, ri:t|picsrc:timg|picturesource srcset typeimage/ /img src alt //picture|3.3 表单元素与控件| 缩写 | 展开结果 | | :- | :- | |form|form action/form| |form:get|form action methodget/form| |form:post|form action methodpost/form| |label|label for/label| |input|input typetext /| |inp|input typetext name id /| |input:hidden, input:h|input typehidden name /别名input[typehidden name] | |input:text, input:t|input typetext name id /别名inp | |input:search|input typesearch name id /别名inp[typesearch] | |input:email|input typeemail name id /别名inp[typeemail] | |input:url|input typeurl name id /别名inp[typeurl] | |input:password, input:p|input typepassword name id /别名inp[typepassword] | |input:datetime|input typedatetime name id /别名inp[typedatetime] | |input:date|input typedate name id /别名inp[typedate] | |input:datetime-local|input typedatetime-local name id /别名inp[typedatetime-local] | |input:month|input typemonth name id /别名inp[typemonth] | |input:week|input typeweek name id /别名inp[typeweek] | |input:time|input typetime name id /别名inp[typetime] | |input:tel|input typetel name id /别名inp[typetel] | |input:number|input typenumber name id /别名inp[typenumber] | |input:color|input typecolor name id /别名inp[typecolor] | |input:checkbox, input:c|input typecheckbox name id /别名inp[typecheckbox] | |input:radio, input:r|input typeradio name id /别名inp[typeradio] | |input:range【免费下载链接】reference面向开发者的技术速查清单Cheat Sheets集合整理常见技术、工具与开发流程帮助快速查阅关键信息提高开发效率。项目地址: https://gitcode.com/GitHub_Trending/referen/reference创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考