<div 四塊是指在網頁開發中，使用div元素來劃分頁面的四個主要區塊。它們是網頁頭部（header）、導航欄（navbar）、內容區域（main）和頁腳（footer）。通過合理地使用div四塊，可以使網頁結構更加清晰，樣式更加整齊，并提高網頁的可維護性和擴展性。
，我們來看一下使用div四塊的簡單示例。下面的代碼段展示了一個基本的網頁布局：

<div id="header">
<h1>網頁標題</h1>
<p>網頁頭部內容</p>
</div>
<br>
<div id="navbar">
<a href="#">導航鏈接1</a>
<a href="#">導航鏈接2</a>
<a href="#">導航鏈接3</a>
</div>
<br>
<div id="main">
<h2>主要內容</h2>
<p>這里是網頁的主要內容區域。</p>
</div>
<br>
<div id="footer">
<p>版權信息</p>
</div>

在上面的示例中，我們使用了id屬性給每個div元素賦予一個唯一的標識符，以便更好地在CSS樣式中應用。接下來，我們將詳細討論每個div四塊的作用和實際應用情況。
在網頁頭部區域（header），通常包含網頁的標題、Logo、標語等。這部分內容有助于用戶在進入網頁后第一時間了解網站的主要信息。以下是一個具體的示例：

<div id="header">
<h1>我的個人博客</h1>
<img src="logo.png" alt="網頁Logo">
<p>歡迎訪問我的個人博客！</p>
</div>

導航欄區域（navbar）用于展示網頁的主要導航鏈接，幫助用戶快速地切換到其他頁面。以下是一個常見的導航欄示例：

<div id="navbar">
<a href="index.html">首頁</a>
<a href="about.html">關于我</a>
<a href="blog.html">我的博客</a>
<a href="contact.html">聯系我</a>
</div>

內容區域（main）是網頁的核心部分，包含了具體的文章、圖片、評論等內容。下面是一個簡單的示例：

<div id="main">
<h2>文章標題</h2>
<p>這是一篇關于div四塊的文章。</p>
<img src="article.jpg" alt="文章配圖">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

頁腳區域（footer）一般包含版權信息、聯系方式、鏈接等內容。以下是一個頁腳的實例：

<div id="footer">
<p>版權所有 (c) 2022 我的個人網站。</p>
<p>聯系方式：info@example.com</p>
</div>

通過合理地使用div四塊，我們可以輕松構建出一個整潔、有條理的網頁布局。此外，結合CSS樣式表，我們還可以對這四個區塊進行進一步的樣式定義，使網頁更加美觀和易于閱讀。
來說，div四塊是一種在網頁開發中常用的布局方式，它能夠將網頁分割為頭部、導航欄、內容區域和頁腳四個主要區塊。通過合理地添加內容和樣式，我們能夠創建出具有良好可讀性和易維護性的網頁。希望這篇文章能夠幫助你更好地理解和應用div四塊布局。