在網頁開發中，我們經常會聽到關于class和div的術語。它們是HTML和CSS中的兩個重要概念，用于構建和樣式化網頁。class是一種HTML屬性，用于標識元素的類別。而div是HTML中的一個塊級元素，用于創建容器來組織和布局頁面。

class屬性可以給HTML元素添加一個或多個類名，用空格分隔。它的主要作用是為元素提供樣式和行為的規則。通過定義CSS樣式表，我們可以選擇性地應用這些規則并改變元素的外觀和行為。使用class屬性可以方便地將多個元素歸類，統一應用樣式，避免重復的代碼。例如：

<style>
.important {
color: red;
font-weight: bold;
}
</style>
<p class="important">這是一個重要的信息</p>

在這個例子中，我們定義了一個名為"important"的class，它將文字的顏色設為紅色，并加粗顯示。然后，我們將該class應用到一個

元素上，使得

元素顯示為重要信息的樣式。

div是一個通用的HTML元素，用于創建容器并將其他元素組織在一起。它是一個塊級元素，將其包裹的元素都作為其內容。通過給div添加class屬性，我們可以對其進行樣式化，應用特定的布局和外觀。例如：

<style>
.container {
width: 500px;
height: 300px;
background-color: #f2f2f2;
}
</style>
<div class="container">
<p>這是一個容器</p>
</div>

這段代碼中，我們創建了一個名為"container"的class，將div元素的寬度設為500像素，高度設為300像素，并設置背景顏色為淺灰色。然后，我們在div內部添加了一個

元素作為其內容。這樣，我們就創建了一個帶有指定樣式和特定內容的容器。

除了單獨使用class和div，我們還可以將它們結合起來使用，構建更復雜的網頁布局。通過將多個div嵌套在一起，我們可以創建多層次的容器結構，并使用不同的class為各個層次添加不同的樣式。例如：

<style>
.header {
height: 100px;
background-color: #333;
color: #fff;
}
.content {
padding: 20px;
background-color: #f2f2f2;
}
.footer {
height: 50px;
background-color: #333;
color: #fff;
}
</style>
<div class="header">
<h1>這是頁頭</h1>
</div>
<div class="content">
<p>這是內容區域</p>
</div>
<div class="footer">
<p>這是頁腳</p>
</div>

這段代碼中，我們創建了三個div，分別具有不同的class名。header類設置了一個高度為100像素的頁頭，使用深灰色作為背景色，并設置文字顏色為白色。content類設置了一個內邊距為20像素的內容區域，使用淺灰色作為背景色。footer類設置了一個高度為50像素的頁腳，使用深灰色作為背景色，并設置文字顏色為白色。這樣，我們就創建了一個簡單的網頁布局，包含了頁頭、內容區域和頁腳。

來說，class和div是網頁開發中常用的兩個概念。class可以用于為元素添加類別，方便地應用樣式和行為規則。div則用于創建容器，將其他元素組織在一起，并通過class屬性進行樣式化。通過合理運用class和div，我們可以構建出具有不同結構和布局的網頁。