所在位置：
首页 >
营销资讯 >
网站运营 > 「懒人必学小技巧」利用VSCode编写html和css时，一些便捷方法
「懒人必学小技巧」利用VSCode编写html和css时，一些便捷方法
时间：2023-07-06 00:03:02 | 来源：网站运营
时间：2023-07-06 00:03:02 来源：网站运营
「懒人必学小技巧」利用VSCode编写html和css时，一些便捷方法：
阅读目录
- 一、HTML编写介绍
- 二、CSS编写介绍
- 、快速格式化
- 四、小编用的插件
一、HTML编写介绍
1.1快速在vscode中新建html文件，利用!（英文状态下哦！）具体操作：
- 新建一个html的文件，现在是空白状态 （如下图）
第一步：建HTML文件2.键入“!”(英文状态下 奥!)
第二：键入“!”3.按下
Tab键即可生成！
x效果图：
第三步：按下tab键就完成啦/*效果代码*/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body></html>
1.2 kuai su 快速输入标签
输入标签名，并按下Tab键（空格键即可）即可完成。
一二
1.3 输入多个相同的标签，要复制粘贴么？
答案是：
当然不需要啊我们键入“所需标签名”+“ * ”+“所需的标签个数”即可。
/*eg：div 代码如下：*//* div*3，键入后就会生成下面的啦 */ <div></div> <div></div> <div></div>
1.4 快速输入父子关系和兄弟关系的标签，一个一个键入？
通常我们初学时，需要一个一个代码进行键入。效率很低，也容易出错。
接下来，我们就这个方法快速输入吧！
- 父子关系格式： “父亲标签名”+“ > ”+"儿子标签名"
当然我们也可以在子代 标签名后乘以数字（ul>li*3）,能得到三个<li></li>
/*父子关系*//* ul>li*3 */ <ul> <li></li> <li></li> <li></li> </ul>- 兄弟关系格式： “哥哥标签名”+“ + ” + " 弟弟标签名"
/* 兄弟标签 *//*键入 h3+p */ <h2></h2> <p></p>
1.5 快速写入类选择器/id选择器
.demo--- <div class="demo"></div>
#gary--- div id="gary"></div>
注意： 以上是自动生成“div”的（默认是div）， 如果想要写其他的。例如：h3.one 则生成<h3 class="one"></h3>
/* .demo */ <div class="demo"></div>/* #gary */ div id="gary"></div>
1.6 div或其他 的类名/id名排序 利用自增符号
格式： 例如：div
.div$*3，则生成
<div class="gary1"></div>
<div class="gary2"></div>
<div class="gary3"></div>
其他的：p.one$*3
<p class="one1"></p>
<p class="one2"></p>
<p class="one3"></p>
1.7 多标签内默认文字
div{我是你们的课代表}*3
效果：<div>我是你们的课代表</div>
<div>我是你们的课代表</div>
<div>我是你们的课代表</div>
其他的：h3{我是你们的课代表}*3
效果在这奥：
<h3>我是你们的课代表</h3>
<h3>我是你们的课代表</h3>
<h3>我是你们的课代表</h3>
1.8尽量持续更新奥！
二er、CSS编写介绍
- 快速键入css样式代码（简单的举例哦！）
- background-image（键盘在VSCode键入“bri”）
- width：100px； 键盘键入“w100”即可；
- 以此类推奥！
、快如格式化
快捷键：Shift+Alt+f
同时呢，pink老师告诉我们：
亦可以设置 保存页面时自动格式化代码：
步骤：
文件---首选项----设置
搜索：emmet.include；
在setting.json 下的“用户”中添加以下语句：
"editor.formatOnType":true, "editor.formatOnSave":true设置一次，终身可用哈（前提是不卸载不做此改动）
四、小编常用插件
- Auto Rename Tag
- Beautify（♣美化）
- Chinese (Simplified) Language Pack for Visual Studio Code（使vscode中文化，推荐使用）
- CSS Peek
- Night Owl（主题）
- Live Server（实时画面，推荐使用）
- open in browser（打开浏览器）
在线咨询
