[开发工具]web前端学习92-95（emmet语法---快速生成HTML结构语法 ，快速生成CSS样式语法，格式化代码）

1. Emmet 语法

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

1. 快速生成HTML结构语法
2. 快速生成CSS样式语法

1.1 快速生成HTML结构语法

1．生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成< div>< /div>

2. 如果想要生成多个相同标签加上 * 就可以了。比如div*3就可以快速生成3个div
3. 如果有父子级关系的标签，可以用下 > 。比如ul > li 就可以了
4. 如果有兄弟关系的标签，用＋就可以了。比如div+p
5. 如果生成带有类名或者id名字的，直接写.demo或者#two 再按tab键就可以了

eg:

按tab之后

6. 如果生成的div类名是有顺序的，可以用自增符号$

eg:

按tab键之后

7. 如果想要在生成的标签内部写内容可以用{}表示，写完按tab

eg:

1.2 快速生成CSS样式语法

CSS基本采取简写形式即可.

1. 比如w200按tab 可以生成 width: 200px;
2. 比如lh26按tab 可以生成line-height: 26px;
3. 比如ti2em按tab 可以生成text-indent:2em;
4. 比如tdn按tab 可以生成text-decoration: none;

基本上是各单词首字母以及数字（偶尔加单位）按tab

1.3 快速格式化代码

代码没有对齐格式不佳时，一行一行改会很麻烦，vscode里面就提供了格式化代码的方法去修改

格式化：同时按shift+alt+f或代码处右键—>格式化文档

eg: 格式不正确时

格式化之后

Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:

1 )文件—>【首选项】—>【设置】;
2）搜索emmet.include;
3 )在settings.json下的【用户】中添加以下语句:

“editor.iormatoniype”: true,
“editor.formatOnSave”: true
只需要设置一次即可，以后都可以自动保存格式化代码

小插曲：

学会使用 — CSDN插入视频和插入gif

点击跳转见大佬