如何在VSCode中将html文件打开到浏览器

本文介绍: 近期在学习前端内容，遇到了这个问题，来总结记录并分享一下。html 文件一般可右击选择打开方式，通过浏览器打开我平时用idea也可以直接在右上角点击浏览器按钮打开（这也是我想用ide a来写html的原因）但大家都在用VSCo de，所以肯定有它的强大之处，不然也不会这么受欢迎。在vscode中，想要将html 文件打开到浏览器有两种方式，一个是debug 模式一个是下载插件。接下来就看以下这两种方式。

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

如何在VSCo de中将html 文件打开到浏览器

一、介绍
二、打开方式
- 1. VSCode自带工具打开
- 2. 使用插件（Live Server）打开

一、介绍

近期在学习前端内容，遇到了这个问题，来总结记录并分享一下。

html文件一般可右击选择打开方式，通过浏览器打开
我平时用ide a也可以直接在右上角点击浏览器按钮打开（这也是我想用ide a来写html的原因）
但大家都在用VSCo de，所以肯定有它的强大之处，不然也不会这么受欢迎。
在vs code中，想要将html文件打开到浏览器有两种方式，一个是debug模式一个是下载插件。
接下来就看以下这两种方式。

二、打开方式

前提，已安装浏览器，推荐谷歌的Chr o m e 浏览器，调试界面以及性能都是杠杠的

1. VSCod e 自带 工具打开

VSCod e自带的调试工具就可以打开html到浏览器
首先你要写一个html 页面，可在文本编辑器中写好后改后缀为html
也可直接在VSCod e中创建的空的html文件中输入 html弹出快捷创建方式，选择 html:5即可创建模板
在这里插入图片描述
 然后编写简单的几条信息，用于展示

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>HTML网页学习</h1>
    <p>使用html来实现网页的界面显示信息，编写一篇文章</p>
    床前明月光
    <!-- 换行 -->
    <br>
    十步杀一人
</body>
</html>