HTML 標籤的排列方式，主要可以分成 **行內（inline）** 與 **區塊（block）** 兩種。 ## 1. 區塊元素（Block） 區塊元素通常會獨占一行，前後會形成明顯的分隔，因此後面的內容會從下一行開始。 常見的區塊元素包括： ```html <div>區塊</div> <p>段落</p> <h1>標題</h1> <ul>清單</ul> <li>項目</li> ``` 例如： ```html <p>第一段</p> <p>第二段</p> ``` 瀏覽器會將兩個段落分開排列，每個 `<p>` 通常各自位於不同的行。 區塊元素常用來表示較大的內容結構，例如： - 頁面區域 - 段落 - 標題 - 清單 - 表格 - 表單區域 ## 2. 行內元素（Inline） 行內元素不會獨占一行，通常會接在文字或其他行內元素旁邊排列。 常見的行內元素包括： ```html <span>文字</span> <a href="https://example.com">連結</a> <strong>重要文字</strong> <em>強調文字</em> ``` 例如： ```html <p> 這是一段 <strong>重要文字</strong> 和 <a href="https://example.com">連結</a>。 </p> ``` 這些元素會和段落中的文字一起排列，而不會各自換到新行。 行內元素常用來表示： - 一小段文字 - 文字強調 - 超連結 - 文字中的特殊內容 ## 3. 兩者的主要差異 | 特性 | 區塊元素 | 行內元素 | |---|---|---| | 是否獨占一行 | 通常會 | 通常不會 | | 排列方式 | 上下排列 | 左右接續排列 | | 常見用途 | 組織頁面結構 | 標記文字中的局部內容 | | 常見例子 | `<div>`、`<p>`、`<h1>` | `<span>`、`<a>`、`<strong>` | ## 4. 巢狀排列 HTML 標籤可以互相包在裡面，但應遵守合理的結構： ```html <div> <p> 這是段落，包含 <strong>強調文字</strong>。 </p> </div> ``` 這裡： - `<div>` 是較大的區塊 - `<p>` 是其中的段落 - `<strong>` 是段落中的行內文字 簡單來說，**區塊元素負責組織較大的內容範圍，行內元素負責標記內容中的局部部分**。