第一個例子，我們用<div>標簽來創建一個簡單的居中場景，效果如下：
<div style="text-align: center;"> <h1>這是一個居中的標題</h1> <p>這是一個居中的段落。</p> </div>
上面的代碼中，我們將<div>標簽的樣式設為"text-align: center;"，使其內部元素居中對齊。在<div>標簽內部，我們放置了一個<h1>標題</h1>和一個
段落
，它們都會被居中對齊顯示。第二個例子是使用<div>標簽來實現響應式布局，即在不同屏幕尺寸上展示不同的樣式。下面的代碼演示了一個簡單的響應式布局：
<div style="display: flex; flex-wrap: wrap;"> <div style="flex: 1 0 300px; background-color: red;">左側區域</div> <div style="flex: 2 0 400px; background-color: blue;">右側區域</div> </div>
在上面的代碼中，我們使用<div>標簽創建了一個包含兩個子區域的容器。通過設置樣式"display: flex;"，我們讓容器內的元素自動適應屏幕尺寸并排列。其中，左側區域的樣式設為"flex: 1 0 300px;"，表示它在分配空間時占比為1，不允許收縮，初始寬度為300px；而右側區域的樣式設為"flex: 2 0 400px;"，表示它在分配空間時占比為2，不允許收縮，初始寬度為400px。這樣，在不同屏幕尺寸下，左右兩側的區域會按照不同的寬度比例自動調整大小。
第三個例子演示了使用<div>標簽實現一個簡單的網站導航菜單：
<div class="nav-menu"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">產品</a></li> <li><a href="#">服務</a></li> <li><a href="#">關于我們</a></li> </ul> </div>
在上面的代碼中，我們給<div>標簽添加了一個"class"屬性，并設為"nav-menu"，用于定義這個導航菜單的樣式。在<div>標簽內部，我們使用<ul>和<li>標簽構建了一個無序列表，每個列表項都包含一個<a>標簽，用于鏈接到不同的頁面。通過添加樣式，我們可以對導航菜單進行進一步的美化和布局。
來說，<div>標簽是HTML中一個非常重要的元素，它提供了一種組織和布局網頁內容的方式。通過設置樣式，我們可以進一步控制<div>內部元素的展示效果和交互行為，實現豐富多樣的網頁設計。以上只是一些簡單的示例，實際應用中可以根據需求和創意靈活運用<div>標簽，為網頁帶來更豐富的功能和用戶體驗。