div、ul和li是HTML中常用的標簽，用于創建網頁的結構和布局。它們經常一起使用，配合特定的樣式和效果，來實現網頁的導航菜單、列表顯示等功能。下面通過幾個代碼案例來詳細解釋和說明這幾個標簽的使用方法。

案例1：創建一個基本的導航菜單

假設我們要創建一個簡單的水平導航菜單，其中包含3個鏈接。可以使用div、ul和li標簽來實現這個導航菜單的結構。可以按照以下方式編寫HTML代碼：

<div>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>

上述代碼中，我們使用div標簽來包裹整個導航菜單，并使用ul標簽來創建一個無序列表。然后使用li標簽來創建列表項，每個列表項中都包含一個鏈接（使用a標簽創建）。這樣就可以得到一個基本的導航菜單結構。

案例2：垂直導航菜單

除了水平導航菜單外，我們還可以使用div、ul和li標簽來創建垂直導航菜單。可以按照以下方式編寫HTML代碼：

<div>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>

上述代碼與案例1中的代碼相同，只是在CSS樣式表中添加了特定的樣式，來將導航菜單垂直顯示。可以通過設置ul的"display"屬性值為"block"來實現垂直顯示效果。

案例3：嵌套列表

ul和li標簽還可以嵌套使用，用于創建復雜的列表顯示效果。可以按照以下方式編寫HTML代碼：

<ul>
<li>汽車
<ul>
<li>奧迪</li>
<li>寶馬</li>
<li>奔馳</li>
</ul>
</li>
<li>手機
<ul>
<li>蘋果</li>
<li>三星</li>
<li>華為</li>
</ul>
</li>
</ul>

上述代碼中，我們創建了一個嵌套的無序列表。每個li標簽內都包含一個ul標簽，用于創建子列表。這樣就可以實現類似樹狀結構的列表顯示效果，適用于顯示多級分類信息。

綜上所述，div、ul和li標簽在HTML中的配合使用，可以實現各種各樣的結構和布局效果，從簡單的導航菜單到復雜的列表顯示都可以應用。熟練掌握這幾個標簽的用法，有助于我們更好地定制和設計網頁的結構和樣式。