VSCode创建并运行html页面(使用Live Server插件)

目录

  • 一、参考博客
  • 二、安装Live Server插件
  • 三、新建html页面
    • 3.1 选择文件夹
    • 3.2 新建html文件
    • 3.3 快速生成html骨架
  • 四、运行html页面

一、参考博客

https://blog.csdn.net/zhuiqiuzhuoyue583/article/details/126610162
https://blog.csdn.net/m0_74014525/article/details/132737800

二、安装Live Server插件

点击扩展按钮,搜索Live server,点击“安装”按钮
在这里插入图片描述

三、新建html页面

3.1 选择文件夹

在自己喜欢的位置新建一个文件夹作为存放html页面的文件夹
在这里插入图片描述
在VSCode中点击“文件”,再点击“打开文件夹”
在这里插入图片描述
在弹出的窗口中选择刚才新建好的文件夹,点击“选择文件夹”
在这里插入图片描述

3.2 新建html文件

在打开的文件夹中选择“新建文件”按钮
在这里插入图片描述
在输入框中输入“xxx.html”,其中xxx是html文件的名字,回车
在这里插入图片描述

3.3 快速生成html骨架

输入!(英文),回车
在这里插入图片描述
html骨架生成成功
在这里插入图片描述

四、运行html页面

鼠标右击,选择“Open with Live Server”选项
在这里插入图片描述
右下角显示端口号,我这里是5500
在这里插入图片描述
打开浏览器,输入网址 http://localhost:【端口号】/【html文件名】.html,我这里是http://localhost:5500/testhtml.html,大家根据自己的端口号和html文件名修改网址
在这里插入图片描述
当html文件的内容被修改时,使用快捷键ctrl+s保存后,网页将自动刷新
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/761488.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

偏微分方程算法之抛物型方程差分格式编程示例八(紧交替方向隐格式)

目录 一、研究问题 二、C++代码 三、计算结果 一、研究问题 示例七中采用交替方向格式进行抛物型方程求解,这里继续以紧交替方向隐格式对相同的问题进行求解。 紧交替方向隐格式的原理及推导请参考: 偏微分方程算法之二维初边值问题(紧交替方向隐格式)_二维抛物方程的p…

Kafka-时间轮和延迟操作-源码流程

TimingWheel 字段: buckets:Array.tabulate[TimerTaskList]类型,其每一个项都对应时间轮中的一个时间格,用于保存 TimerTaskList的数组。在TimingWheel中,同一个TimerTaskList中的不同定时任务的到期时间可能 不同&a…

小型语言模型的兴起

过去几年,我们看到人工智能能力呈爆炸式增长,其中很大一部分是由大型语言模型 (LLM) 的进步推动的。GPT-3 等模型包含 1750 亿个参数,已经展示了生成类似人类的文本、回答问题、总结文档等能力。然而,虽然 LLM 的能力令人印象深刻…

海洋海事NEMA2000耐腐蚀不锈钢航空插头插座

海洋海事NEMA2000耐腐蚀不锈钢航空插头插座是为适应海洋环境中船舶使用的特殊要求而设计的。这类插头插座不仅要满足基本的电气连接功能,还要具备耐海水腐蚀、防水、防尘、防震等特性,以确保在恶劣的海上环境下仍能保持稳定的性能。 NMEA 2000插头插座的…

cesium自定义弹框

token记得换成您自己的!!! 申请cesium的token 官网【Cesium: The Platform for 3D Geospatial】 pickEllipsoid在加载地形的情况下有一定误差,地形凹凸程度越大,误差越大。 pickPosition在depthTestAgainstTerrain …

3-数据提取方法1(json)(6节课学会爬虫)

3-数据提取方法1(json)(6节课学会爬虫) 1,Json2,哪里会返回json的数据(值得尝试的操作)3,Json字符串转换成字典或python类型进行数据提取(1)Json.…

人脸特征68点识别 C++

1、加载一张图片 main函数&#xff1a; cv::Mat img cv::imread("5.jpg");vector<Point2f> points_vec dectectFace68(img);2、人脸68特征识别函数 在这里vector<Point2f> dectectFace68(Mat src) {vector<Point2f> points_vec;int* pResults …

从0到1搭建微服务框架

目录 1.技术栈&#xff1a; 2.模块介绍: 3.关键代码讲解 3.1基础公共模块(common)依赖&#xff1a; 3.3授权模块(auth)依赖: 3.4授权模块核心配置类(AuthrizatonConfig): 3.4 SecurityConfig.java 3.5 bootstrap的核心配置文件(其他服务配置类似这个)&#xff1a; 3.6n…

