`<div>` 和 `<span>` 都是 HTML 中的「通用容器」標籤，本身通常不帶有特殊語意，主要用來分組內容，方便搭配 CSS 或 JavaScript 操作。 ## 1. `<div>` 的特性 - 預設是**區塊元素**（`display: block`）。 - 會獨佔一整行，前後通常會換行。 - 適合用來包覆較大的區域或頁面結構，例如： - 導覽列 - 內容區 - 頁尾 - 卡片 - 表單區塊 - 可以包含其他區塊元素與行內元素。 ```html <div class="card"> <h2>文章標題</h2> <p>文章內容</p> </div> ``` ## 2. `<span>` 的特性 - 預設是**行內元素**（`display: inline`）。 - 不會獨佔一整行，會和其他文字或元素排列在同一行。 - 適合用來標記一小段文字或行內內容，例如： - 突出某個單字 - 設定部分文字顏色 - 標示價格、標籤或圖示 - 通常不適合直接包覆區塊元素。 ```html <p> 這是一段 <span class="highlight">重要文字</span> 內容。 </p> ``` ## 3. 為何適合搭配 CSS 使用？ ### 可作為樣式套用的目標 可以透過 `class` 或 `id` 指定樣式： ```html <div class="box">區塊內容</div> <span class="warning">警告訊息</span> ``` ```css .box { padding: 20px; background-color: #f2f2f2; } .warning { color: red; font-weight: bold; } ``` ### 方便控制版面配置 `<div>` 可用來建立頁面結構，搭配 CSS 的： - `margin` - `padding` - `width` - `height` - `display` - `flex` - `grid` - `position` 例如： ```css .container { display: flex; gap: 20px; } ``` ### 可改變預設顯示方式 雖然 `<div>` 預設是區塊元素、`<span>` 預設是行內元素，但 CSS 可以改變其行為： ```css span { display: block; } div { display: inline; } ``` 也可以使用： ```css display: inline-block; display: flex; display: grid; ``` ### 有助於分離內容與樣式 HTML 負責內容與結構，CSS 負責外觀與配置。使用 `<div>` 和 `<span>` 分組後，可以在不修改 HTML 內容的情況下，透過 CSS 統一調整樣式，提高維護性與重用性。 ## 4. 使用時的注意事項 `<div>` 和 `<span>` 沒有明確語意，因此不應取代具有語意的標籤。例如： - 文章標題應使用 `<h1>`～`<h6>` - 導覽列可使用 `<nav>` - 頁首可使用 `<header>` - 主要內容可使用 `<main>` - 按鈕應使用 `<button>` 簡單來說： - `<div>`：適合包覆較大的區塊，預設會換行。 - `<span>`：適合標記行內的小部分內容，預設不換行。 - 兩者都常作為 CSS 的選取與分組工具，但應優先使用具有語意的 HTML 標籤。