VS Code如何创建HTML文件并运行(新手友好)

news/发布时间2024/5/4 23:21:31

一、下载VS Code

首先从官网 https://code.visualstudio.com/下载VS Code 。

二、在VS Code中下载相关的插件

1、首先打开Visual Studio Code

 2、点击左侧工具栏中“扩展”栏,也可使用扩展快捷键打开(Ctrl+Shift+X),打开扩展下载以下三个插件。(三个插件安装完成后都需要重启 VS Code才能使用)

  • Chinese (Simplified)(简体中文)(注:适用于英文版转中文版的小伙伴)

  • HTML Play (在你需要监听的html文件上按ctrl+alt+h使用,测试使用)
  • open in browser (把编辑的HTML文件等用浏览器打开,查看效果。)

安装Chinese (Simplified)(简体中文)

 

 安装 HTML Play

 安装 open in browser
open in browser要下载1.1.0版本的,通过搜索我们只能找到2.0.0版本。不要慌,先下载2.0.0版本的。

 安装完成后鼠标右键点击open in browser,点击“安装另一个版本”。

选择1.1.0版本的安装即可。

 至此,三个插件安装流程已经完成。

3、接下来就是使用open in browser配置你编辑的html文件要在哪个浏览器上打开,依然是鼠标右键点击open in browser,然后选择“扩展设置”选项。

 在文本框中填上一个你已经安装好的并使用顺手的浏览器,我这边使用的是Google Chrome。

 填完之后重启一下Visual Studio Code就ok啦。

三、使用Visual Studio Code创建html文件

点击左上角工具栏中的文件,选择新建文件。

 在文本框中输入html。

 注意:要以html为后缀名,然后选择放置的位置就可以得到一个新的html文件。

 四、html文件运行在浏览器上

在html文件中编辑代码。

代码附上:

 

<html><head><title>Hello World</title></head><body>Hello World!</body>
</html>

 

代码输入完毕之后选择左上角“文件”,点击“保存”。也可用保存快捷键(Ctrl+S)进行保存。最后在空白处点击鼠标右键,选择“Open In Default Browser”就可以运行在浏览器上了。

 得到如下效果:

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ulsteruni.cn/article/25438366.html

如若内容造成侵权/违法违规/事实不符,请联系编程大学网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

掘金、聚宽和米筐各量化平台优缺点

1、聚宽和米筐的商业模式主要是卖数据,掘金有自己做实盘, 2、聚宽有策略商城可以卖策略,掘金社区不太活跃 3、平台都有相关书籍,可以对照,有源码,掘金《》, 4、以python为例,掘金易用性较好,API文档清晰,windows客户端做的比较好, 策略都在本地运行, 很好的python代码…

「锐利」升级到13.5版本,重磅推出插拼式智能拼版等多项新功能!

国产印前处理软件「锐利」的又一次重磅升级!包装印前软件「锐利」又升级了!13.5版本! 锐利是集印前行业三十多年的技术和经验开发的一款包装印前处理软件,提供陷印、拼大版、预览、智能标记、预飞、工具箱、导出图像、搜索器、油墨编辑、曲线调整、模拟套印不准、导入标准P…

FormData传输JSON同时上传单个/多个文件问题

背景 最近在开发一个功能时,涉及到向后端接口发送:JSON请求参数 多个文件 刚开始想通过RequestBody(application/json)形式进行传值,但是文件不好处理。有一个通过application/json传输文件数据的方法,就是将文件转成base64,然后在后端进行处理。但是这种方式涉及到大文…

[dp 小计] SOSdp

复健 SOSdp(sum over subsets dynamic programming)。 引入 令 \(F(x)=\sum\limits_{u\subseteq x} A(u)\) 其中 \(A\) 为给定数组,求出 \(\forall x, F(x)\) 。 思路一 暴力枚举子集,时间复杂度 \(O(4^n)\)。 思路二 优化子集枚举,时间复杂度 \(O(3^n)\)。 思路三 考虑 SOS…

WDS+MDT网络启动自动部署windows(七)添加驱动

简介: 以前的ghost,是封装万能驱动。 现在安装原版ISO,是手动安装驱动。 那么WDS+MDT,怎么装驱动更方便呢? 本来是轻接触,lite touch,通过设置rules,bootstrap,可以达到只选择一下任务序列即可。 那么也要自动安装驱动。 WDS也可以注入驱动,但是是在使用原版安装镜像…

通用目标近似程序的神经加速

通用目标近似程序的神经加速 参考文献链接 https://homes.cs.washington.edu/~luisceze/publications/micro12-web.pdf人工智能芯片与自动驾驶