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

一、参考博客

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保存后,网页将自动刷新
在这里插入图片描述

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: VSCode Live Server插件是一款非常实用的插件,它可以帮助开发者在本地快速启动一个服务器,实时预览网页。使用插件可以省去手动刷新浏览器的麻烦,提高开发效率。此外,该插件还支持自动保存文件并刷新页面,方便开发者快速预览修改后的效果。总之,VSCode Live Server插件是一款非常实用的工具,值得开发者使用。 ### 回答2: VSCode Live Server 插件是一款功能强大的开发工具,可以使前端开发人员更快、更方便地编写和调试网站代码。这个插件基于 Node.js 构建,具有轻量级、易用、高效等特点。 它可以自动监视您编辑的 HTML、CSS 和 JavaScript 文件,并在保存文件时动态地重新加载页面,这意味着您可以立即查看您所作的更改,并在浏览器中进行实时预览。 此外,这个插件还带有很多其他有用的功能,例如: 1. 支持简单的 HTTP 服务器功能,可以轻松地将您的基于 HTML 的网站部署到本地或公共服务器上。 2. 它可以自动打开浏览器并加载您的网站,从而使预览过程更加流畅和轻松。 3. 它还集成了与 VSCode 的调试器,允许您在 VSCode 编辑器中直接调试 JavaScript 代码。 4. 还包括基础的页面分析功能,可以帮助您调试代码,识别和解决任何问题。 总之,VSCode Live Server 是一个非常有用的插件,可以极大地简化和加速前端网站开发的过程。它是对开发人员的巨大帮助,可以使他们专注于代码而不用担心复杂的部署和调试问题。 ### 回答3: VS Code的Live Server插件是一个非常方便的工具,使得开发者能够实时更新网页并查看页面所做更改的效果。这个插件具有许多功能,它能够使得开发者更加高效地工作。 首先,Live Server插件可以在本地搭建一个服务器,这样开发者就可以在本地进行开发,而无需上传代码到服务器上。这大大提高了开发效率,同时也节省了开发者的时间和资源成本。 其次,该插件带有自动刷新功能。这就意味着,一旦你对代码做出更改并保存,页面就会自动刷新,你可以立即看到效果。这样的自动刷新功能可以大大减少开发人员的时间和工作量,并使他们更容易调试代码。 另外,Live Server还提供了实时模拟网络连接的功能。开发人员可以模拟各种网络条件,例如缓慢的互联网连接或高峰期的网络延迟等,以测试他们的网站在此类情况下的表现。 此外,Live Server还允许开发人员在IE浏览器中进行测试和调试。这特别适用于那些必须支持旧版本的网站开发人员。在Live Server插件中,只需单击鼠标几下,就可以在IE中开始自动测试。 综上所述,Live Server插件是开发人员的理想工具,它可以使开发过程更加高效和简单。它的许多便利功能可以帮助开发人员更快速地开发他们的网站,并集成其他工具以帮助他们测试和调试代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值