视频编解码从H.264到H.266:浅析GB28181安防视频汇聚EasyCVR视频压缩技术

随着信息技术的飞速发展&#xff0c;视频编解码技术也在不断革新&#xff0c;以适应高清、超高清甚至8K视频时代的到来。视频编解码技术作为数字多媒体领域的核心技术之一&#xff0c;也在不断地演进和革新。从早期的H.261到现在的H.265、H.266&#xff0c;每一次技术的升级都极…

便携式气象站:科技助力,气象观测的新选择

在气象观测领域&#xff0c;便携式气象站不仅安装方便、操作简单&#xff0c;而且功能齐全、性能稳定&#xff0c;为气象观测带来了极大的便利。 首先&#xff0c;便携式气象站的便携性&#xff0c;与传统的气象站相比&#xff0c;它不需要复杂的安装过程和固定的设备基础&…

收银系统源码-千呼新零售2.0【移动管理端】

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…

昂首资本实例使用价格行为策略,交易翻倍一点都不难

交易翻倍难吗&#xff1f;当Anzo Capital昂首资本使用价格行为策略进行交易时&#xff0c;发现一点都不难&#xff0c;以下是使用价格行为策略的实例分享&#xff1a; 1. 在初次交易信号出现时&#xff0c;推荐在1.00429价位入场&#xff0c;将止损设于1.04399&#xff0c;止盈…

微信小程序的在线客服系统源码 附带完整的源代码包以及搭建部署教程

系统概述 微信小程序的在线客服系统源码是一套专门为微信小程序开发的客服解决方案。它通过与微信小程序的紧密集成&#xff0c;为用户提供了便捷、高效的客服沟通渠道。该系统源码采用先进的技术架构&#xff0c;具备良好的稳定性和扩展性&#xff0c;能够满足不同规模企业的…

【数据结构】C语言实现二叉树的基本操作——二叉树的层次遍历、求深度、求结点数……

C语言实现二叉树的基本操作 导读一、层次遍历1.1 算法思路1.2 算法实现1.2.1 存储结构的选择1.2.2 函数的三要素1.2.3 函数的实现 1.3 小结 二、求二叉树的深度2.1 层序遍历2.2 分治思想——递归 三、 求二叉树的结点数3.1 求二叉树的结点总数3.1.1 层序遍历3.1.2 分治思想——…

Cherno 游戏引擎笔记 (45~60)

有几个部分的笔记以图片形式呈现&#xff08;如果没找到文本可以查看是否遗漏了图片笔记&#xff09; My Github REPO(GitHub - JJJJJJJustin/Nut: The game_engine which learned from Cherno) 源码笔记&#xff0c;希望帮到你 :-} ---Shader Library&#xff08;着色器库&…

[机器学习]-4 Transformer介绍和ChatGPT本质

Transformer Transformer是由Vaswani等人在2017年提出的一种深度学习模型架构&#xff0c;最初用于自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;特别是机器翻译。Transformer通过自注意机制和完全基于注意力的架构&#xff0c;核心思想是通过注意力来捕捉输入序列…

什么是接口测试,我们如何实现接口测试?

1. 什么是接口测试 顾名思义&#xff0c;接口测试是对系统或组件之间的接口进行测试&#xff0c;主要是校验数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及相互逻辑依赖关系。其中接口协议分为HTTP,WebService,Dubbo,Thrift,Socket等类型&#xff0c;测试类型又主…

oracle plsql如何debug触发器

进入测试窗口 Test Window 写以下代码 declarebegininsert into tableA values();end; 如果tableA有insert触发器&#xff0c;插入数据的时候&#xff0c;就能进入触发器的代码里面

【区块链+基础设施】区块链服务网络 BSN | FISCO BCOS应用案例

BSN&#xff08;Blockchain-based Service Network&#xff0c;区块链服务网络&#xff09;是一个跨云服务、跨门户、跨底层框架&#xff0c;用于部 署和运行各类区块链应用的全球性基础设施网络&#xff0c;旨在为开发者提供低成本和技术互通的区块链一站式服务。 2019 年 12…

Android LayoutInflater 深度解析

在 Android 开发中&#xff0c;LayoutInflater 是一个非常重要的工具。它允许我们从 XML 布局文件中动态地创建 View 对象&#xff0c;从而使得 UI 的创建和管理更加灵活。本文将深入解析 android.view.LayoutInflater&#xff0c;包括它的基本用法、常见问题以及高级用法。 什…