<div>標簽是HTML中的一個塊級元素，用于創建一個容器來包裹其他元素。通過使用<div>標簽，可以對這些元素進行分組，從而方便對它們進行樣式調整、排版布局等操作。在<div>標簽的開始和結束之間的代碼都將被視為該容器內的元素，因此可以通過CSS樣式和布局規則來控制這些元素的排列和顯示效果。
下面通過幾個案例來詳細解釋如何使用<div>標簽進行排版布局。
1. 案例一：
在這個案例中，我們需要將一個頁面分為兩個列，左側列寬度為30%、右側列寬度為70%，并在每個列中分別放置一些內容。
HTML代碼如下：

<div id="container">
<div id="left-column">左側列</div>
<div id="right-column">右側列</div>
</div>

CSS代碼如下：

#container {
display: flex;
}
<br>
  #left-column {
width: 30%;
}
<br>
  #right-column {
width: 70%;
}

在這個案例中，我們使用了<div>標簽創建了一個名為container的容器，然后在容器內部創建了兩個子容器，分別是左側列(left-column)和右側列(right-column)。通過設置CSS樣式，我們實現了將左側列寬度設置為30%，右側列寬度設置為70%的效果。
2. 案例二：
在這個案例中，我們需要創建一個基本的網頁布局，包含頁頭、頁腳和中間的內容區域。
HTML代碼如下：

<div id="header">頁頭</div>
<div id="content">內容區域</div>
<div id="footer">頁腳</div>

CSS代碼如下：

#header {
background-color: #f0f0f0;
height: 100px;
}
<br>
  #content {
height: 500px;
}
<br>
  #footer {
background-color: #f0f0f0;
height: 100px;
}

在這個案例中，我們使用了三個<div>標簽分別創建了頁頭、內容區域和頁腳。通過設置CSS樣式，我們實現了給頁頭和頁腳設置背景色和高度的效果，并將內容區域的高度設置為500px。
通過上面的案例，我們可以看到使用<div>標簽可以簡單快速地實現各種排版布局。通過合理的運用CSS樣式和布局規則，我們可以靈活地控制這些<div>容器內部元素的排列和顯示效果。<div>標簽的使用可以大大提高網頁的可讀性和可維護性，同時也增強了網頁的整體結構和美感。因此，我們在進行網頁排版布局時，應該充分利用<div>標簽來進行元素的分組和布局操作，以提高網頁的質量。