vscode如何创建并打开html文件（骨灰级新手友好）

9月前作者：起风的蛋挞分类：Toy博客阅读(39) 违法举报

这篇具有很好参考价值的文章主要介绍了vscode如何创建并打开html文件（骨灰级新手友好）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

一、在VSCode下载相关插件

二、创建html文件

三、 html运行在浏览器上

四、快捷创建骨架

一、在VSCode下载相关插件

1. 先打开Visual Studio Code

vscode如何创建并打开html文件（骨灰级新手友好）

2. 下载三个插件，点击第五个图标

Chinese (Simplified) (简体中文)
HTML Play
open in browser

vscode如何创建并打开html文件（骨灰级新手友好）

下载完Chinese (Simplified) (简体中文)，重启后发现就变成中文（对于原来是英文版的小伙伴） vscode如何创建并打开html文件（骨灰级新手友好）

安装 HTML Play

vscode如何创建并打开html文件（骨灰级新手友好）

open in browser要下载1.1.0版本，但是会发现只能找到2.2.0的，所以我们这样做

先下载open in browser2.2.0

vscode如何创建并打开html文件（骨灰级新手友好）

然后右击鼠标，点击“安装另一个版本 ”

vscode如何创建并打开html文件（骨灰级新手友好）

选择1.1.0版本的安装即可

vscode如何创建并打开html文件（骨灰级新手友好）

然后配置你要打开在哪个浏览器

右键鼠标 -> 点击扩展设置

vscode如何创建并打开html文件（骨灰级新手友好）

填上一个你已经安装好的浏览器，我这里填的是火狐，你填其它的也可以

vscode如何创建并打开html文件（骨灰级新手友好）

然后重启一下VScode

二、创建html文件

左上角点击文件 -> 新建文件

vscode如何创建并打开html文件（骨灰级新手友好）

输入html

vscode如何创建并打开html文件（骨灰级新手友好）

注意要以html为后缀名

vscode如何创建并打开html文件（骨灰级新手友好）

设置放置的位置后就可以得到

vscode如何创建并打开html文件（骨灰级新手友好）

三、 html运行在浏览器上

代码附上

<html>
	<head>
		<title>HelloWorld</title>
	</head>
	<body>
		HelloWorld!
	</body>
</html>

先左上角点击文件 -> 点击保存

vscode如何创建并打开html文件（骨灰级新手友好）

然后按 CTRL + ALT + H 运行程序

vscode如何创建并打开html文件（骨灰级新手友好）

最后在空白处点击鼠标右键，然后选择 Open In Default Browser

vscode如何创建并打开html文件（骨灰级新手友好）然后可以得到效果

vscode如何创建并打开html文件（骨灰级新手友好）

四、快捷创建骨架

一般是输入一个！号，然后按回车就可以了

vscode如何创建并打开html文件（骨灰级新手友好）

vscode如何创建并打开html文件（骨灰级新手友好）

但是也有遇到输入!号不行的情况，这时候可以打一个html：5，然后按回车

vscode如何创建并打开html文件（骨灰级新手友好）

也可以得到骨架，然后你再输入!号，发现也可以得到骨架了

过程就结束了

学会的小伙伴给博主点个赞呗，遇到困难的可以在评论区下方提问哦文章来源地址https://www.toymoban.com/news/detail-500854.html

到了这里，关于vscode如何创建并打开html文件（骨灰级新手友好）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

VSCode如何通过Ctrl+P快速打开node_modules中的文件

咱们新建一个NodeJS项目，必然会安装许多依赖包，因此经常需要查阅某些依赖包的源码文件。但是，由于node_modules目录包含的文件太多，出于性能考虑，在VSCode中默认情况下是禁止搜索node_modules目录的。在这种情况下，我们将不得不依次展开node_modules的文件目录树，来查找我

2024年02月06日
浏览(59)
vscode 打开文件时如何在资源管理器中展开文件所在的整个目录树（包含node_modules）

