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

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

news 2026/3/27 1:05:34

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

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

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

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

1949–2024年中国县级行政区划（逐年）｜全国范围、75年连续、SHP格式

&#x1f50d; 数据简介 本数据集完整覆盖 1949年至2024年 共 76个年份 的中国县级行政区划边界&#xff0c;是目前公开可获取的时间跨度最长、更新粒度最细的全国县级历史区划产品。 每一年份均提供独立、闭合、无重叠的面状矢量边界&#xff0c;属性表包含标准名称、行政区划…...

编程新知 2026/3/27 0:59:40

从Address Editor入手：在Block Design中精准调整Bram存储深度的实战解析

1. 当Bram存储深度无法修改时&#xff0c;你该怎么做&#xff1f; 第一次在Vivado中使用Block Design搭建系统时&#xff0c;很多人都会遇到一个奇怪的现象&#xff1a;明明在Bram IP核的参数设置界面看到了"Depth"这个选项&#xff0c;但无论如何点击都无法修改。这…...

编程新知 2026/3/27 0:53:39

技术揭秘：深入解析Universal-IFR-Extractor固件逆向工程工具

技术揭秘&#xff1a;深入解析Universal-IFR-Extractor固件逆向工程工具 【免费下载链接】Universal-IFR-Extractor Utility that can extract the internal forms represenation from both EFI and UEFI modules. 项目地址: https://gitcode.com/gh_mirrors/un/Universal-IF…...

编程新知 2026/3/27 0:19:27

Markdown Viewer浏览器扩展完全指南：从安装到高级配置

Markdown Viewer浏览器扩展完全指南&#xff1a;从安装到高级配置 【免费下载链接】markdown-viewer Markdown Viewer / Browser Extension 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer Markdown Viewer是一款功能丰富的浏览器扩展&#xff0c;专为提…...

编程新知 2026/3/27 0:09:21

Java高频面试题：RocketMQ有哪些使用场景？

大家好&#xff0c;我是锋哥。今天分享关于【Java高频面试题&#xff1a;RocketMQ有哪些使用场景&#xff1f;】面试题 。希望对大家有帮助&#xff1b;Java高频面试题&#xff1a;RocketMQ有哪些使用场景&#xff1f;RocketMQ 是阿里巴巴开源的一款分布式消息中间件&#xff0…...

编程新知 2026/3/26 23:22:55

小红书笔记API避坑指南：数据结构解析与常见错误排查

小红书笔记API避坑指南&#xff1a;数据结构解析与常见错误排查 在小红书生态中&#xff0c;API作为连接开发者与平台数据的桥梁&#xff0c;其重要性不言而喻。但许多开发者在实际调用过程中&#xff0c;常常陷入数据结构理解不透、错误排查效率低下的困境。本文将从小红书笔记…...

编程新知 2026/3/26 23:12:53

从EWA Splatting到3DGS：一阶泰勒展开如何保住高斯的“椭圆”形状？

从EWA Splatting到3DGS&#xff1a;一阶泰勒展开如何保住高斯的“椭圆”形状&#xff1f; 在计算机图形学的演进历程中&#xff0c;三维高斯分布&#xff08;3D Gaussian&#xff09;的投影问题一直是个既基础又关键的挑战。想象一下&#xff0c;当你试图将一个完美的三维椭球投…...

编程新知 2026/3/26 22:34:20

开源项目主题系统的3大核心机制深度解析：从CSS变量到动态切换的完整实现方案

开源项目主题系统的3大核心机制深度解析&#xff1a;从CSS变量到动态切换的完整实现方案 【免费下载链接】vue-vben-admin vbenjs/vue-vben-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统&#xff0c;支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统&…...

编程新知 2026/3/26 22:30:19

告别低效写作：盘点2026年标杆级的AI论文网站

一天写完毕业论文在2026年已不再是天方夜谭。2026年最炸裂、实测能大幅提速的AI论文网站&#xff0c;覆盖选题构思、文献整理、内容生成、格式排版全流程&#xff0c;帮你高效搞定论文写作。 一、全流程王者&#xff1a;一站式搞定论文全链路&#xff08;一天定稿首选&#xff…...

编程新知 2026/3/26 20:57:50

别再只用Cesium了！Three.js + Cesium 1.8 整合实战：从零搞定天地图中文底图与BIM模型加载

Three.js与Cesium 1.8深度整合实战&#xff1a;天地图中文底图与BIM模型加载全解析 当我们需要在三维地理信息系统中同时展示宏观地理环境和精细建筑内部结构时&#xff0c;单独使用Cesium或Three.js往往难以完美兼顾。本文将带你完成一次技术栈的深度整合&#xff0c;解决国内…...

编程新知 2026/3/26 20:11:42