Emmet常用语法

Emmet语法

Emmet语法前身是Zen coding,它使用缩写来提高html/css的编写速度,VSCode内部已经集成了该语法。

输入缩写,按Tab (或Enter) 键快速生成代码

Emmet语法大全

快速生成HTML结构语法

[标签名]标签

div

1
<div></div>

[.]class类名标签

.demo

1
<div class="demo"></div>

div.diy

1
<div class="demo"></div>

div.demo1.demo2

1
<div class="demo1 demo2"></div>

[*] 多个标签

div*3

1
2
3
<div></div>
<div></div>
<div></div>

[#] id名标签

p#diy

1
<p id="diy"></p>

[$] 顺序类名标签

.diy$*3

1
2
3
<div class="diy1"></div>
<div class="diy2"></div>
<div class="diy3"></div>

ul>li.diy${diy$$}*3

1
2
3
4
5
<ul>
<li class="diy1">diy01</li>
<li class="diy2">diy02</li>
<li class="diy3">diy03</li>
</ul>

[@] 降序类名标签

.diy@*3

1
2
3
<div class="diy3"></div>
<div class="diy2"></div>
<div class="diy1"></div>

ul>li.diy@{diy@@}*3

1
2
3
4
5
<ul>
<li class="diy3">diy03</li>
<li class="diy2">diy02</li>
<li class="diy1">diy01</li>
</ul>

[>] 子级标签

.father>.son

1
2
3
<div class="father">
<div class="son"></div>
</div>

[+] 同级标签

div+span

1
2
<div></div>
<span></span>

[^] 父级标签

li^ul

1
2
3
<ul>
<li></li>
</ul>

[{}] 标签添加内容

div{添加内容}

1
<div>添加内容</div>

[[]]属性标签

div[style]

1
<div style=""></div>

[()] 分组操作(无用)

[a:] a标签生成

a:mail

1
<a href="mailto:"></a>

a:link(无用)

1
<a href="http://"></a>

[input:] 添加自定义type属性

input

1
<input type="text">

input:password

1
<input type="password" name="" id="">

input:checkbox

1
<input type="checkbox" name="" id="">

input:radio

1
<input type="radio" name="" id="">

input:hiddent

1
<input type="hidden" name="">

[lorem数字] 随机生成几个英文单词句子

生成无意义的文字lorem后面加数字

lorem10

1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, itaque.

快速生成CSS样式语法

样式

1
2
3
4
5
w → width: ;
h → height: ;
m → margin: ;
p → padding: ;
...

单位

1
2
3
4
p → %
e → em
x → ex
...

[w] 宽度

w10

1
width: 10px;

w100p

1
width: 100%;

h10p+w10p

1
2
height: 10%;
width: 10%;

[h] 高度

h10

1
height: 10px;

[m] 外边距

m0

1
margin: 0;

m0:auto

1
margin: 0 auto;

m0-auto

1
margin: 0 auto;

[p] 内边距

P0

1
padding: 0;

P10-10-10

1
padding: 10px 10px 10px;

[c#] 颜色

c#111

1
color: #111111;

[!] 重要修饰符

!

1
!important

待补充…