小程序開發(fā)費(fèi)用多少錢南寧百度首頁優(yōu)化
天行健，君子以自強(qiáng)不息；地勢坤，君子以厚德載物。
每個(gè)人都有惰性，但不斷學(xué)習(xí)是好好生活的根本，共勉！
文章均為學(xué)習(xí)整理筆記，分享記錄為主，如有錯(cuò)誤請指正，共同學(xué)習(xí)進(jìn)步。
如何在VSCode中將html文件打開到瀏覽器
- 一、介紹
- 二、打開方式
- 1. VSCode自帶工具打開
- 2. 使用插件（Live Server）打開
一、介紹
近期在學(xué)習(xí)前端內(nèi)容，遇到了這個(gè)問題，來總結(jié)記錄并分享一下。
html文件一般可右擊選擇打開方式，通過瀏覽器打開
我平時(shí)用idea也可以直接在右上角點(diǎn)擊瀏覽器按鈕打開（這也是我想用idea來寫html的原因）
但大家都在用VSCode，所以肯定有它的強(qiáng)大之處，不然也不會這么受歡迎。
在vscode中，想要將html文件打開到瀏覽器有兩種方式，一個(gè)是debug模式一個(gè)是下載插件。
接下來就看以下這兩種方式。
二、打開方式
前提，已安裝瀏覽器，推薦谷歌的Chrome瀏覽器，調(diào)試界面以及性能都是杠杠的
1. VSCode自帶工具打開
VSCode自帶的調(diào)試工具就可以打開html到瀏覽器
首先你要寫一個(gè)html頁面，可在文本編輯器中寫好后改后綴為html
也可直接在VSCode中創(chuàng)建的空的html文件中輸入html彈出快捷創(chuàng)建方式，選擇html:5即可創(chuàng)建模板
然后編寫簡單的幾條信息，用于展示
<!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網(wǎng)頁學(xué)習(xí)</h1><p>使用html來實(shí)現(xiàn)網(wǎng)頁的界面顯示信息，編寫一篇文章</p>床前明月光<!-- 換行 --><br>十步殺一人
</body>
</html>
在VSCode中打開此html（html文件右鍵使用VSCode打開即可）
在VSCode中選擇左邊的debug圖標(biāo)，然后選擇藍(lán)色框的Run and Debug按鈕，再選擇瀏覽器即可打開
如圖
打開的界面如下
此時(shí)在VSCode中會出現(xiàn)一個(gè)調(diào)試bug的一排按鈕，有拖動、暫停、停止、重啟等，如下
2. 使用插件（Live Server）打開
在VSCode中左側(cè)欄選擇俄羅斯方塊（Extensions或者Ctrl+shift+X）打開插件安裝界面
在搜索框中輸入Live Server
install安裝即可，我這里是已經(jīng)安裝好的界面
然后到html中鼠標(biāo)右鍵選擇Open with Live Server或者直接快捷鍵Alt+L然后Alt+O即可打開
再或者直接訪問默認(rèn)的地址即默認(rèn)本機(jī)地址加端口號加文件名如http://127.0.0.1:5500/test.html
只需將test換成你的html文件名即可
注：如果html文件中有代碼改動，在瀏覽器頁面刷新即可，不用關(guān)閉重新打開