HTML 超簡單！網頁排版就像堆積木
看到程式碼就頭痛？想讓自己的文章排版更漂亮，卻不知道那一堆尖括號 < > 到底是什麼？
別擔心！今天要聊的 HTML，絕對比你想像中簡單。你可以把它想像成在玩樂高積木，只要學會幾種最基本的積木（我們稱之為「標籤」），就能開始組合、搭建出屬於你自己的網頁結構了！
這篇文章，就是為你準備的第一盒「積木入門組」。
什麼是 HTML？網頁的「骨架」
HTML 的全名是「超文本標記語言」(HyperText Markup Language)。這個名字聽起來很嚇人，但你只需要記住：HTML 是用來搭建網頁「骨架」的語言。
它會告訴 Chrome、Edge、Safari 這些瀏覽器：「嘿！這裡應該要放一個大標題、那裡要放一段文字、這張圖片要放在文字旁邊...」，所有的網頁內容，都是靠 HTML 來定義其結構與意義的。
HTML 的核心：標籤 (Tag)
HTML 的「積木」就叫做標籤 (Tag)。它就像一個指令，告訴瀏覽器這段內容是什麼。標籤通常都是成對出現的，包含一個「開始標籤」和一個「結束標籤」。
範例：
<p>這是一個段落的文字內容。</p>- <p>：這是開始標籤，p 代表 Paragraph (段落)，它告訴瀏覽器：「注意，一個段落要開始了！」
- </p>：這是結束標籤，多了一條斜線 /，它告訴瀏覽器：「這個段落到此結束！」
- 這是一個段落的文字內容。：被包在中間的，就是這個段落實際要顯示的文字。
當然，也有一些比較特立獨行的「單身漢」標籤，它們只有開始標籤，例如換行 <br> 和圖片 <img>，我們待會會介紹。
常用標籤大集合 (你的第一盒積木)
學會以下這幾種最常用的標籤，你就已經掌握了 80% 的文章排版能力！
1. 標題 (<h1> 到 <h6>)
就像寫報告一樣，文章需要標題來區分層級。數字越小，代表標題越重要、字也越大。<h1> 通常是整篇文章的總標題，只會有一個。
<h1>這是最大的標題 (H1)</h1>
<h2>這是副標題 (H2)</h2>
<h3>這是第三層的標題 (H3)</h3>2. 段落 (<p>)
p 就是 Paragraph，用來包裹每一個獨立的文字段落。
<p>這是第一個段落。HTML 是網頁的基礎，掌握它可以讓您更好地控制內容結構。</p>
<p>這是第二個段落。每個段落都會自動產生間距，讓文章更容易閱讀。</p>3. 強調 (<strong> 與 <em>)
想讓某些文字在段落中更醒目嗎？
- <strong>：用於表示內容的重要性，瀏覽器通常會顯示為粗體。
- <em>：用於表示語氣上的強調，瀏覽器通常會顯示為斜體。
<p>學習 HTML <strong>非常重要</strong>，因為它是<em>所有</em>網頁的基礎。</p>4. 圖片 (<img>)
想在文章中插入圖片，就使用 <img> 標籤。它是一個「單身」標籤。
<img src="https://...圖片的網址.jpg" alt="這是一張貓咪的圖片">- src：是 source (來源) 的縮寫，後面接的是圖片的網址。
- alt：是 alternative (替代) 的縮寫。當圖片因故無法顯示時，會顯示這段文字。這對 SEO 和視障讀者都非常重要！
5. 超連結 (<a>)
想讓讀者點擊文字連到另一個網頁，就使用 <a> 標籤。
<a href="https://www.google.com">點擊這裡可以連到 Google</a>- href：是 Hypertext Reference 的縮寫，後面接的是您希望連結跳轉過去的目標網址。
6. 清單 (<ul>, <ol>, <li>)
想讓內容條列化，清單是最好的工具。
- <ul> (Unordered List)：沒有順序的項目符號清單。
- <ol> (Ordered List)：有 1, 2, 3... 順序的編號清單。
- <li> (List Item)：無論是哪種清單，每一個項目都要用 <li> 包起來。
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<ol>
<li>第一步：打開冰箱</li>
<li>第二步：拿出大象</li>
<li>第三步：關上冰箱</li>
</ol>7. 容器 (<div> 與 <span>)
<div> 和 <span> 像是透明的收納盒，本身沒有外觀，但可以用來將元素群組化，方便未來用 CSS 來統一設計樣式。
- <div>：區塊 (Block) 容器，像一個大箱子，通常用來包裹比較大的區塊，例如整篇文章、整個側邊欄等。
- <span>：行內 (Inline) 容器，像一個小袋子，通常用來包裹段落中的一小段文字，方便對它做特殊樣式（例如改變顏色）。
<div class="article-section">
<h2>標題</h2>
<p>這是一段文字，其中<span style="color:red;">這幾個字</span>是紅色的。</p>
</div>8. 換行 (<br>) 與分隔線 (<hr>)
<br> (Break): 如果您只想在段落內簡單換行，而不是產生一個新的段落，可以使用 <br>。
<hr> (Horizontal Rule): 如果您想在文章中創造一個主題的區隔，<hr> 標籤就是您的好幫手。它代表「主題轉換」，並會在頁面上顯示一條水平分隔線。
這兩個都是「單身」標籤。
<p>第一行文字。<br>這是同一段落的第二行。</p>
<hr>
<p>這是一個新主題的段落。</p>快速總結：常用標籤功能一覽表
| 標籤 | 功能 | 備註 |
|---|---|---|
| <h1> - <h6> | 標題 (數字越小，標題越大) | 成對出現 |
| <p> | 段落 | 成對出現 |
| <strong> | 重要性 (通常為粗體) | 成對出現 |
| <em> | 強調 (通常為斜體) | 成對出現 |
| <img> | 圖片 | 單身標籤 |
| <a> | 超連結 | 成對出現 |
| <ul> / <ol> | 清單 (無序/有序) | 搭配 <li> 使用 |
| <li> | 清單項目 | 成對出現 |
| <div> / <span> | 容器 (區塊/行內) | 成對出現 |
| <br> | 換行 | 單身標籤 |
| <hr> | 主題分隔線 (顯示為水平線) | 單身標籤 |
結語：從積木到城堡
恭喜！您已經學會了 HTML 最核心的幾種積木。現在，您可以試著在 Blogger 的文章編輯器中，切換到「HTML 檢視」，練習使用這些標籤來排版您的下一篇文章。
當您熟悉了這些 HTML 積木後，下一步就是學習如何為它們上色 (CSS) 和添加魔法 (JavaScript) 了！