一、简介
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 =>
foo =>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail => href="mailto:">
a:link => href="http://">
base =>
br =>
c=>
link => rel="stylesheet" href="">
script:src =>
form:get =>
label =>
input => type="text">
inp => type="text" name="" id="">
input:hidden => type="hidden" name=""> input:h亦可
input:email => type="email" name="" id="">
input:password => type="password" name="" id="">
input:checkbox => type="checkbox" name="" id="">
input:radio => type="radio" name="" id="">
select =>
option =>
bq =>
btn =>
btn:s =>
btn:r =>
3.文本操作符(Text)
div{这是一段文本} =>
a{点我点我} => href="">点我点我
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_1span>
<span class="name2">number_2span>
<span class="name3">number_3span>
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>自定义文本1li>
<li>自定义文本2li>
<li>自定义文本3li>
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:link
缩写:a:mail
缩写:abbr
缩写:acronym
缩写:base
缩写:basefont
缩写:br
缩写:frame
缩写:hr
缩写:bdo
缩写:bdo:r
缩写:bdo:l
缩写:col
缩写:link
缩写:link:css
缩写:link:print
缩写:link:favicon
缩写:link:touch
缩写:link:rss
缩写:link:atom
缩写:meta
缩写:meta:utf
缩写:meta:win
缩写:meta:vp
缩写:meta:compat
缩写:style
缩写:script
缩写:script:src
缩写:img
缩写:iframe
缩写:embed
缩写:object
缩写:param
缩写:map
缩写:area
缩写:area:d
缩写:area:c
缩写:area:r
缩写:area:p
缩写:form
缩写:form:get
缩写:form:post
缩写:label
缩写:input
缩写:inp
缩写:input:hidden
别名:input[type=hidden name]
缩写:input:h
别名:input:hidden
缩写:input:text, input:t
别名:inp
缩写:input:search
别名:inp[type=search]
缩写:input:email
别名:inp[type=email]
缩写:input:url
别名:inp[type=url]
缩写:input:password
别名:inp[type=password]
缩写:input:p
别名:input:password
缩写:input:datetime
别名:inp[type=datetime]
缩写:input:date
别名:inp[type=date]
缩写:input:datetime-local
别名:inp[type=datetime-local]
缩写:input:month
别名:inp[type=month]
缩写:input:week
别名:inp[type=week]
缩写:input:time
别名:inp[type=time]
缩写:input:number
别名:inp[type=number]
缩写:input:color
别名:inp[type=color]
缩写:input:checkbox
别名:inp[type=checkbox]
缩写:input:c
别名:input:checkbox
缩写:input:radio
别名:inp[type=radio]
缩写:input:r
别名:input:radio
缩写:input:range
别名:inp[type=range]
缩写:input:file
别名:inp[type=file]
缩写:input:f
别名:input:file
缩写:input:submit
缩写:input:s
别名:input:submit
缩写:input:image
缩写:input:i
别名:input:image
缩写:input:button
缩写:input:b
别名:input:button
缩写:isindex
缩写:input:reset
别名:input:button[type=reset]
缩写:select
缩写:option
缩写:textarea
缩写:menu:context
别名:menu[type=context]
缩写:menu:c
别名:menu:context
缩写:menu:toolbar
别名:menu[type=toolbar]
缩写:menu:t
别名:menu:toolbar
缩写:video
缩写:audio
缩写:html:xml
缩写:keygen
缩写:command
缩写:bq
别名:blockquote
缩写:acr
别名:acronym
缩写:fig
别名:figure
缩写:figc
别名:figcaption
缩写:ifr
别名:iframe
缩写:emb
别名:embed
缩写:obj
别名:object
缩写:src
别名:source
缩写:cap
别名:caption
缩写:colg
别名:colgroup
缩写:fst, fset
别名:fieldset
缩写:btn
别名:button
缩写:btn:b
别名:button[type=button]
缩写:btn:r
别名:button[type=reset]
缩写:btn:s
别名:button[type=submit]
三、CSS
官方文档:https://docs.emmet.io/css-abbreviations/
参考链接:https://www.cnblogs.com/summit7ca/p/6944215.html