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:
![在这里插入图片描述](https://img-blog.csdnimg.cn/bd98ea1ef7c347aaac14e9a2a478e619.jpg#pic_center)
按tab之后
![在这里插入图片描述](https://img-blog.csdnimg.cn/49f0edcca8654a4d8a17268c9355388a.jpg#pic_center)
- 如果生成的div类名是有顺序的,可以用自增符号$
eg:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2d000cf7781d4cc489d58d018592cab6.jpg#pic_center)
按tab键之后
![在这里插入图片描述](https://img-blog.csdnimg.cn/a6b17147f50b40119bb580f9919054c5.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y235LiN5Yqo55qE5Y235Y23,size_15,color_FFFFFF,t_70,g_se,x_16#pic_center)
- 如果想要在生成的标签内部写内容可以用{}表示,写完按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: 格式不正确时
![在这里插入图片描述](https://img-blog.csdnimg.cn/c8024e8bbcad40fb8f48e8329bdfe0a4.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y235LiN5Yqo55qE5Y235Y23,size_19,color_FFFFFF,t_70,g_se,x_16#pic_center)
格式化之后
![在这里插入图片描述](https://img-blog.csdnimg.cn/c5ed3cc34be849199475bba130f5e0bd.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y235LiN5Yqo55qE5Y235Y23,size_18,color_FFFFFF,t_70,g_se,x_16#pic_center)
Vscode 快速格式化代码: shift+alt+f 也可以设置 当我们 保存页面的时候自动格式化代码:
1 )文件—>【首选项】—>【设置】; 2)搜索emmet.include; 3 )在settings.json下的【用户】中添加以下语句:
“editor.iormatoniype”: true, “editor.formatOnSave”: true 只需要设置一次即可,以后都可以自动保存格式化代码
![在这里插入图片描述](https://img-blog.csdnimg.cn/b30a1c06509f4e2a853f8d30428982f4.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y235LiN5Yqo55qE5Y235Y23,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
小插曲:
学会使用 — CSDN插入视频和插入gif
点击跳转见大佬
|