CSS学习笔记 | Emmet语法

CSS学习笔记_Emmet语法

本文内容：
Emmet语法：
	1. 快速生成html结构语法
	2. 快速生成css样式语法
	3. 快速格式化代码

Emmet的语法前身是Zen coding，使用缩写来提高HTML、CSS的编写速度，Vscode内部已经集成该语法

1、快速生成html结构语法

1. 生成标签：直接输入标签名，然后按 tab 键即可
   
   

2. 生成多个相同的标签，加上*号即可
   例如：快速生成3个div标签

   输入div*3，再按tab，即可生成如下代码：
   <div></div>
   <div></div>
   <div></div>
   

   
   

3. 生成有父子级关系的标签：用大于号>连接
   例如：输入ul>li，再回车或tab，可生成：

   <ul>
       <li></li>
   </ul>
   

4. 生成兄弟级的标签：用加号+连接
   例如：输入p+div，然后回车，可生成：

   <p></p>
   <div></div>
   

   
   

5. 生成带有类名或者 id 名的标签：输入标签.类名然后回车
   例如：输入p.demo，然后回车可生成：

   <p class="demo"></p>
   

   输入p#demo，然后回车可生成 ：

   <p id="demo"></p>
   

   
   

6. 如果生成的类名是有顺序的，可以使用自增符$
   例如：输入p.demo$*3，然后回车可生成：

   <p class="demo1"></p>
   <p class="demo2"></p>
   <p class="demo3"></p>
   

   
   

7. 想要在标签里面输入内容，可以使用{}
   例如：输入p{demo$}*3，然后回车可得：

   <p>demo1</p>
   <p>demo2</p>
   <p>demo3</p>
   

2、快速生成CSS样式语法

使用缩写即可快速补全，自己手动尝试。

例如：输入tac ，然后回车，即可快速生成text-align: center;

3、快速格式化代码

• 快捷键：shift+alt+f

设置成我们保存时就自动格式化代码：

步骤：

1. 文件 —— 首选项 —— 设置 ( file —— preferences —— settings )

2. 搜索 emmet.inculde

3. 在settings.json下的工作区设置中添加以下语句：

   "editor.formatOnType":true,
   "editor.formatOnSave":true
   

---

返回目录： 笔记首页