HTML 入門超簡單！網頁排版像堆積木一樣有趣！

大家好！今天要來聊聊 HTML 這個東西。你可能聽過，但又覺得好像很複雜？別擔心！其實 HTML 超級簡單，就像在玩積木一樣，把不同的積木（標籤）組合起來，就能做出漂亮的網頁！

什麼是 HTML？

HTML 的全名是「超文本標記語言」（HyperText Markup Language）。聽起來很嚇人，但你可以把它想像成網頁的「骨架」。它告訴瀏覽器（Chrome、Safari、Firefox 這些）網頁上有哪些東西，像是標題、段落、圖片、連結等等。

標籤是什麼？

HTML 的積木就叫做「標籤」（tag）。標籤通常是成對出現的，像是這樣：

<p>這是一個段落</p>

• `<p>`：這是「開始標籤」，告訴瀏覽器：「嘿！我要開始一個段落囉！」
• `</p>`：這是「結束標籤」，告訴瀏覽器：「這個段落到此結束！」
• 中間的「這是一個段落」：就是段落的內容啦！

有些標籤比較特別，它們是「單身漢」，只有開始標籤，沒有結束標籤，像是這樣：

<img src="圖片網址">

常用標籤大集合！

1. 標題：`<h1>` 到 `<h6>`

就像寫作文一樣，網頁也需要標題來區分不同的內容。HTML 提供了六種標題標籤，從 `<h1>` 到 `<h6>`，數字越小，標題越大、越重要：

<h1>這是最大的標題</h1>
<h2>這是第二大的標題</h2>
<h3>這是第三大的標題</h3>

2. 段落：`<p>`

`<p>` 標籤就是用來放一段一段的文字的，就像你現在看到的這篇文章一樣！

<p>這是一段落</p>
<p>這是另一段落</p>

3. 強調語氣：`<strong>` 和 `<em>`

想要強調某些字詞嗎？用這兩個標籤就對了！

• `<strong>`：用來表示「非常重要」的內容，通常會顯示成粗體。
• `<em>`：用來表示「語氣上的強調」，通常會顯示成斜體。

<p>這段文字中，<strong>這個詞</strong>很重要，<em>這個詞</em>需要強調。</p>

4. 換行：`<br>`

想在段落中換行，但又不想分成兩個段落？用 `<br>` 就對了！它是個單身標籤喔！

<p>這是一行文字。<br>這是同一段落的第二行文字。</p>

5. 超連結：`<a>`

想連到其他網頁？用 `<a>` 標籤！

<a href="https://www.google.com">點我連到 Google</a>

• `href` 屬性：告訴瀏覽器要連到哪個網址。

6. 圖片：`<img>`

想在網頁上放圖片？用 `<img>` 標籤！它也是個單身標籤！

<img src="圖片網址" alt="圖片說明">

• `src` 屬性：告訴瀏覽器圖片在哪裡。
• `alt` 屬性：如果圖片顯示不出來，就會顯示這段文字。這對視障朋友和搜尋引擎都很重要喔！

7. 區塊容器：`<div>`

`<div>` 就像一個透明的盒子，可以把相關的內容裝在一起。你可以幫 `<div>` 加上 `class` 或 `id` 屬性，之後可以用 CSS 來幫它化妝！

<div class="文章區塊">
  <h1>標題</h1>
  <p>內文</p>
</div>

8. 行內容器：`<span>`

`<span>` 則是把文字包起來, 可以用來針對文字做效果.

<p>這是一段文字, <span style="color:red">其中幾個字是紅色的</span></p>

9. 清單

清單有兩種, 一種是有順序的, 一種是沒順序的

• 沒順序清單: `<ul>` (unordered list) 和 `<li>` (list item)

<ul>
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

• 有順序清單: `<ol>` (ordered list) 和 `<li>` (list item)

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

標籤整理表

標籤	功能	備註
<h1> - <h6>	標題（數字越小，標題越大）
<p>	段落
<strong>	強調（通常顯示為粗體）
<em>	強調（通常顯示為斜體）
<br>	換行	單身標籤
<a>	超連結
<img>	圖片	單身標籤
<div>	區塊容器
<span>	行內容器 (用來包住文字, 方便設定特定文字的樣式)
<ul>	無序清單 (搭配<li>)
<ol>	有序清單 (搭配<li>)
<li>	清單的項目

結語

HTML 是不是比你想像中簡單呢？只要記住這些常用的標籤，你就可以開始打造自己的網頁了！下次再來聊聊 CSS，讓你的網頁變得更漂亮！