1. Emmet 语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法
- 快速生成HTML结构语法
- 快速生成CSS样式语法
1.1 快速生成HTML结构语法
1.生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成< div>< /div>
- 如果想要生成多个相同标签加上 * 就可以了。比如div*3就可以快速生成3个div
- 如果有父子级关系的标签,可以用下 > 。比如ul > li 就可以了
- 如果有兄弟关系的标签,用+就可以了。比如div+p
- 如果生成带有类名或者id名字的,直接写.demo或者#two 再按tab键就可以了
eg:

按tab之后

- 如果生成的div类名是有顺序的,可以用自增符号$
eg:

按tab键之后

- 如果想要在生成的标签内部写内容可以用{}表示,写完按tab
eg:
1.2 快速生成CSS样式语法
CSS基本采取简写形式即可.
- 比如w200按tab 可以生成 width: 200px;
- 比如lh26按tab 可以生成line-height: 26px;
- 比如ti2em按tab 可以生成text-indent:2em;
- 比如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
点击跳转见大佬
|