整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「懒人必学小技巧」利用VSCode编写html和cs

「懒人必学小技巧」利用VSCode编写html和css时,一些便捷方法

读目录

  • 一、HTML编写介绍
  • 二、CSS编写介绍
  • 、快速格式化
  • 四、小编用的插件


一、HTML编写介绍

1.1快速在vscode中新建html文件,利用!(英文状态下哦!

具体操作:

  1. 新建一个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>

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

1.2kuaisu快速输入标签

输入标签名,并按下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尽量持续更新奥!

  • 注释:Ctrl+/ ;

二er、CSS编写介绍

  • 快速键入css样式代码(简单的举例哦!)
  • background-image(键盘在VSCode键入“bri”)
  • width:100px; 键盘键入“w100”即可;
  • 以此类推奥!


、快如格式化

快捷键:Shift+Alt+f

同时呢,pink老师告诉我们:

亦可以设置 保存页面时自动格式化代码:

步骤:

  1. 文件---首选项----设置
  2. 搜索:emmet.include;
  3. 在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(打开浏览器)

大数据时代,有了数据总能玩些新花样出来,这不Stack Overflow 有在用空格还是用Tab这个历史性的争论问题上做了一番调查分析,他们发布2017开发者调查问卷结果,调查了使用空格和Tab的情况。

有28,657名调查对象提供了用空格还是Tab的答案,他们都是专业开发人员(而不是学生或以前的程序员)。 在这个组内,40.7%使用tab和41.8%的使用空格(其中17.5%使用两者)。 其中,12,426人也提供了工资。于是他们也就分析了使用那种神器挣得多的结果。

space vs tabs

实际上,使用空格的开发人员的工资中位数为59,140美元,而使用tab的开发人员的工资中位数为4350美元。 (请注意,所有结果都从每个受访者的货币兑换成美元)。 回答“两者”的开发者通常与回答“标签”的人无法区分:将把它们从分析中删除。

这是一个有趣的结果,但当然这并不是决定性的。 一开始研究者认为它被国家或编程语言等因素所混淆。 例如,可以想象,低GDP人均国家的开发商可能更有可能使用标签,因此这些开发人员的平均工资往往较低。

我们可以通过考虑这个效果是否发生在每个国家,对于受访问度最多的几个国家来说。结果如下

make money

欧洲的影响较小,印度尤其如此,但它确实出现在每个国家,这表明这不是唯一的混杂因素。

作为另一个假设,我们知道不同类型的开发人员经常使用不同的缩进(例如,DevOps开发人员更有可能使用空格和移动开发人员更有可能使用tabs),这往往是因为它们使用不同的编辑器和语言。 “开发者调查”询问了每个受访者使用的编程语言(Python,Javascript等)以及他们的“类型”开发人员(Web开发人员,嵌入式开发人员等)。

我们看到每个这些组中的tabs/空格差距相同吗?

tabs space

研究人员为了进一步验证这种假设,还建立了线性回归模型进行分析,结果还是一样。

因此结论就是:用空格的程序员确实比tab的程序员挣得多

那么你用的什么呢?评论区见。

utoCAD 2022 新命令和系统变量

新命令

说明

AutoCAD

AutoCAD LT

COUNT

计数并亮显图形中选定对象的实例。

X