HTML 常用標籤
以下是 HTML 中常用標籤的簡介與範例。
## 1. 標題標籤：`<h1>` ～ `<h6>`
HTML 提供六個層級的標題，`<h1>` 層級最高，`<h6>` 最低。
```html
<h1>網站主標題</h1>
<h2>第一章</h2>
<h3>第一章第一節</h3>
<h4>小標題</h4>
```
通常一個頁面會使用一個主要的 `<h1>`，再依內容層級使用 `<h2>`、`<h3>` 等標籤。
---
## 2. 超連結：`<a>`
`<a>` 標籤用來建立超連結，`href` 屬性指定連結目標。
```html
<a href="https://www.example.com">前往網站</a>
```
開啟新分頁：
```html
<a href="https://www.example.com" target="_blank">
在新分頁開啟網站
</a>
```
連結到同一網站的其他頁面：
```html
<a href="about.html">關於我們</a>
```
---
## 3. 圖片：`<img>`
`<img>` 用來插入圖片，常用屬性如下：
- `src`：圖片來源
- `alt`：圖片替代文字，對無障礙和圖片載入失敗時很重要
- `width`、`height`：圖片尺寸
```html
<img src="cat.jpg" alt="一隻貓的照片" width="300">
```
也可以使用網路圖片：
```html
<img
src="https://example.com/photo.jpg"
alt="風景照片"
>
```
`<img>` 是空元素，不需要結束標籤，例如不必寫 `</img>`。
---
## 4. 水平線：`<hr>`
`<hr>` 用來表示主題或內容之間的分隔線。
```html
<p>第一段內容</p>
<hr>
<p>第二段內容</p>
```
同樣地，`<hr>` 不需要結束標籤。
---
## 5. 有序列表：`<ol>`
有序列表會自動顯示編號，項目使用 `<li>` 表示。
```html
<ol>
<li>準備材料</li>
<li>開始製作</li>
<li>完成作品</li>
</ol>
```
顯示結果大致如下：
1. 準備材料
2. 開始製作
3. 完成作品
可以指定起始編號：
```html
<ol start="3">
<li>第三項</li>
<li>第四項</li>
</ol>
```
---
## 6. 無序列表：`<ul>`
無序列表通常以項目符號顯示。
```html
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
```
顯示結果大致如下：
- 蘋果
- 香蕉
- 橘子
`<ol>` 和 `<ul>` 都必須搭配 `<li>` 使用。
---
## 7. 表格：`<table>`
表格常用標籤如下：
- `<table>`：整個表格
- `<tr>`：表格中的一列
- `<th>`：標題儲存格
- `<td>`：一般資料儲存格
- `<caption>`：表格標題
- `<thead>`：表頭
- `<tbody>`：表格內容
範例：
```html
<table border="1">
<caption>學生資料</caption>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>科系</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>20</td>
<td>資訊工程</td>
</tr>
<tr>
<td>小華</td>
<td>21</td>
<td>企業管理</td>
</tr>
</tbody>
</table>
```
`border="1"` 可以暫時顯示邊框，但實務上通常建議使用 CSS：
```html
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
```
---
## 綜合範例
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>HTML 標籤範例</title>
</head>
<body>
<h1>我的網站</h1>
<h2>網站介紹</h2>
<p>歡迎來到我的網站。</p>
<a href="https://www.example.com">前往範例網站</a>
<hr>
<h2>圖片</h2>
<img src="flower.jpg" alt="一朵花" width="200">
<h2>今日待辦事項</h2>
<ol>
<li>閱讀 HTML 教學</li>
<li>練習撰寫網頁</li>
</ol>
<h2>喜歡的水果</h2>
<ul>
<li>蘋果</li>
<li>香蕉</li>
</ul>
<h2>成績表</h2>
<table>
<tr>
<th>科目</th>
<th>成績</th>
</tr>
<tr>
<td>HTML</td>
<td>90</td>
</tr>
</table>
</body>
</html>
```
撰寫 HTML 時，建議使用具有語意的標籤，並為圖片提供適當的 `alt` 文字，以提升網頁的可讀性與無障礙性。
相關學習地圖、教學課程
F2E 網站前端工程