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

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

news 2026/5/12 16:02:18

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

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

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

如何在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

构建个人技能知识库：从Markdown管理到自动化实践

1. 项目概述&#xff1a;一个技能库的诞生与价值最近在整理个人知识体系时&#xff0c;我一直在思考一个问题&#xff1a;如何将那些零散的、跨领域的“技能点”系统化地管理起来&#xff0c;形成一个可以持续迭代、随时取用的个人工具箱&#xff1f;这不仅仅是写一份简历上的技…...

编程新知 2026/5/12 15:20:44

Claude Code 代码保存全攻略：告别丢失，高效管理开发成果

日常开发中&#xff0c;用 Claude Code 生成代码后&#xff0c;很多人都会遇到这些糟心事&#xff1a;生成的代码片段零散复制&#xff0c;换个会话就找不到&#xff1b;手动保存步骤繁琐&#xff0c;遗漏文件或格式错乱&#xff1b;切换不同 AI 模型时&#xff0c;代码记录无法…...

编程新知 2026/5/12 14:57:57

基于计算机视觉的无接触生理测量：从远程PPG原理到工程实践

1. 项目概述&#xff1a;当普通摄像头成为健康监测的“听诊器” 几年前&#xff0c;我在一个远程医疗项目的早期原型测试中&#xff0c;遇到了一个棘手的问题。我们需要为居家康复的老人提供持续的心率监测&#xff0c;但传统的指夹式血氧仪或胸带式心率带&#xff0c;要么让用…...

编程新知 2026/5/12 12:29:21

【最新v2.7.1 版本安装包】OpenClaw 新手部署全攻略，无需命令零代码一键安装保姆级

Windows 一键部署 OpenClaw 教程&#xff5c;5 分钟搞定本地 AI 智能体&#xff0c;告别复杂配置 核心亮点 零代码门槛&#xff5c;全程可视化&#xff5c;无需手动配置运行环境&#xff5c;内置全部运行依赖&#xff5c;28 万 Tokens 额度 前言 2026 年开源圈热度居高不下…...

编程新知 2026/5/12 11:11:07

紫光同创Logos系列FPGA的PCB设计避坑指南：从BGA扇出到配置管脚，新手必看

紫光同创Logos系列FPGA的PCB设计避坑指南&#xff1a;从BGA扇出到配置管脚实战解析 第一次接触紫光同创Logos系列FPGA的硬件设计时&#xff0c;面对密密麻麻的BGA封装和复杂的配置电路&#xff0c;多数工程师都会感到无从下手。我在设计第一块PGL22G开发板时&#xff0c;就曾因…...

编程新知 2026/5/12 8:58:18

AI推理冷启动归零实践，奇点大会实测数据：基于WASM+eBPF的Serverless边缘推理框架将P99延迟压至17ms，附开源代码仓链接

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI原生Serverless实践&#xff1a;2026奇点智能技术大会无服务器架构 在2026奇点智能技术大会上&#xff0c;AI原生Serverless成为核心范式——它不再将模型推理简单托管于函数即服务&#xff08;FaaS&…...

编程新知 2026/5/12 8:38:06

别再用LoadRunner了！用JMeter+阿里云PTS搞定mPaaS网关全链路压测（附MGSJMeterExt插件实战）

从LoadRunner到JMeterPTS&#xff1a;mPaaS网关压测的高效实战指南 在移动应用性能优化的战场上&#xff0c;压力测试一直是确保系统稳定性的关键环节。传统工具如LoadRunner虽然功能强大&#xff0c;但面对mPaaS这类移动网关架构时&#xff0c;其高昂的授权成本、复杂的适配流…...

编程新知 2026/5/12 8:28:32

算法题（回溯）

一、题目1、括号生成&#xff08;LC 22&#xff09;2、单词搜索&#xff08;LC 79&#xff09;二、题解1、括号生成&#xff08;LC 22&#xff09;&#xff08;1&#xff09;分析采用回溯的思想解决。递归方法包括 left、right、ans、path、n 五个核心参数&#xff0c;其中 lef…...

编程新知 2026/5/12 7:48:38

航空摇篮长岛：从早期飞行到现代航空工业的技术演进与创新集群

1. 项目概述&#xff1a;从长岛的天空回望航空摇篮如果你对航空史感兴趣&#xff0c;或者像我一样&#xff0c;是个对机械、工程和人类如何突破物理极限着迷的工程师&#xff0c;那么“长岛”这个名字绝对绕不开。它不仅仅是纽约市旁边的一个地理名词&#xff0c;在航空史上&am…...

编程新知 2026/5/12 7:39:34

10分钟搞定：XUnity.AutoTranslator游戏翻译插件终极使用指南

10分钟搞定&#xff1a;XUnity.AutoTranslator游戏翻译插件终极使用指南 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 还在为外语游戏看不懂而烦恼吗&#xff1f;XUnity.AutoTranslator正是你需要的游戏…...

编程新知 2026/5/12 7:07:51