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