---
# System prepended metadata

title: HTML 起手式
tags: [HTML, Live Server, VS Code, 起手式]

---

{%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
:::