{%hackmd @dzif24x25/yRBnguqQQl-2ylH1j5h0cg %} # 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) --- 注意!這網頁是從本機建立,正常情況下,若沒有做特殊設定,他人無法連線至這個網頁 --- ### 如此一來,你就學會了如何使用VS Code來寫HTML
{"metaMigratedAt":"2023-06-18T00:47:08.213Z","metaMigratedFrom":"YAML","title":"HTML 起手式","breaks":true,"contributors":"[{\"id\":\"b1b336d5-b75d-4c19-b4f6-fccd69a2a9f2\",\"add\":791,\"del\":4}]"}
    158 views
   Owned this note