上高县城乡规划建设局网站,创业项目,无法运行电脑wordpress,重庆微信网站建设多少钱天行健#xff0c;君子以自强不息#xff1b;地势坤#xff0c;君子以厚德载物。 每个人都有惰性#xff0c;但不断学习是好好生活的根本#xff0c;共勉#xff01; 文章均为学习整理笔记#xff0c;分享记录为主#xff0c;如有错误请指正#xff0c;共同学习进步。… 天行健君子以自强不息地势坤君子以厚德载物。 每个人都有惰性但不断学习是好好生活的根本共勉 文章均为学习整理笔记分享记录为主如有错误请指正共同学习进步。 如何在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 langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1HTML网页学习/h1p使用html来实现网页的界面显示信息编写一篇文章/p床前明月光!-- 换行 --br十步杀一人
/body
/html在VSCode中打开此htmlhtml文件右键使用VSCode打开即可 在VSCode中选择左边的debug图标然后选择蓝色框的Run and Debug按钮再选择浏览器即可打开 如图 打开的界面如下 此时在VSCode中会出现一个调试bug的一排按钮有拖动、暂停、停止、重启等如下
2. 使用插件Live Server打开
在VSCode中左侧栏选择俄罗斯方块Extensions或者CtrlshiftX打开插件安装界面 在搜索框中输入Live Server install安装即可我这里是已经安装好的界面 然后到html中鼠标右键选择Open with Live Server或者直接快捷键AltL然后AltO即可打开 再或者直接访问默认的地址即默认本机地址加端口号加文件名如http://127.0.0.1:5500/test.html 只需将test换成你的html文件名即可
注如果html文件中有代码改动在浏览器页面刷新即可不用关闭重新打开
