一、简介
1.Emmet是一个提高前端开发效率的编辑器插件，主要用于HTML和CSS的编写。它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。官网：https://www.emmet.io/
2.个人目前使用的是VS CODE编辑器。VsCode内置了Emmet语法,而且还有Emmet的语法提示。在后缀为.html/.css的文件中输入缩写后按Tab键即会自动生成相应代码。
3.注意：在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!
二、HTML
1.语法规则
E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个自定义属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。
E*N 代表生成N个E元素。
2.元素（Elements）
使用元素的名称和缩写，Emmet会自动转换成对应标签。
栗子：
div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail => <a href="mailto:"></a>
a:link => <a href="http://"></a>
base => <base href="">
br => <br>
c=> <!-- -->
link => <link rel="stylesheet" href="">
script:src => <script src=""></script>
form:get => <form action="" method="get"></form>
label => <label for=""></label>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id=""></select>
option => <option value=""></option>
bq => <blockquote></blockquote>
btn => <button></button>
btn:s => <button type="submit"></button>
btn:r => <button type="reset"></button>
3.文本操作符（Text）
div{这是一段文本} => <div>这是一段文本</div>
a{点我点我} => <a href="">点我点我</a>
4.属性操作符（Attribute operators）
（id=#，class=.）
div.test => <div class="test"></div>
div#page => <div id="page"></div>
p.my => <p class="my"></p>
input.name1.name2.name3 => <input type="text" class="name1 name2 name3">
隐式标签则会自动联想生成对应元素,根据配置规则不同生成的结果也不同。
.class => <div class="class"></div>
em>.class => <em><span class="class"></span></em>
table>.row>.col
=>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
自定义属性使用 E[attr1='' attr2='']
a[data1='test' data2=''] => <a href="" data1="test" data2=""></a>
5.嵌套操作符(Nesting operators)（嵌套操作符可以配合元素属性进行连写）
子级(>):生成左侧元素的子级元素
div#id2>ul>div#id3 =>
<div id="id2">
<ul>
<div id="id3"></div>
</ul>
</div>
同级(+):生成左侧元素的同级元素
div#id2>ul+div#id3 =>
<div id="id2">
<ul></ul>
<div id="id3"></div>
</div>
父级(+):生成左侧元素的父级元素的兄弟元素
div>p.parent>span.child^ul.brother^li =>
<div>
<p class="parent"><span class="child"></span></p>
<ul class="brother"></ul>
</div>
<li></li>
6.分组操作符(分组使用()来实现缩写的分离）
比如这个例子：如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级。
div>(ul>li+span)>a 在vs code中需要改成：div>(ul>li+span)a=>
<div>
<ul>
<li></li>
<span></span>
</ul>
<a href=""></a>
</div>
7.乘法操作符（*）
p>span*3 =>
<p>
<span></span>
<span></span>
<span></span>
</p>
(ul>li)*3=>
8.自动计数（$）
p>span.name${number_$}*3 =>
<p>
<span class="name1">number_1</span>
<span class="name2">number_2</span>
<span class="name3">number_3</span>
</p>
如果生成两位数则使用两个连续的$$，更多位数以此类推。
使用@修饰符，可以更改编号的升序、降序和基数（起始值）：
注意这个操作符在$之后添加，@-表示降序，@+表示升序,默认使用升序。@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到+-符号后。
ul>li.name$@-*3
<ul>
<li class="name3"></li>
<li class="name2"></li>
<li class="name1"></li>
</ul>
ul>li.number$@10*3
<ul>
<li class="number10"></li>
<li class="number11"></li>
<li class="number12"></li>
</ul>
9.模拟文本/随机文本(lorem)
Emmet内置了Lorem Ipsum功能来实现.loremN或者lipsumN,N表示生成的单词数,正整数.可以不填.
lorem3 => Lorem ipsum dolor.
lorem4 => Lorem ipsum dolor sit.
lorem5 => Lorem ipsum dolor sit amet.
(p>lorem4)*3 =>
<p>Lorem ipsum dolor sit.</p>
<p>Eos soluta sint impedit.</p>
<p>Accusamus ea quam nobis.</p>
例子：
div.nav>(nav#navbar>(ul>li>(a[href="/xxx/product/$" data-index=$]>lorem4)*5))+div.btn[type='button']>span{--}^^div#main
10.包装文本
自定义文本1
自定义文本1
自定义文本1
期望如下：
<nav>
<ul>
<li>自定义文本1</li>
<li>自定义文本2</li>
<li>自定义文本3</li>
</ul>
</nav>
实现步骤：
1.选中文本,按下ctrl+shift+p打开命令窗口输入Emmet:wrap.（sublime的快捷键为ctrl+shift+G）
2.选择Emmet:使用缩写进行包装(Wrap with Abbreviation)选项
3.输入缩写字符nav>ul>li*,按下回车键即可看到效果.(vs code默认不支持)
PS:
输入的缩写代码中*所在位置不同得到的效果也是不同的。
如果给的文本带有序号的情况,我们也是可以通过缩写“|t”来删除序号。如：nav>ul>li*|t
11.HTML缩写栗子：
缩写：a
<a href=""></a>
缩写：a:link
<a href="http://"></a>
缩写：a:mail
<a href="mailto:"></a>
缩写：abbr
<abbr title=""></abbr>
缩写：acronym
<acronym title=""></acronym>
缩写：base
<base href="" />
缩写：basefont
<basefont />
缩写：br
<br />
缩写：frame
<frame />
缩写：hr
<hr />
缩写：bdo
<bdo dir=""></bdo>
缩写：bdo:r
<bdo dir="rtl"></bdo>
缩写：bdo:l
<bdo dir="ltr"></bdo>
缩写：col
<col />
缩写：link
<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" />
缩写：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" />
缩写：meta
<meta />
缩写：meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
缩写：meta:win
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
缩写：meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
缩写：meta:compat
<meta http-equiv="X-UA-Compatible" content="IE=7" />
缩写：style
<style></style>
缩写：script
<script></script>
缩写：script:src
<script src=""></script>
缩写：img
<img src="" alt="" />
缩写：iframe
<iframe src="" frameborder="0"></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 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="" />
缩写：form
<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[type=hidden name]
<input type="hidden" name="" />
缩写：input:h
别名：input:hidden
<input type="hidden" name="" />
缩写：input:text, input:t
别名：inp
<input type="text" name="" id="" />
缩写：input:search
别名：inp[type=search]
<input type="search" name="" id="" />
缩写：input:email
别名：inp[type=email]
<input type="email" name="" id="" />
缩写：input:url
别名：inp[type=url]
<input type="url" name="" id="" />
缩写：input:password
别名：inp[type=password]
<input type="password" name="" id="" />
缩写：input:p
别名：input:password
<input type="password" name="" id="" />
缩写：input:datetime
别名：inp[type=datetime]
<input type="datetime" name="" id="" />
缩写：input:date
别名：inp[type=date]
<input type="date" name="" id="" />
缩写：input:datetime-local
别名：inp[type=datetime-local]
<input type="datetime-local" name="" id="" />
缩写：input:month
别名：inp[type=month]
<input type="month" name="" id="" />
缩写：input:week
别名：inp[type=week]
<input type="week" name="" id="" />
缩写：input:time
别名：inp[type=time]
<input type="time" name="" id="" />
缩写：input:number
别名：inp[type=number]
<input type="number" name="" id="" />
缩写：input:color
别名：inp[type=color]
<input type="color" name="" id="" />
缩写：input:checkbox
别名：inp[type=checkbox]
<input type="checkbox" name="" id="" />
缩写：input:c
别名：input:checkbox
<input type="checkbox" name="" id="" />
缩写：input:radio
别名：inp[type=radio]
<input type="radio" name="" id="" />
缩写：input:r
别名：input:radio
<input type="radio" name="" id="" />
缩写：input:range
别名：inp[type=range]
<input type="range" name="" id="" />
缩写：input:file
别名：inp[type=file]
<input type="file" name="" id="" />
缩写：input:f
别名：input:file
<input type="file" name="" id="" />
缩写：input:submit
<input type="submit" value="" />
缩写：input:s
别名：input:submit
<input type="submit" value="" />
缩写：input:image
<input type="image" src="" alt="" />
缩写：input:i
别名：input:image
<input type="image" src="" alt="" />
缩写：input:button
<input type="button" value="" />
缩写：input:b
别名：input:button
<input type="button" value="" />
缩写：isindex
<isindex />
缩写：input:reset
别名：input:button[type=reset]
<input type="reset" value="" />
缩写：select
<select name="" id=""></select>
缩写：option
<option value=""></option>
缩写：textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
缩写：menu:context
别名：menu[type=context]
<menu type="context"></menu>
缩写：menu:c
别名：menu:context
<menu type="context"></menu>
缩写：menu:toolbar
别名：menu[type=toolbar]
<menu type="toolbar"></menu>
缩写：menu:t
别名：menu:toolbar
<menu type="toolbar"></menu>
缩写：video
<video src=""></video>
缩写：audio
<audio src=""></audio>
缩写：html:xml
<html xmlns="http://www.w3.org/1999/xhtml"></html>
缩写：keygen
<keygen />
缩写：command
<command />
缩写：bq
别名：blockquote
<blockquote></blockquote>
缩写：acr
别名：acronym
<acronym title=""></acronym>
缩写：fig
别名：figure
<figure></figure>
缩写：figc
别名：figcaption
<figcaption></figcaption>
缩写：ifr
别名：iframe
<iframe src="" frameborder="0"></iframe>
缩写：emb
别名：embed
<embed src="" type="" />
缩写：obj
别名：object
<object data="" type=""></object>
缩写：src
别名：source
<source></source>
缩写：cap
别名：caption
<caption></caption>
缩写：colg
别名：colgroup
<colgroup></colgroup>
缩写：fst, fset
别名：fieldset
<fieldset></fieldset>
缩写：btn
别名：button
<button></button>
缩写：btn:b
别名：button[type=button]
<button type="button"></button>
缩写：btn:r
别名：button[type=reset]
<button type="reset"></button>
缩写：btn:s
别名：button[type=submit]
<button type="submit"></button>
三、CSS
官方文档：https://docs.emmet.io/css-abbreviations/
参考链接：https://www.cnblogs.com/summit7ca/p/6944215.html
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
