歡迎來到網頁設計：認識 HTML！
你好，未來的網頁設計師！本章是你了解整個互聯網結構的起點。如果覺得寫程式聽起來很深奧，請不必擔心——HTML 是最容易上手的入門語言。
我們將學習這門基礎語言，它為每一個網站賦予了骨幹、結構與內容。一旦掌握了這些基本概念，你就能親手建立簡單的網頁了！
1. 什麼是 HTML？核心基礎
HTML 的全稱是 超文本標記語言 (Hypertext Markup Language)。它是用於建立和組織全球資訊網 (World Wide Web) 內容的核心語言。
這些術語是什麼意思？
- 超文本 (Hypertext)： 指的是包含指向其他文本或資源連結的文本。如果你點擊一個詞後跳轉到新頁面，這就是超文本在運作！
- 標記 (Markup)： 這是關鍵。HTML 使用特殊的代碼（稱為標籤/tags）來「標記」或定義內容應如何顯示。它告訴網頁瀏覽器（如 Chrome 或 Safari）每一段文字的角色——它是標題、段落，還是連結？
- 語言 (Language)： 這是瀏覽器理解並顯示內容所遵循的一套規則。
比喻： 想像一下蓋房子。HTML 就是藍圖或骨架。它定義了牆壁、門和房間的位置。它不需理會油漆的顏色（那是 CSS 的工作，我們之後才會學到！），只負責結構。
重點總結
HTML 為網頁提供結構與內容。
2. 構建基礎：標籤 (Tags)、元素 (Elements) 與屬性 (Attributes)
編寫 HTML 時，你會反覆運用三個核心概念：標籤、元素和屬性。搞清楚它們之間的區別至關重要！
標籤 (Tags) —— 標記符號
標籤是寫在尖括號 (< >) 內的指令。標籤通常成對出現：開始標籤和結束標籤。
開始標籤範例： <p>
結束標籤範例： </p> （注意斜線 /）
元素 (Elements) —— 內容
元素包含了開始標籤、內容以及結束標籤。它代表頁面上的一個完整結構。
範例： <p>這是一個段落文字。</p>
整行代碼構成了一個段落元素。
屬性 (Attributes) —— 自訂化
屬性為元素提供額外資訊。它們總是放置在開始標籤中，通常以「名稱/數值」對 (name="value") 的形式書寫。
記憶小撇步： 屬性 (Attributes) 以 'A' 開頭，代表 'Additional' (額外) 資訊或 'Appearance' (外觀) 修飾。
範例： 如果要插入連結，標籤是 <a>。但連結要連到哪裡？這就是屬性的作用：
<a href="index.html">首頁</a>
在這裡，href 是屬性名稱，而 "index.html" 是屬性值（即目的地）。
自閉合標籤 (Self-Closing Tags)
有些標籤不需要結束標籤，因為它們不包裹內容，只是單純在頁面上插入某些東西。這類標籤稱為自閉合或空標籤。
範例： <img />（用於影像）和 <br />（用於換行）。
快速複習：術語
標籤 (Tag)： <p>
內容 (Content)： 你好！
元素 (Element)： <p>你好！</p>
屬性 (Attribute)： src="image.jpg"
3. HTML 頁面的基本結構
每個功能完整的 HTML 頁面都必須包含基本的結構。你可以將其視為瀏覽器理解該文件所需的最低結構要求。
結構逐步解析
-
<html> ... </html>：根元素。其他所有標籤都必須嵌套在此標籤內。它告訴瀏覽器：「這是一個 HTML 文件。」 -
<head> ... </head>：所有非可視內容的容器。這些資訊主要是給瀏覽器或搜尋引擎使用的（如關鍵字、字元集等）。用戶在網頁本身不會看到這些內容。 -
<title> ... </title>：放置在<head>內。這裡的文字會顯示在瀏覽器的分頁標籤或視窗標題列上。這對 SEO（搜尋引擎最佳化）非常重要。 -
<body> ... </body>：所有可視內容的容器。用戶能看到的每一個段落、影像、連結和標題都必須放在<body>標籤內。
起初如果覺得很難記住也不用擔心！每個 HTML 頁面的開頭都是一樣的。
重點總結
<head> 包含關於頁面的資訊（如標題），而 <body> 包含顯示給用戶看的內容。
4. 組織內容的必要標籤
以下是你在頁面上整理文字時最常用的標籤。
標題 <h1> 至 <h6>
HTML 提供了六個級別的標題來組織文檔結構。
<h1> 是最重要的標題（每個頁面通常只用一次，如主標題）。
<h6> 是最不重要的（用於細分章節或標註）。
經驗法則： 請按邏輯使用標題，就像書本的目錄大綱一樣。不要為了單純放大文字而使用它們。
範例：
<h1>第一章：網頁設計基礎</h1>
<h3>4.1 結構標籤</h3>
段落 <p>
<p> 標籤用於定義文字區塊。瀏覽器會自動在段落元素前後加入少量空間（邊距）。
換行 <br />
<br /> 標籤會強制立即換行，將後面的內容移到新的一行。這是一個自閉合標籤。
避免常見錯誤
學生常使用大量的 <br /> 來模擬段落之間的空隙。這是錯誤的做法！若要區分不同的觀點，請務必使用 <p>，只在想在同一行文字內進行強制斷句時（如詩歌或地址）才使用 <br />。
5. 組織資訊：列表
列表對於清晰呈現資訊非常重要。HTML 提供兩種主要列表。
無序列表 <ul>
無序列表使用項目符號來標記每一項。對於順序無關緊要的項目（如購物清單）非常理想。
有序列表 <ol>
有序列表使用數字或字母來標記每一項。對於順序重要的步驟（如食譜或操作指引）非常理想。
列表項目 <li>
無論是有序列表還是無序列表，每一項內容都必須包裹在 <li> (List Item) 標籤中。
有序列表範例：
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
重點總結
記住：<ul> 或 <ol> 用於建立容器，而 <li> 則用來建立容器內的項目。
6. 建立連結：連結與影像
連結和影像讓網頁變得生動有趣！這些標籤非常依賴屬性才能正確運作。
超連結 (Anchors) <a>
<a> 標籤，也稱為錨點 (Anchor) 標籤，用於建立從一個頁面跳轉到另一個頁面的連結。
關鍵屬性：href
href (Hypertext Reference，超文本參照) 屬性用於告知瀏覽器連結的目的地。
連結至網站內其他頁面的範例：
<a href="about_us.html">了解我們的團隊</a>
連結至外部網站的範例：
<a href="https://www.oxfordaqa.com">OxfordAQA 網站</a>
影像 <img />
<img /> 標籤用於將影像嵌入網頁。這是一個自閉合標籤。
關鍵屬性：src 與 alt
-
src(Source)： 此屬性指定影像檔案的路徑（位置）（例如："photos/logo.png"）。 -
alt(Alternate Text)： 這是必備屬性。它為影像提供文字說明。如果影像無法顯示，會顯示此文字；若使用者使用螢幕閱讀軟體，軟體會讀出這些文字，幫助視障使用者。
你知道嗎？ 提供良好的 alt 文字對於網頁無障礙性至關重要，也能幫助搜尋引擎理解影像內容。
影像標籤範例：
<img src="header_pic.jpg" alt="一名學生正在電腦前學習" />
章節總結與最後鼓勵
你現在已經學會了 HTML 結構的基礎知識！記住：HTML 為網頁提供了結構（head, body）、內容（標題、段落、列表）以及導覽（連結）。
請繼續練習我們提到的標籤和屬性——寫得越多，你就會越熟練。你已經踏上成為專業網頁設計師的康莊大道了！