歡迎來到 HTML 的世界！
歡迎來到單元 2！在本章中，我們將探索 HTML（超文本標記語言）。如果說網站是一棟建築，那麼 HTML 就是磚塊和木架。它為你在網上看到的一切提供了結構與意義。如果一開始看到滿屏的程式碼感到眼花繚亂也不用擔心——只要掌握了其中的規律，它就像學習一門非常簡單的新語言一樣！
7.1 文件結構
在開始添加圖片和文字之前，我們需要了解 HTML 文件是如何構建的。可以把它想像成網頁的「骨架」。
基本組成單元
HTML 中的一切都是由元素 (elements)、標籤 (tags) 和屬性 (attributes) 組成的。
• 標籤 (Tags)： 這是被尖括號包圍的標記，例如 <p>。大多數標籤都是成對出現的：一個開始標籤 <p> 和一個結束標籤 </p>。
• 元素 (Elements)： 這是一個完整的組合——包含開始標籤、內部的內容，以及結束標籤。
• 屬性 (Attributes)： 它們為元素提供額外資訊。屬性總是放在開始標籤內，例如：<p lang="en">。
「Head」與「Body」的分別
一個 HTML 文件主要分為兩個部分：
1. 頁首 (<head>)： 這是頁面的「大腦」。它包含元數據 (metadata)（關於頁面的資訊）、文件標題（你在瀏覽器分頁標籤上看到的文字），以及連結到外部文件（如 CSS 樣式表或 JavaScript 腳本）。用戶在實際頁面上看不到這些內容。
2. 頁身 (<body>)： 這是所有可見內容（文字、圖片和影片）存放的地方。
編寫規範的程式碼（語法規則）
為了確保瀏覽器能完美讀懂你的程式碼，請遵循以下「黃金法則」：
• 元素名稱和屬性務必使用小寫字母。
• 縮排 (Indent) 你的程式碼。如果一個元素位於另一個元素「之內」，請將其向右縮進幾個空格。這會讓程式碼變得非常易讀！
• 屬性值請使用雙引號（例如 class="header"）。
• 在現代 HTML5 中，建議刪除自閉合標籤末尾的斜線（使用 <br> 而非 <br />）。
全域屬性 (Global Attributes)
有些屬性幾乎可以用在任何 HTML 元素上，這些被稱為全域屬性：
• id： 為特定元素定義的唯一名稱。
• class： 用於將多個元素歸為同一類的名稱。
• style： 用於直接添加簡單的 CSS 規則。
• hidden： 告訴瀏覽器暫時不要顯示該元素。
重點總結： 結構就是一切！組織良好的文件會使用 head 存放資訊，body 存放內容，並遵循嚴格的小寫語法規則。
7.2 結構化標記
現在我們有了骨架，讓我們看看可以添加哪些不同類型的內容。
區塊級元素 (Block-level) 與行內元素 (Inline)
這是一個常見的混淆點，但記住以下簡單的方法即可：
• 區塊級元素： 它們比較「霸道」。它們總是從新的一行開始，並佔用所有可用的寬度（如段落 <p> 或標題 <h1>）。
• 行內元素： 它們比較「合群」。它們只佔用所需的空間，並與其他元素並排顯示（如粗體文字或 span）。
組織文字
我們使用特定的標籤告訴瀏覽器這些文字是什麼：
• 標題： <h1> 最重要，<h6> 次之。
• 段落： <p> 用於文字段落。
• 強調與重要性： 使用 <em> 來進行強調（斜體），使用 <strong> 來表示重要性（粗體）。
清單
製作清單的三種主要方式：
1. 無序清單 (<ul>)： 使用項目符號。
2. 有序清單 (<ol>)： 使用數字排序。你可以使用 start 屬性來指定從哪個數字開始！
3. 描述清單 (<dl>)： 用於術語及其定義。
超連結 (World Wide Web 的「Web」所在)
連結是使用 <a> 標籤配合 href 屬性來建立的。
• 內部連結： 連接到你網站內的其他頁面。
• 外部連結： 連接到其他網站。
• 指定位置： 你可以連結到頁面上的特定 id（例如 href="#contact"），直接跳轉到該處！
重點總結： 使用 block 元素建立結構，使用 inline 元素處理細節。用 <ol> 製作步驟說明，用 <ul> 列出隨機項目。
7.3 頁面組件
讓我們透過圖片、表格和表單，讓頁面變得更生動、更具互動性。
添加圖片
圖片使用 <img> 標籤。它沒有結束標籤！
• alt 屬性： 這非常重要！如果圖片無法載入，或者視障同學使用螢幕閱讀器時，它能提供文字說明。
• 比例： 盡量保持原始比例，以免圖片看起來「被壓扁」了。
表格
表格是用來處理數據的，不是用來排版的！
• <tr> 建立表格行 (Table Row)。
• <td> 建立標準資料儲存格 (Table Data)。
• <th> 建立標題儲存格（通常為粗體並居中）。
• 你可以使用 colspan（橫跨欄位）或 rowspan（縱跨列）來合併儲存格。
表單：收集資訊
表單允許用戶與網站進行互動。
• 輸入類型： 你可以使用 type="text"、type="password" 或 type="checkbox" 等。
• 下拉式選單： 使用 <select> 和 <option> 標籤建立。
• 驗證： 在表單發送到伺服器之前，HTML 可以檢查用戶是否輸入了正確的電郵地址，或是否漏填了「必填」欄位。
音訊與影片
告別需要額外插件的年代！
• 使用 <audio> 和 <video> 標籤。
• 使用 controls 屬性，讓用戶可以點擊播放/暫停。
• 在標籤內使用 <source> 元素提供多種檔案格式。這能確保如果瀏覽器不支援某種格式（如 .ogg），它還可以嘗試另一種（如 .mp4）。
內嵌框架 (iframes)
iframe 就像頁面上的一個「視窗」，用來顯示另一個網站的內容。在部落格中嵌入 Google 地圖或 YouTube 影片時，經常會看到它。
記憶小撇步： 對於表格，記住 TR 代表「Table Row」，TD 代表「Table Data」。先建立行，再將資料放進去！重點總結： 表單和媒體等組件讓網站「活」了起來。務必使用 alt 屬性標記圖片，並使用 controls 控制媒體，以確保你的網站具備良好的無障礙性和易用性。
別忘了！
如果你忘記了某個標籤的名稱，不必擔心——即便是專業開發人員有時也會查閱資料！最重要的是理解它們如何協同工作。繼續練習縮排和小寫語法，你很快就會成為 HTML 高手！