HTML 快速開始
## 一、HTML 是什麼？
HTML（HyperText Markup Language，超文字標記語言）是用來建立網頁結構的語言。
它不是一般的程式語言，而是透過「標籤（Tag）」描述網頁內容，例如：
- 標題
- 段落
- 圖片
- 連結
- 表格
- 表單
HTML 通常會搭配：
- **HTML**：負責網頁結構與內容
- **CSS**：負責網頁外觀與排版
- **JavaScript**：負責互動與功能
---
## 二、開始撰寫 HTML 的工具
撰寫 HTML 只需要：
1. 一個文字編輯器
例如：
- Visual Studio Code
- Notepad++
- Windows 記事本
- macOS TextEdit
2. 一個網頁瀏覽器
例如：
- Google Chrome
- Microsoft Edge
- Firefox
- Safari
---
## 三、建立第一個 HTML 網頁
### 步驟 1：建立檔案
新增一個文字檔案，並命名為：
```text
index.html
```
請確認副檔名是 `.html`，而不是 `.txt`。
---
### 步驟 2：輸入 HTML 程式碼
將以下內容輸入到 `index.html`：
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
```
---
## 四、程式碼說明
```html
<!DOCTYPE html>
```
表示這是一份 HTML5 文件。
```html
<html lang="zh-Hant">
```
表示整個 HTML 文件的開始，並指定語言為繁體中文。
```html
<head>
```
放置網頁的設定資訊，例如編碼、標題等。這些內容通常不會直接顯示在網頁主畫面上。
```html
<meta charset="UTF-8">
```
設定文字編碼為 UTF-8，可以正確顯示中文。
```html
<title>我的第一個網頁</title>
```
設定瀏覽器分頁上顯示的標題。
```html
<body>
```
放置網頁主要顯示內容。
```html
<h1>Hello HTML</h1>
```
使用 `h1` 標籤建立最大的標題，畫面上會顯示：
```text
Hello HTML
```
---
## 五、測試網頁
儲存檔案後，可以使用以下方式測試：
### 方法一：直接開啟
在檔案總管中，雙擊 `index.html`，瀏覽器就會開啟網頁。
### 方法二：拖曳開啟
將 `index.html` 拖曳到瀏覽器視窗中。
開啟後，主畫面應該會顯示：
# Hello HTML
如果修改了 HTML 程式碼，儲存檔案後，在瀏覽器按下重新整理即可看到最新結果。
相關學習地圖、教學課程
F2E 網站前端工程