第 4 章

HTML 基本結構

上一章你建立了第一個網頁，這章我們要學更多常用的 HTML 標籤。 掌握這些標籤，你就能建立出包含文字、連結、圖片、清單的完整網頁內容。

📌 本章重點

  • 標題標籤 h1 ~ h6 的使用
  • 段落 p、換行 br、分隔線 hr
  • 連結 a 與圖片 img 標籤
  • 有序清單 ol 與無序清單 ul
  • div 和 span：版面分組用的容器
  • HTML 屬性（attribute）的概念

📖 教學說明

標題標籤 h1 ~ h6

HTML 提供六個層級的標題，數字越小代表越重要、字體越大。

HTML 
<h1>最大的標題（每頁只建議用一個）</h1>
<h2>第二級標題</h2>
<h3>第三級標題</h3>
<h4>第四級標題</h4>
<h5>第五級標題</h5>
<h6>最小的標題</h6>

段落、換行、分隔線

HTML 
<!-- p 是段落，段落之間會自動有間距 -->
<p>這是第一段文字。</p>
<p>這是第二段文字。</p>

<!-- br 是換行，不需要結束標籤 -->
<p>第一行<br>第二行（同一段落裡換行）</p>

<!-- hr 是水平分隔線 -->
<hr>

文字樣式標籤

HTML 
<strong>粗體文字（重要）</strong>
<em>斜體文字（強調）</em>
<mark>螢光標記文字</mark>
<code>程式碼文字</code>

連結 <a>

<a> 標籤建立超連結，href 屬性指定連結目的地：

HTML 
<!-- 連到外部網站，target="_blank" 在新分頁開啟 -->
<a href="https://www.google.com" target="_blank">前往 Google</a>

<!-- 連到同目錄的另一個 HTML 檔案 -->
<a href="about.html">關於我</a>

<!-- 連到頁面某個位置（用 id） -->
<a href="#contact">跳到聯絡區</a>
...
<section id="contact">...聯絡資訊...</section>

圖片 <img>

HTML 
<!-- src：圖片來源，alt：圖片無法顯示時的替代文字 -->
<img src="images/photo.jpg" alt="我的照片" />

<!-- 也可以用網路上的圖片 URL -->
<img src="https://picsum.photos/400/300" alt="隨機圖片" width="400" />
⚠️

alt 屬性很重要

alt 不只是「圖片壞掉時顯示的文字」，對視障使用者的螢幕閱讀器來說，alt 是他們了解圖片內容的唯一方式。記得要寫有意義的描述。

清單 ul / ol

HTML 
<!-- 無序清單（項目符號） -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- 有序清單（數字） -->
<ol>
  <li>先學 HTML</li>
  <li>再學 CSS</li>
  <li>最後學 JavaScript</li>
</ol>

div 和 span：容器標籤

<div> 是「區塊容器」，用來把一組元素包起來，方便套用樣式或分組。 <span> 是「行內容器」，用來對一段文字裡的某個部分特別處理。

HTML 
<!-- div：整個區塊包起來 -->
<div class="card">
  <h2>卡片標題</h2>
  <p>卡片內容</p>
</div>

<!-- span：只針對某幾個字 -->
<p>今天天氣<span style="color: red;">非常熱</span>，記得喝水。</p>

💻 完整範例：個人簡介頁

HTML 
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <title>我的自我介紹</title>
</head>
<body>
  <h1>你好，我是小明 👋</h1>

  <img src="https://picsum.photos/150/150"
       alt="我的頭像"
       width="150" />

  <h2>關於我</h2>
  <p>我是一個喜歡學習新事物的初學者，目前在學習網頁開發。
  我相信用 <strong>AI 輔助學習</strong> 是最有效的方式！</p>

  <h2>我的興趣</h2>
  <ul>
    <li>學習程式設計</li>
    <li>看電影</li>
    <li>閱讀</li>
  </ul>

  <h2>聯絡我</h2>
  <p>
    GitHub：<a href="https://github.com" target="_blank">我的 GitHub</a>
  </p>
</body>
</html>

⚠️ 常見錯誤

✗

標籤沒有正確巢狀

<p><strong>文字</p></strong> 是錯的，正確應該是 <p><strong>文字</strong></p>。要先關閉內層的標籤。

✗

img 標籤忘記寫 alt

即使圖片能顯示，也要加上有意義的 alt 文字，這對無障礙性很重要。

✗

連結網址忘記加 https://

外部連結必須加完整的 https://，否則瀏覽器會把它當成相對路徑，找不到正確位置。

✏️ 小練習

🎯 動手試試看

練習 1

用上方的「完整範例」，把名字、介紹文字和興趣改成你自己的，存檔後在瀏覽器查看結果。

練習 2

在你的頁面加入一個「我的學習目標」區塊，用 <ol>（有序清單）列出你這個月的 3 個學習目標。

練習 3

把 <img src="https://picsum.photos/150/150"> 的數字改成 200/200，看看圖片會有什麼變化。

🎉

本章完成！

你已經學會了最常用的 HTML 標籤。下一章我們要用 CSS 讓這個網頁變得美觀！