HTML 基礎知識
在現代網頁設計中，HTML（HyperText Markup Language）扮演著至關重要的角色。HTML 就像是一座建築的結構圖，決定了網頁的骨架與內容安排。本章將帶領大家從零開始學習 HTML 的基本結構與常用標籤，並通過實作範例，逐步建立出一個簡單的靜態網頁。
1. HTML 文件的基本結構與文件骨架
1.1 Doctype 宣告
HTML 文件開頭的 <!DOCTYPE html> 宣告，告訴瀏覽器該文件是遵循 HTML5 標準撰寫的。這一行非常重要，因為它確保瀏覽器以正確的模式（標準模式）來解析文件。
範例：
<!DOCTYPE html>
<html>
...
</html>
1.2 <html> 標籤
<html> 標籤是所有 HTML 元素的容器，也可以看做是整個網頁的根元素。所有的網頁內容都應該置於這個標籤內。
1.3 <head> 標籤
在 <head> 區塊中，通常包含了有關網頁的元數據（metadata），如：
- 字符編碼：使用
<meta charset="UTF-8">宣告文件的文字編碼，確保所有特殊字元能正確顯示。 - 標題：使用
<title>標籤設定網頁的標題，這個標題會顯示在瀏覽器標籤上。 - 連結：可引入 CSS 文件、JavaScript 文件，或者定義網站圖標（favicon）。
範例：
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
1.4 <body> 標籤
這部分包含了網頁的主要內容，如文字、圖片、連結和其他互動元素。瀏覽器會將 <body> 裡的內容呈現給用戶。
完整結構範例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<!-- 此處放網頁內容 -->
</body>
</html>
2. 常用標籤的介紹與使用方法
2.1 標題標籤 (<h1> ~ <h6>)
HTML 提供了六個層級的標題標籤，其中 <h1> 代表最重要的標題，而 <h6> 則是最次要的。這不僅影響文字大小，還有助於搜尋引擎優化（SEO）。
範例：
<h1>這是大標題</h1>
<h2>這是次標題</h2>
2.2 段落標籤 (<p>)
用來將文字段落化，讓文章內容更具結構性與可讀性。
範例：
<p>這是一個段落，講述了 HTML 的基本概念。通過標籤的運用，網頁內容變得井然有序。</p>
2.3 連結標籤 (<a>)
使用 <a> 標籤可以創建超連結，讓使用者點擊後跳轉到其他頁面或資源。href 屬性指向目標網址，也可以用來連結到文件的其他部分。
範例：
<a href="<https://www.example.com>" target="_blank">點擊這裡訪問範例網站</a>
注意：
target="_blank"屬性可以讓連結在新視窗中打開，提升用戶體驗。
2.4 圖像標籤 (<img>)
用於在網頁中嵌入圖片。必需的屬性包括 src（圖片來源）和 alt（圖片替代文字，對於視障人士以及SEO非常重要）。
範例：
<img src="image.jpg" alt="示範圖片">
2.5 清單標籤 (<ul>, <ol>, <li>)
用來建立有序或無序的清單，讓信息呈現更有條理。
無序清單範例：
<ul>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
有序清單範例：
<ol>
<li>第一步驟</li>
<li>第二步驟</li>
<li>第三步驟</li>
</ol>
3. 標籤屬性、注釋及語意化標籤的重要性
3.1 標籤屬性
每個 HTML 標籤都可以通過屬性來增加額外的信息或改變外觀與行為。常見屬性包括：
- id 與 class：用來標識元素，對 CSS 定義樣式及 JavaScript 操作尤為重要。
- style：可直接在標籤內定義簡單的 CSS 樣式（雖然通常建議分離樣式與內容）。
- 其他屬性：像
<img>的src、alt，以及<a>的href。
範例：
<p id="intro" class="text-highlight" style="color: blue;">這是一段帶有屬性設定的文字。</p>
3.2 注釋
HTML 注釋使用 <!-- 注釋內容 --> 來包裹。注釋不會被瀏覽器顯示，但對程式碼維護非常重要，可用來提醒自己與團隊成員具體的說明或備忘錄。
範例：
<!-- 這是一個網頁的導覽區塊 -->
<nav>
<!-- 導覽連結列表 -->
</nav>
3.3 語意化標籤
語意化標籤（Semantic Tags）有助於清晰地表達網頁各部分的用途，讓搜尋引擎與輔助技術更容易識別網頁內容。常見的語意化標籤包括：
<header>：網頁或區塊的頂部標題部分<nav>：導航連結區<article>：獨立的內容組件<section>：內容的分區<footer>：網頁或區塊的底部資訊
範例：
<header>
<h1>網站標題</h1>
</header>
<nav>
<ul>
<li><a href="#section1">區塊1</a></li>
<li><a href="#section2">區塊2</a></li>
</ul>
</nav>
<section id="section1">
<h2>第一部分內容</h2>
<p>這部分介紹網站的主要資訊...</p>
</section>
<footer>
<p>版權所有 © 2025</p>
</footer>
4. 實作範例：建立你的第一個靜態頁面
下面是一個綜合前面所學知識的小範例，展示如何從頭開始構建一個靜態頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>歡迎來到我的網站</title>
<!-- 可以在此加入連結到外部的 CSS 檔案 -->
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
header, footer { background-color: #f0f0f0; padding: 10px; text-align: center; }
nav ul { list-style-type: none; padding: 0; }
nav li { display: inline; margin-right: 10px; }
</style>
</head>
<body>
<header>
<h1>歡迎來到我的網站</h1>
<!-- 使用注釋解釋此區域的用途 -->
<!-- 這裡是網站的標題與導覽欄 -->
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關於我</a></li>
<li><a href="#contact">聯絡</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>首頁</h2>
<p>這是一個範例靜態頁面。透過 HTML 的基本標籤，我們可以創造出結構清晰且易於維護的網頁。</p>
<img src="example.jpg" alt="範例圖片">
</section>
<section id="about">
<h2>關於我</h2>
<p>這裡可以寫一些個人簡介或者網站的介紹。您可以利用這個範例來學習如何加入文字、圖片與超連結。</p>
<a href="<https://www.example.com>" target="_blank">了解更多資訊</a>
</section>
<footer>
<p>版權所有 © 2025</p>
</footer>
</body>
</html>
範例解析
- 文件開頭與骨架範例從
<!DOCTYPE html>開始，定義文件類型。整個內容被包含在<html>標籤內，再分為<head>與<body>兩大區域。 - 樣式與內部CSS在
<head>中使用<style>區塊定義了一些基本樣式，幫助頁面看起來更加美觀。這說明了如何在頁面中直接加入 CSS。 - 結構清晰的內容分區使用
<header>、<section>和<footer>等語意化標籤，使頁面內容分類明確，有助於搜尋引擎理解網頁結構。 - 互動性與超連結
<a>標籤不僅連結到外部網站，也能讓頁面內的不同區域間互相連結（例如導覽列中的連結）。
總結與見解
HTML 不是一門編程語言，而是一種標記語言，其主要任務是定義網頁內容的結構與語意。掌握 HTML 的基本結構與常用標籤後，不僅能讓你迅速搭建一個靜態頁面，更為進一步學習 CSS（樣式設計）與 JavaScript（動態效果）打下堅實基礎。
透過實作範例，我們可以親手修改與檢視結果，這是一個從理論到實踐的必經過程。隨著你不斷熟悉 HTML 標籤的用法，便能運用語意化標籤創建出更具可讀性與可維護性的網頁，並在未來學習其他前端技術時更加得心應手。
希望這一章的內容可以幫助你對 HTML 產生初步但又堅實的認識，並激發你進一步探索前端開發的興趣。學習 HTML 的過程既充滿樂趣又能帶來成就感，正如打造一棟房子一般，從堅固的地基開始，最終呈現一個完美的作品。
