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

生成固定结构:

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

注释:

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

多行:
VSCode的一些小操作(二)——快速生成HTML,CSS代码_第5张图片

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

HTML部分:

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

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

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

标签内部有内容的内容用{}括起来:
在这里插入图片描述
自增符号$:
VSCode的一些小操作(二)——快速生成HTML,CSS代码_第12张图片
VSCode的一些小操作(二)——快速生成HTML,CSS代码_第13张图片

CSS部分:

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

上一篇小操作的链接:

VSCode的一些小操作

下一篇小操作的链接:

VSCode的一些小操作(三)——同时更改所有相同的变量名或类名

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

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


ヾ(≧∪≦*)ノ〃

你可能感兴趣的:(VSCode的一些小操作(二)——快速生成HTML,CSS代码)