VSCode的一些小操作(二)——快速生成HTML,CSS代码

时间:2024-03-20 08:03:20

生成固定结构:

新建的html文件是什么内容都没有的空文件,每次新建之后我们都要写那一坨一模一样的固定结构,但是又懒得去记那十几行的东西
在VSCode中编辑.html文件只需要输入一个 感叹号!(英文的) 然后一回车就可以自动生成这个固定结构了:
VSCode的一些小操作(二)——快速生成HTML,CSS代码
VSCode的一些小操作(二)——快速生成HTML,CSS代码
然后生成之后光标的位置是在width那里,按Tab键可以将光标跳转到下一个位置
当然也可以直接用鼠标点
VSCode的一些小操作(二)——快速生成HTML,CSS代码

注释:

Ctrl + \ 可以直接添加注释,如图所示:
单行:
VSCode的一些小操作(二)——快速生成HTML,CSS代码

多行:
VSCode的一些小操作(二)——快速生成HTML,CSS代码

接下来是本篇的核心内容:

HTML部分:

生成标签直接输标签名回车即可:
VSCode的一些小操作(二)——快速生成HTML,CSS代码

生成多个相同标签输标签名之后输个*后面加上个数:
VSCode的一些小操作(二)——快速生成HTML,CSS代码
父子级关系的标签用>连接:
VSCode的一些小操作(二)——快速生成HTML,CSS代码
VSCode的一些小操作(二)——快速生成HTML,CSS代码
兄弟关系的用+连接:
VSCode的一些小操作(二)——快速生成HTML,CSS代码

带有类名或id名的:
VSCode的一些小操作(二)——快速生成HTML,CSS代码

标签内部有内容的内容用{}括起来:
VSCode的一些小操作(二)——快速生成HTML,CSS代码
自增符号$:
VSCode的一些小操作(二)——快速生成HTML,CSS代码
VSCode的一些小操作(二)——快速生成HTML,CSS代码

CSS部分:

敲的时候直接敲缩写就好:
VSCode的一些小操作(二)——快速生成HTML,CSS代码

未完待续
最近学校的事情比较多,所以更的可能会比较慢



上一篇小操作的链接:

VSCode的一些小操作

如果有想给VSCode设置背景图片但是还不知道要怎么设置的可以去看一下我的另一篇文章:

VSCode设置背景图片的两种方式


ヾ(≧∪≦*)ノ〃