VSCode中Emmet使用_vscode emmet

HTML部分

1. 添加类，id，文本和属性

div.box#box ===>

h1{我是标题} ===>

我是标题

a[href=#] ===>

请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!

2. 嵌套和分组

h1+h2
p>span^p
(.foo>h1)+(.bar>h2)

3. 隐式标签

在过去版本中，可以省略掉div，即输入.item即可生成< div class=“item”>< /div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在< ul>中输入.item，就会生成< li class=“item”>< /li>

4. 定义多个元素* 和 编号$

  <!-- 自增符号：$,ul>li.item$*4，类名自增 -->
  <ul>
  	<li class="item1"></li>
  	<li class="item2"></li>
  	<li class="item3"></li>
  	<li class="item4"></li>
  </ul>
  
  <!-- h$[title=item$]{little boy$}*3 ，
  标签名和属性值，标签内容一起自增-->
  <h1 title="item1">little boy1</h1>
  <h2 title="item2">little boy2</h2>
  <h3 title="item3">little boy3</h3>
 
  <!-- ul>li.item$$*3 ，自增从0开始，
  再加一个$,$$*3-->
  <ul>
  	<li class="item01"></li>
  	<li class="item02"></li>
  	<li class="item03"></li>
  </ul>

<!-- ul>li.item$@-*3 ,自增顺序倒着来，
后面加@- ，$@-*3 -->
  <ul>
  	<li class="item3"></li>
  	<li class="item2"></li>
  	<li class="item1"></li>
  </ul>
 
 <!-- ul>li.item$@3*6 ,自增顺序，按照指定阶段来显示，
 后面加上@数字*数字，$@3*6，从3开始 共6个序号，包含起始数字本身，序号范围：就是3-（3+6-1）3~8 --> 
  <ul>
  	<li class="item3"></li>
  	<li class="item4"></li>
  	<li class="item5"></li>
  	<li class="item6"></li>
  	<li class="item7"></li>
  	<li class="item8"></li>
  </ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

5. 添加虚拟文字

默认的 lorem 每次都是30个单词，可以指定单词个数，后面写上数字，lorem10 将生成10个单词的虚拟文本

	<!-- ul>.item*3>lorem5 -->
	<ul>
		<li class="item">Lorem ipsum dolor sit amet.</li>
		<li class="item">A itaque architecto quas recusandae.</li>
		<li class="item">Deleniti, necessitatibus porro perspiciatis ab!		</li>
	</ul>
1
2
3
4
5
6

6. 其它

CSS部分

1. 属性和属性值的缩写

• 连字符 - ，连接多个属性值
• 使用 加号 + ，连接多个属性
• 两个连字符 - -，一个是表示属性值连接的，一个是表示负值的

m10——》 margin: 10px;

/*m10-20，带两个属性值的*/
margin: 10px 20px;
 
/*m-10-20 带一个负值 一个正值的*/
margin: -10px 20px;
 
/*m-10--20 带两个负值的*/
margin: -10px -20px;

/*m-10--20--30 带三个负值的*/
margin: -10px -20px -30px;
 
/*★ 同时定义多个属性*/
/*m10+bd20，同时定义两个属性*/
margin: 10px;
border: 20px;
 
/*m10+bd20+bg#3，同时定义三个属性*/
margin: 10px;
border: 20px;
background: #333;
 
/*m10-20+bd20，同时定义两个属性，第一个属性两个属性值*/
margin: 10px 20px;
border: 20px;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2. 属性值的单位

/*★ 属性值的单位*/
/*m10  整数值，默认单位是px*/
margin: 10px;
 
/*m10.5 小数值，默认单位是em*/
margin: 10.5em;


/*属性值单位的简写 */
/*m10p*/
margin: 10%;
 
/*m10e*/
margin: 10em;
 
/*m10x*/
margin: 10ex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

其它

/*p!+c#3!		*/
padding:  !important;
color: #333 !important;		
1
2
3

---

参考链接：

【Emmet 的使用手册（知识点超全版本）】

看完效率提升十倍！！！快速编写HTML代码

VsCode中使用Emmet神器快速编写HTML代码

非常感谢！

---