如题。去首选项 -- 设置中搜索 “Auto Reveal”，然后选true，注意把下面的Auto Reveal Exclude排除项中的node_modules去掉，这样才能定位到node_modules中的文件。 **/node_modules

2024年02月15日
浏览(40)
爬虫系统的核心：如何创建高质量的HTML文件？

在网页抓取或爬虫系统中，HTML文件的创建是一项重要的任务。HTML文件是网页的基础，包含了网页的所有内容和结构。在爬虫系统中，我们需要生成一个HTML文件，以便于保存和处理网页的内容。在这种情况下，可以使用Java函数来实现将爬取到的网页内容保存为HTML文件的功能

2024年02月09日
浏览(51)
pytorch进阶学习（六）：如何对训练好的模型进行优化、验证并且对训练过程进行准确率、损失值等的可视化，新手友好超详细记录

课程资源： 7、模型验证与训练过程可视化【小学生都会的Pytorch】【提供源码】_哔哩哔哩_bilibili 推荐与上一节笔记搭配食用~： pytorch进阶学习（五）：神经网络迁移学习应用的保姆级详细介绍，如何将训练好的模型替换成自己所需模型_好喜欢吃红柚子的博客-CSDN博客训练

2023年04月17日
浏览(43)
Hack The Box - Three(新手友好)

环境给了一个IP，nmap信息搜集一波访问10.129.126.35:80，收集有用信息(渗透测试==信息收集) thetoppers.htb应该是域名，把域名和IP加到hosts文件中，tee命令的作用就是读取标准输入内容，将读取到的内容数据写入到标准输出和文件中。再次访问和之前页面一样，尝试子域名爆破，

2024年02月07日
浏览(33)
【新手友好】用Pyspark和GraphX解析复杂网络数据

在本文中，我们将详细介绍如何在Python / pyspark环境中使用graphx进行图计算。GraphX是Spark提供的图计算API，它提供了一套强大的工具，用于处理和分析大规模的图数据。通过结合Python / pyspark和graphx，您可以轻松地进行图分析和处理。为了方便那些刚入门的新手，包括我自己在

2024年01月19日
浏览(45)
盘点 Python 中字符串的常用操作，对新手极度友好

在 Python 中字符串的表达方式有四种一对单引号一对双引号一对三个单引号一对三个双引号 a = ‘abc’ b= “abc” c = ‘’‘abc’‘’ d = “”“abc”“” print(type(a)) # class ‘str’ print(type(b)) # class ‘str’ print(type©) # class ‘str’ print(type(d)) # class ‘str’ 单双引号混合使用 a

2024年02月10日
浏览(52)
HTML之VSCode简单配置与创建

目录插件下载然后输入源码：使用效果下载这个插件后可以直接运行：然后创建一个文件：两种方法，一个是默认，直接打开：另一种是自己选择哪个浏览器打开：

2024年02月11日
浏览(27)
Linux下使用yum安装的东西都去哪儿了？(新手友好)

使用yum安装的软件包通常都会遵循相似的目录结构安装路径含义 /etc 配置文件 /var/log 日志文件 /usr/sbin 可执行文件(包括服务管理工具) 上面给出的是一些软件包安装几乎必备的几个安装路径，具体用yum去安装不同的软件包还会有不同的分配情况。比如安装Nginx 对于Nginx包来

2024年02月03日
浏览(36)
Github多个账号设置SSH 逐个问题击破新手友好（Windows) (史上最全）

在看了几十篇博文，经历了一天一夜的挣扎后，基本把能踩的坑都踩了个遍，终于能够用SSH进行Github多个账号的无缝切换，记录于此。话不多说，先来分享一波成功的喜悦：如果你在Github多个账号设置SSH的过程中遇到了以下问题： No such file or directory Could not open a connection t

2024年02月09日
浏览(36)