当前位置： 首页 > news >正文

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

news 2026/2/8 0:13:35

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

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

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

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

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

一、介绍

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

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

二、打开方式

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

1. VSCode自带工具打开

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

<!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><h1>HTML网页学习</h1><p>使用html来实现网页的界面显示信息，编写一篇文章</p>床前明月光<!-- 换行 --><br>十步杀一人
</body>
</html>

在VSCode中打开此html（html文件右键使用VSCode打开即可）
在VSCode中选择左边的debug图标，然后选择蓝色框的Run and Debug按钮，再选择浏览器即可打开
如图
在这里插入图片描述
打开的界面如下
在这里插入图片描述
此时在VSCode中会出现一个调试bug的一排按钮，有拖动、暂停、停止、重启等，如下
在这里插入图片描述

2. 使用插件（Live Server）打开

在VSCode中左侧栏选择俄罗斯方块（Extensions或者Ctrl+shift+X）打开插件安装界面
在搜索框中输入Live Server
在这里插入图片描述
install安装即可，我这里是已经安装好的界面
然后到html中鼠标右键选择Open with Live Server或者直接快捷键Alt+L然后Alt+O即可打开
在这里插入图片描述
再或者直接访问默认的地址即默认本机地址加端口号加文件名如http://127.0.0.1:5500/test.html
只需将test换成你的html文件名即可
在这里插入图片描述

注：如果html文件中有代码改动，在浏览器页面刷新即可，不用关闭重新打开

相关文章：

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

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2023/8/27 5:08:05

2022年03月 C/C++（四级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;拦截导弹 某国为了防御敌国的导弹袭击&#xff0c; 发展出一种导弹拦截系统。 但是这种导弹拦截系统有一个缺陷&#xff1a; 虽然它的第一发炮弹能够到达任意的高度&#xff0c;但是以后每一发炮弹都不能高于前一发的高度。 某天&#xff0c; 雷达捕捉到敌国的…...

编程日记 2023/8/27 5:07:03

五公里场地训练笔记（完整版）

由于考研和口罩等原因&#xff0c;停跑了比较长的时间。中长距离就是这样&#xff0c;修为尽失&#xff0c;大概是要从头开始了&#xff0c;不过还是要乐观的面对&#xff0c;CHEER UP&#xff01; 翻看咕咚软件&#xff0c;以前的PB是21&#xff1a;12&#xff0c;在2017年9月…...

编程日记 2023/8/27 5:06:02

【电能质量扰动】基于ML和DWT的电能质量扰动分类方法研究（Matlab实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/27 5:05:00

使用 OpenAI GPT 模型的最佳实践

推荐&#xff1a;使用NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 为了帮助用户获得最佳输出&#xff0c;OpenAI 提供了使用 GPT 模型的最佳实践。这来自体验&#xff0c;因为许多用户不断尝试使用此模型并找到了最有效的方法。 在本文中&#xff0c;我将总结使用 Ope…...

编程日记 2023/8/27 5:03:59

解除用户账户控制提醒

解决用户账户控制提醒 1. 前言2. 解决用户账户控制提醒2.1 控制面板2.2 注册表2.3 UAC服务 结束语 1. 前言 当我们使用电脑时&#xff0c;有时进行安装应用或者打开应用时&#xff0c;总会弹出一个提示框&#xff0c;要选择点击是否允许程序运行&#xff1b; 系统经常弹出用户…...

编程日记 2023/8/27 5:02:57

行业追踪，2023-08-23

自动复盘 2023-08-23 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

编程日记 2023/8/27 5:01:56

算法修炼Day60|● 84.柱状图中最大的矩形

LeetCode:84.柱状图中最大的矩形 84. 柱状图中最大的矩形 - 力扣&#xff08;LeetCode&#xff09; 1.思路 双指针思路&#xff0c;以当前数组为中心&#xff0c;借助两个数组存放当前数柱左右两侧小于当前数柱高度的索引&#xff0c;进行h*w的计算。注意首尾节点的左侧索引…...

编程日记 2023/8/27 5:00:53

前端面试题css(一)

题目 盒子垂直水平居中如何实现text-align:center vertical-align: middle水平垂直居中布局positionmargin水平垂直居中布局 grid栅格化布局及其兼容性介绍一下BFC触发 BFC 的条件包括&#xff1a;常见的用途包括&#xff1a; 写过的动画效果overflow有哪些属性visible&#x…...

编程日记 2023/8/27 4:59:52

.NETCORE中关于swagger的分组

