<div>是HTML中的一個標簽，用于在網頁中創建一個容器，可以放置其他HTML元素。<div>標簽是一個塊級元素，它通常被用來組織和布局網頁的不同部分。通過使用CSS，我們可以對<div>元素進行樣式設置，例如改變背景顏色、設置邊框等。
以下是幾個示例，演示了如何使用<div>標簽創建不同的子頁面布局。
第一個示例是一個簡單的網頁布局，包含一個頭部、主體和頁腳。在這個示例中，我們將<header>、<main>和<footer>標簽包裹在<div>標簽中，分別表示頁面的不同部分。

示例1：一個包含頭部、主體和頁腳的網頁布局：

<div>
<header>
<h1>這是頭部</h1>
</header>
<br>
  <main>
<h2>這是主體</h2>
<p>這是主體的內容。</p>
</main>
<br>
  <footer>
<p>這是頁腳。</p>
</footer>
</div>

第二個示例是一個相冊網頁的布局。在這個示例中，我們使用<div>標簽來創建一個包含多個圖片的相冊。每個圖片都被包裹在一個<div>標簽中，這樣我們可以輕松地為每個圖片設置樣式或添加點擊事件等功能。

示例2：一個相冊網頁的布局：

<div>
<div>
<img src="image1.jpg" alt="圖片1">
</div>
<br>
  <div>
<img src="image2.jpg" alt="圖片2">
</div>
<br>
  <div>
<img src="image3.jpg" alt="圖片3">
</div>
</div>

第三個示例是一個博客網站的布局。在這個示例中，我們使用<div>標簽來創建一個包含博客文章的列表。每篇博客文章都被包裹在一個<div>標簽中，包括標題、作者和正文等內容。

示例3：一個博客網站的布局：

<div>
<div>
<h3>文章標題1</h3>
<p>作者：張三</p>
<p>正文內容。</p>
</div>
<br>
  <div>
<h3>文章標題2</h3>
<p>作者：李四</p>
<p>正文內容。</p>
</div>
<br>
  <div>
<h3>文章標題3</h3>
<p>作者：王五</p>
<p>正文內容。</p>
</div>
</div>

通過上面的示例，我們可以看到<div>標簽的靈活性和強大的布局能力。它可以用于創建各種各樣的子頁面布局，包括網頁的頭部、主體、頁腳、相冊、博客列表等。通過合理地使用<div>標簽，我們可以更好地組織和呈現網頁的內容，提升用戶體驗。