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

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

news 2025/10/27 0:25:06

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

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

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

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/10/27 0:13:49

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/10/10 10:43:25

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/10/19 13:26:36

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/7/15 0:42:05

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

编程新知 2025/10/12 20:25:22

【若依】框架项目部署笔记

参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作&#xff1a; 压缩包下载&#xff1a;http://download.redis.io/releases 1. 上传压缩包&#xff0c;并进入压缩包所在目录&#xff0c;解压到目标…...

编程新知 2025/10/20 15:03:31

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2025/10/21 21:00:55

Linux入门(十五)安装java安装tomcat安装dotnet安装mysql

安装java yum install java-17-openjdk-devel查找安装地址 update-alternatives --config java设置环境变量 vi /etc/profile #在文档后面追加 JAVA_HOME"通过查找安装地址命令显示的路径" #注意一定要加$PATH不然路径就只剩下新加的路径了&#xff0c;系统很多命…...

编程新知 2025/10/24 14:11:32