有些时候我们的项目接口过多&#xff0c;就希望对应的swagger能够执行分组&#xff0c;网络上的几乎是千篇一律的分组方法&#xff0c;会累死&#xff01; 这里提供一个更加高效的分组方法&#xff0c;比如你可以说哪些模块分到哪个组&#xff0c;哪些权限分到哪个组&#xff…...

编程日记 2023/8/27 4:58:50

4.1011

目录 四次挥手中收到乱序的FIN包会如何处理&#xff1f; 在 TIME_WAIT 状态的 TCP 连接&#xff0c;收到 SYN 后会发生什么&#xff1f; 四次挥手中收到乱序的FIN包会如何处理&#xff1f; 如果FIN报文比数据包先道道客户端&#xff0c;此时FIN是一个乱序报文&#xff0c;此时…...

编程日记 2023/8/27 4:57:49

uniapp中引入axios的错误？

场景 在unaipp中使用axios npm i axios 下载完成后 然后在页面中使用 axios.get(“http://3000/searchS”) 然后报错 Adapter http’ is not available in the build 原因 在 UniApp 中使用 Axios 发送 HTTP 请求时&#xff0c;如果出现错误 “Adapter http’ is not available…...

编程日记 2023/8/27 4:56:48

Discuz!论坛发帖标题字数限制80字符可以修改吗？修改发帖标题字数的方法

Discuz!论坛发帖标题字数限制80字符修改方法 1.数据库修改2.修改JS验证字符数文件3.修改模板中写死的字符限制数4.修改函数验证文件5.修改语言包文件6.更新缓存 Discuz X3.4论坛网站帖子标题字数限制80字符&#xff0c;当我们想使用长标题的时候就得一删再删&#xff0c;实在是…...

编程日记 2023/8/27 4:55:47

R语言画样本不均衡组的箱线图

# 导入 ggplot2 包 library(ggplot2)# 示例数据框&#xff0c;包含数值数据和分组信息 data <- data.frame(Group c(rep("Group A",10), rep("Group B",15),rep("Group C",20)),Value c(rnorm(10, mean 10, sd 2),rnorm(15, mean 15, sd…...

编程日记 2023/8/27 4:54:46

ArcGIS学习总结（19）——要素转点与空间连接（属性表字段映射）

1.在新创建的面矢量数据的属性表中没有对应的字段信息&#xff0c;为了能够和有属性信息的数据进行匹配&#xff0c;使其具有对应字段的信息。 2.需要匹配的矢量文件属性表信息。 3.对新创建的矢量文件执行要素转点&#xff1a;数据管理工具→要素→要素转点。 4.选择分析工…...

编程日记 2023/8/27 4:53:43

【每日一题Day306】LC228汇总区间 | 双指针

汇总区间【LC228】 给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说&#xff0c;nums 的每个元素都恰好被某个区间范围所覆盖&#xff0c;并且不存在属于某个范围但不属于 nums 的数字 x 。 列表中的每个区间范…...

编程日记 2023/8/27 4:52:42

vue中实现echarts三维散点图

需要安装 echarts 同时引入 echarts-gl 我安装的版本&#xff1a; "echarts": "^5.3.2", "echarts-gl": "^2.0.9", import Vue from "vue"; import * as echarts from "echarts"; Vue.prototype.$echarts echa…...

编程日记 2023/8/27 4:51:40

多头自注意力机制的代码实现

文章目录 1、自注意力机制2、多头注意力机制 transformer的整体结构&#xff1a; 1、自注意力机制 自注意力机制如下&#xff1a; 计算过程&#xff1a; 代码如下&#xff1a; class ScaledDotProductAttention(nn.Module):def __init__(self, embed_dim, key_size, value_…...

编程日记 2023/8/27 4:50:39

抽象工厂模式

目录 了解抽象工厂模式前的前置知识 什么是抽象工厂模式&#xff1f; 为什么要提出抽象工厂模式&#xff1f; 抽象工厂模式中的四大角色&#xff1f; 抽象工厂模式的优缺点&#xff1f; 抽象工厂模式的适用场景&#xff1f; 了解抽象工厂模式前的前置知识 在讲抽象工厂模式…...

编程日记 2023/8/27 4:49:37

登录校验-Filter-详解

目录 执行流程 拦截路径 过滤器链 小结 执行流程 过滤器Filter拦截到请求之后&#xff0c;首先执行方放行之前的逻辑&#xff0c;然后执行放行操作&#xff08;doFilter&#xff09;&#xff0c;然后会访问对应的Web资源&#xff08;对应的Controller类&#xff09;&#…...

编程日记 2023/8/27 4:48:36

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/2/6 2:47:15

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/4 16:15:43

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2026/1/29 8:41:55

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2026/2/6 1:00:25

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2026/2/1 2:08:53

基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...

编程新知 2026/2/6 5:58:36