如何在Visual Studio Code中運行HTML文件
目錄
方法1:創建、打開和保存HTML文件1、打開Visual Studio Code。2、打開或創建一個新的HTML文件。3、把文件另存為HTML文件。方法2:使用終端1、打開Visual Studio Code。2、打開或創建一個新的HTML文件。3、打開一個新的終端。4、鍵入cd後接HTML文件的路徑,然後按? Enter5、鍵入start後接HTML文件名,然後按? Enter方法3:使用“HTML Preview”擴展1、打開Visual Studio Code。2、點擊“擴展”按鈕。3、在搜索欄中鍵入HTML Preview。4、點擊“HTML Preview”擴展。5、點擊安裝6、打開或創建一個新的HTML文件。7、點擊分屏預覽按鈕。方法4:使用“Open in Browser”擴展1、打開Visual Studio Code。2、點擊“擴展”按鈕。3、在搜索欄中鍵入open in browser。4、點擊“open in browser”擴展。5、點擊安裝6、打開或創建一個新的HTML文件。7、在HTML代碼中右鍵點擊任意位置。8、點擊在默認瀏覽器中打開Visual Studio Code是微軟推出的一個源代碼編輯器。它在Windows、macOS和Linux上都能使用。你可以通過它用各種編碼語言來編寫和編輯代碼,其中也包括HTML。但要是你想運行HTML代碼來預覽外觀,又該怎麼辦呢?好在有一些Visual Studio Code的擴展能讓你在Visual Studio Code中輕鬆運行HTML代碼。你也可以使用終端來運行HTML文件。這篇文章將教你如何在Visual Studio Code中運行HTML文件。方法1:創建、打開和保存HTML文件
1、打開Visual Studio Code。它的圖標有點像一條藍色絲帶。點擊圖標即可啟動Visual Studio Code。你可以在Windows的“開始”菜單、Mac的“應用”文件夾或Linux的 “應用程序”菜單中找到它。如果你還沒有安裝,可以從 https://code.visualstudio.com/ 免費下載Visual Studio Code。只用點擊網頁上的下載按鈕,然後從網頁瀏覽器或“下載”文件夾中打開安裝文件。按照説明完成安裝。
2、打開或創建一個新的HTML文件。通過以下步驟之一來打開或創建一個新文件。要創建一個新文件,點擊頂部菜單欄中的文件。然後點擊新建文件。開始輸入HTML代碼。
要打開現有的文件,可在頂部的菜單欄中點擊文件。然後點擊打開文件。找到你要打開的HTML文件,點擊選中它。然後點擊打開。
3、把文件另存為HTML文件。如果準備在Visual Studio Code中運行HTML文件,你首先需要把文件另存為HTML格式。一旦保存了HTML文件,你就可以在所選擇的任何瀏覽器中運行它。按照以下步驟在Visual Studio Code中保存HTML文件:點擊頂部菜單欄中的文件。
點擊另存為。
在“文件名”旁邊輸入文件名。
使用“另存為類型”旁邊的下拉菜單選擇“HTML”。
點擊保存。
方法2:使用終端
1、打開Visual Studio Code。Visual Studio Code的圖標有點像一條藍色絲帶。點擊圖標即可啟動Visual Studio Code。你可以在Windows的“開始”菜單、Mac的“應用”文件夾或Linux的 “應用程序”菜單中找到它。
2、打開或創建一個新的HTML文件。如果還沒有打開HTML文件,那就打開一個現有的HTML文件,或者創建一個新的HTML文件並另存為HTML格式。如果已經打開,那就點擊屏幕上方包含你的HTML文件的選項卡來進行查看。
3、打開一個新的終端。點擊屏幕上方的終端,然後點擊新建終端。終端是在Visual Studio Code中運行HTML文件而不使用擴展的唯一方法。但同時它也是最複雜的方法。或者,你可以點擊頂部的查看,然後點擊終端。
4、鍵入cd後接HTML文件的路徑,然後按? Enter。這樣就會轉到你的HTML文件的位置。比如,你的HTML文件在“文檔”文件夾中,你就可以鍵入cd 用户用户名文檔並按Enter。如果你的HTML文件被保存在與操作系統不同盤符的分區上,那你得在終端中改成該盤符,然後才能轉到HTML文件的路徑。要進行更改,只用輸入盤符(比如D:表示D:盤),然後按Enter。
如果你不確定HTML文件的保存位置,可以右鍵點擊屏幕上方的HTML文件選項卡,然後點擊複製路徑。在終端輸入cd,然後緊接着就粘貼剛才複製的路徑。刪除掉路徑末尾的文件名,然後按Enter。
如果HTML文件的路徑中的任何一個文件夾名稱包含了空格,那麼終端就無法轉到該文件夾。使用Windows上的“文件資源管理器”或Mac上的“訪達”轉到任何名稱中包含空格的文件夾,然後重命名這些文件夾以避免任何空格(例如,你的文件夾名稱為“HTML Files”,那就把它改為“HTML_Files”)。
5、鍵入start後接HTML文件名,然後按? Enter。例如,你要運行一個索引HTML文件,那就可以鍵入start index.html並按Enter。這樣會在一個單獨的窗口中啟動HTML文件,以便你預覽HTML文件。要關閉預覽,只用點擊窗口頂部的“x”圖標。
方法3:使用“HTML Preview”擴展
1、打開Visual Studio Code。它的圖標有點像一條藍色絲帶。點擊圖標即可啟動Visual Studio Code。你可以在Windows的“開始”菜單、Mac的“應用”文件夾或Linux的 “應用程序”菜單中找到它。
2、點擊“擴展”按鈕。這是左側菜單欄中類似4個方塊的圖標。這樣將顯示擴展的搜索菜單。
3、在搜索欄中鍵入HTML Preview。搜索欄位於左邊擴展菜單的頂部。這樣將顯示符合你搜索查詢的擴展列表。“HTML Preview”是Visual Studio Code的一個擴展,讓你能在Visual Studio Code中使用分屏或全屏模式來預覽HTML文件。
4、點擊“HTML Preview”擴展。它應該是列表頂部的第一個擴展。它是由Thomas Haakon Townsend創建的,圖標類似於一個橙色的盾牌,中間有一個“5”(HTML 5的標誌)。
5、點擊安裝。它在擴展菜單右側的信息頁面中,位於“HTML Preview”標題下面。這樣將安裝該擴展。等幾分鍾,讓它完成安裝。
6、打開或創建一個新的HTML文件。如果還沒有打開HTML文件,那就打開一個現有的HTML文件,或者創建一個新的HTML文件並另存為HTML格式。如果已經打開,那就點擊屏幕上方包含你的HTML文件的選項卡來進行查看。
7、點擊分屏預覽按鈕。這是一個類似於分屏的圖標,左邊有一個放大鏡。它位於屏幕的右上角。這樣就會在Visual Studio Code中以分屏方式打開HTML文件的預覽。按住Alt並點擊預覽按鈕,然後就能查看HTML代碼的全屏預覽。
要關閉預覽,點擊屏幕上方預覽標籤中的“x”圖標就可以了。
方法4:使用“Open in Browser”擴展
1、打開Visual Studio Code。它的圖標有點像一條藍色絲帶。點擊圖標即可啟動Visual Studio Code。你可以在Windows的“開始”菜單、Mac的“應用”文件夾或Linux的 “應用程序”菜單中找到它。
2、點擊“擴展”按鈕。這是左側菜單欄中類似4個方塊的圖標。這樣將顯示擴展的搜索菜單。
3、在搜索欄中鍵入open in browser。搜索欄位於左邊擴展菜單的頂部。這樣將顯示符合你搜索查詢的擴展列表。“Open in browser”是Visual Studio Code的一個擴展,讓你能在Visual Studio Code中使用所選擇的網絡瀏覽器來打開HTML文件。
4、點擊“open in browser”擴展。它應該是列表頂部的第一個擴展。它是由TechER創建的,名稱都是小寫字母。點擊擴展選中它。
5、點擊安裝。它在擴展菜單右側的信息頁面中,位於“open in browser”標題的下面。這樣將安裝該擴展。等幾分鐘,讓它完成安裝。
6、打開或創建一個新的HTML文件。如果還沒有打開HTML文件,那就打開一個現有的HTML文件,或者創建一個新的HTML文件並另存為HTML格式。如果已經打開,那就點擊屏幕上方包含你的HTML文件的選項卡來進行查看。
7、在HTML代碼中右鍵點擊任意位置。這項將顯示一個上下文菜單。
8、點擊在默認瀏覽器中打開。這樣就會在默認網絡瀏覽器中打開HTML文件,以便你進行查看。或者,你也可以點擊在其他瀏覽器中打開,然後雙擊你選擇的網絡瀏覽器。
如果要求你選擇一個默認瀏覽器,那就點擊你要用來打開文件的瀏覽器,然後點擊確定。