{%hackmd @dzif24x25/IBXIWNXgTju0h2AKtSaLkA %} ###### tags: `HTML` `起手式` `VS Code` `Live Server` # HTML 起手式 ### 開啟 VS Code，並開啟資料夾 ![](https://i.imgur.com/Rqyli38.gif) ### 點選新增檔案圖示新增一個HTML檔案 ![](https://i.imgur.com/L7DCKSl.gif) ### 副檔名設定為`.html` ![](https://i.imgur.com/xOYFzRC.gif) ### 輸入一個`!`，並按下`Tab`，VS Code會幫你完成HTML的起手式 ![](https://i.imgur.com/6Q2DQRQ.gif) ### `Ctrl + S`存檔，此時檔案旁的白點點會消失，代表已檔案已儲存 ![](https://i.imgur.com/WPAjjJj.gif) ### 如果有裝`Live Server`，可以按一下右下角的`Go Live`，即時預覽網頁，並開啟一個Server ![](https://i.imgur.com/bMHlJ6s.gif) ![](https://i.imgur.com/fCxBm4a.png) ### 當HTML中的內容改變時，存檔後，網頁也會隨之改變 ![](https://i.imgur.com/liHVY3j.gif) :::warning 注意！這網頁是從本機建立，正常情況下，若沒有做特殊設定，他人無法連線至這個網頁 ::: ### 如此一來，你就學會了如何使用VS Code來寫HTML :::info 點此前往簡報 https://hackmd.io/@dzif24x25/SJjjV87b2 :::