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

news2024/11/16 9:40:13

目录

  • 一、参考博客
  • 二、安装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保存后,网页将自动刷新
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

设计模式5-策略模式(Strategy)

设计模式5-策略模式 简介目的定义结构策略模式的结构要点 举例说明1. 策略接口2. 具体策略类3. 上下文类4. 客户端代码 策略模式的反例没有使用策略模式的代码 对比分析 简介 策略模式也是属于组件协作模式一种。现代软件专业分工之后的第一个结果是框架语音应用程序的划分。组…

MATLAB-振动问题:单自由度无阻尼振动系统受迫振动

一、基本理论 二、MATLAB实现 令式(1.3)中A0 2,omega0 30,omega 40,matlab程序如下: clear; clc; close all;A0 2; omega0 30; omega 40; t 0:0.02:5; y A0 * sin( (omega0 - omega) * t /2) .* s…

【源码+文档+调试讲解】牙科就诊管理系统

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本牙科就诊管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息…

计算机网络 访问控制列表以及NAT

一、理论知识 1. 单臂路由 单臂路由是一种在路由器上配置多个子接口的方法,每个子接口代表不同的 VLAN,用于在一个物理接口上支持多 VLAN 通信。此方法使得不同 VLAN 之间可以通过路由器进行通信。 2. NAT (网络地址转换) NAT 是一种在私有网络和公共…

vue+three.js渲染3D模型

安装three.js: npm install three 页面部分代码&#xff1a; <div style"width: 100%; height: 300px; position: relative;"><div style"height: 200px; background-color: white; width: 100%; position: absolute; top: 0;"><div id&…

小阿轩yx-MySQL数据库管理

小阿轩yx-MySQL数据库管理 使用 MySQL 数据库 在服务器运维工作中不可或缺的 SQL &#xff08;结构化查询语句&#xff09;的四种类型 数据定义语言&#xff08;DDL&#xff09;&#xff1a;DROP&#xff08;删除&#xff09;、CREATE&#xff08;创建&#xff09;、ALTER&…

帝国cms定时审核并更新的方法

比如你网站采集了成千上万篇文章&#xff0c;不可能一下子全部放出来的&#xff0c;所以为了模拟人工发布&#xff0c;那么就需要定时审核发布文章内容&#xff0c;本文内容核心解决了更加个性化的逼真模拟人工更新网站内容。 第一&#xff1a;首先要满足你的表中有未审核的数据…

JavaWeb——MySQL:DML

目录 DML&#xff1a;添加&#xff0c;修改&#xff0c;删除表的数据&#xff1b; 1. 添加表的数据 1.1 给所有列添加数据 1.2 给指定列添加数据 1.3 批量添加信息 总结&#xff1a; DML&#xff1a;添加&#xff0c;修改&#xff0c;删除表的数据&#xff1b; 1. 添加表的…

cube-studio开源一站式机器学习平台,在线ide,jupyter,vscode,matlab,rstudio,ssh远程连接,tensorboard

全栈工程师开发手册 &#xff08;作者&#xff1a;栾鹏&#xff09; 一站式云原生机器学习平台 前言 开源地址&#xff1a;https://github.com/tencentmusic/cube-studio cube studio 腾讯开源的国内最热门的一站式机器学习mlops/大模型训练平台&#xff0c;支持多租户&…

微博默认按照最新时间排序

微博默认按照最新时间排序 目前微博会默认按照推荐顺序排序&#xff0c;如果你想要默认按照时间顺序排序的话&#xff0c;可以使用这个油猴脚本。 演示&#xff1a; 脚本安装地址 源代码地址 参考 本项目基于 vite-plugin-monkey 开发 菜单切换&#xff08;useOption&…

设计模式原则——单一职责原则(SPS)

设计模式原则 设计模式示例代码库地址&#xff1a; https://gitee.com/Jasonpupil/designPatterns 单一职责原则&#xff08;SPS&#xff09;&#xff1a; 又称单一功能原则&#xff0c;面向对象五个基本原则&#xff08;SOLID&#xff09;之一原则定义&#xff1a;一个类应…

深度学习工具jupyter创建并检测pytorch环境以及安装工具包

1. 前言 确保已经安装Python和anaconda&#xff08;anaconda一般自带jupyter&#xff09;。然后创建一个jupyter环境&#xff0c;查看启动后的new有没有环境选项。 如果遇到了EnvironmentLocationNotFound:Not such a environment。说明conda环境安装位置有问题&#xff0c;往…

Qt6 windows10下悬浮按钮栏实现

打王者荣耀的时候,你是否有看到中间的按钮是悬浮在屏幕的左右侧,以及中下位置,背景则是一个播放着视频的画面。 从程序的角度来看,它就是实现了一个悬浮按钮栏的功能。当然了,你也可以做成悬浮列表,悬浮下拉框,悬浮xxx等控件。 这里,我们实现在Windows的版本。手机版…

Vue45 scope

scope 限制css的作用范围 用法 <template><div class"demo"><h2 >学生姓名&#xff1a;{{name}}</h2><h2>学生性别&#xff1a;{{sex}}</h2></div> </template><script>export default {name:Student,data…

240624_昇思学习打卡-Day6-张量Tensor

240624_昇思学习打卡-Day6-张量Tensor 今儿扭头回来看看基础&#xff0c;看看最基本的数据结构&#xff0c;张量&#xff08;Tensor&#xff09;。 张量和数组、矩阵非常相似。是MindSpore网络运算中的基本数据结构&#xff0c;本文主要介绍张量和稀疏张量的属性及用法。 文章…

提示词绕过大模型安全限制

大模型安全绕过策略 简介 本文使用简单的提示词&#xff0c;可以在所有场景中实现针对某开源模型的安全策略绕过。 glm-4-9b-chat 的安全措施还有待完善。 上一代的6b比这一代的9B&#xff0c;要安全&#xff1b;上一代的6B大模型这一招没有用。 正常对话 若在下述正常互动…

小程序安卓手机点击uni-data-select 下拉框选择器会出现蓝色阴影

解决方法&#xff1a;在导入的包中找到uni-data-select.vue&#xff0c;接着找到.uni-stat__select样式&#xff0c;把cursor: pointer去掉。 如果出现穿透问题&#xff0c;uni-select__selector的z-index加高&#xff0c;默认是2。

基于Istio服务网格的熔断限流实现

在微服务架构的宏大图景中&#xff0c;Istio服务网格如同一位精巧的交通指挥官&#xff0c;它不仅确保了服务间通信的顺畅无阻&#xff0c;还通过先进的熔断与限流机制&#xff0c;为系统的稳定性筑起了一道坚固的防线。接下来&#xff0c;让我们一窥Istio如何在不改动服务代码…

Python武器库开发-武器库篇之Thinkphp5 SQL注入漏洞(六十六)

Python武器库开发-武器库篇之Thinkphp5 SQL注入漏洞&#xff08;六十六&#xff09; 漏洞环境搭建 这里我们使用Kali虚拟机安装docker并搭建vulhub靶场来进行ThinkPHP漏洞环境的安装&#xff0c;我们进入 ThinkPHP漏洞环境&#xff0c;可以 cd ThinkPHP&#xff0c;然后通过 …

Arduino IDE下载、安装和配置

文章开始先把我自己网盘里的安装包分享给大家&#xff0c;链接&#xff1a;https://pan.baidu.com/s/1cb2_3m0LnuSKLnWP_YoWPw?pwdwwww 提取码&#xff1a;wwww 里面一个是Arduino IDE的安装包&#xff0c;另一个是即将发布的版本。 第一个安装包打开直接按照我的步骤安装就…