DAY7 區塊標籤、行內標籤與清單

2026 iThome 鐵人賽

DAY 7

Modern Web

從結構到互動：現代前端HTML、CSS 、JS 的 30 天修練系列第 7 篇

18th鐵人賽

yelloworange0319

團隊nutc imac

2026-09-21 10:20:18

36 瀏覽

分享至

如何分類與組織網頁元素？

我們的修練已經來到了第七天，在前幾天的文章中，我們學會了如何在網頁裡放入文字、圖片、超連結和各式各樣的表單互動元件，然而，當網頁上的東西越來越多時，如果只是隨便亂塞，網頁就會特別亂。

今天我們要學習的是HTML中最重要，也是未來跟CSS排版最關鍵的兩大概念：區塊元素（Block-level）與行內元素（Inline），還有網頁內最常拿來整理資料的清單標籤（List）。

區塊標籤`<div>`vs 行內標籤`<span>`

在 HTML 的世界裡，幾乎所有的標籤都可以被歸類為「區塊元素」或「行內元素」這兩大家族。

1.區塊元素（Block-level Elements）：以`<div>`為代表

<div>全名叫Division（區域/部門），本身沒有任何特殊的視覺外觀，它的存在純粹是為了扮演一個箱子，用來把相關的標籤分組在一起。

特性：區塊元素他非常霸道，它在畫面上會獨佔一整行，不論你給它的內容有多短，它的右邊不允許站任何文字、顏色，後面的元素一律會直接被擠到下一行。
舉例：除了<div>以外，還有我們前幾天學過的<h1>~<h6>、<p>、<form> 其實都算是區塊元素。

2.行內元素（Inline Elements）：以`<span>`為代表

<span>代表Span（範圍），它同樣沒有任何外觀，它可以當作是圈圈，專門用來包段落中的「某幾個字」或「某一小段內容」，方便我們以後單獨為這幾個字換顏色或做特效。

特性：行內元素非常溫和，它不會自動換行，它的寬度完全是由裡面的內容撐開，多個行內元素可以在同一行排成一列。
舉例：我們學過的<a>、<strong>、<em> 以及所有的<input>欄位，都算是行內元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day 7</title>
</head>
<body>
    <div style="background-color: lightblue;">我是第一個 div 箱子</div>
    <div style="background-color: lightgreen;">我是第二個 div 箱子（被擠到下一行了）</div> 
    <p>
        這是一段文字，我們可以用 
        <span style="background-color: red; font-weight: bold;">span標籤</span> 
        把其中幾個字圈起來單獨改變外觀，而不會影響到整段話。
    </p>

</body>
</html>

(改變顏色之後會介紹，現在用是為了更明顯看到差別)

清單標籤 `<ul>`、`<ol>`、`<li>`

在網頁中，不論是要列出「今天學到的重點」，還是要做網站頂部的「導覽選單（Nav Bar）」，我們都會用到清單。清單分為以下兩種形式，但它們內部都必須搭配 <li>（List Item，列表項目）來組合使用：

1. 無序清單 `<ul>`（Unordered List）

項目之間沒有先後順序、重要性之分，瀏覽器預設會在每一行前面顯示一個小圓點。

2.有序清單`<ol>`（Ordered List）

項目之間有明確的先後順序，瀏覽器會自動在前面幫你標上1,2,3等等的數字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
    <li>HTML5 基礎骨架</li>
    <li>網頁互動元件</li>
    <li>區塊與行內元素</li>
    </ul>
    <ol>
    <li>安裝編輯器</li>
    <li>編寫 HTML 結構</li>
    <li>使用 CSS 美化網頁</li>
    </ol>
</body>
</html>

總結

到目前為止，我們成功把網頁開發中的HTML介紹完了，我們從最基礎的網頁骨架，一路學到現在，從文字標籤、互動表單、超連結、圖片等等，到今天的區塊佈局與清單，我相信學到現在，已經有能力用HTML織出一個結構完整、語意清晰的網頁了，明天我將設計一個簡單的html程式，來嘗試把所有前面學到的東西都加進去。