<div>和<li>是HTML標簽中用來構建網頁結構的元素之一。下面我將通過幾個代碼案例來詳細解釋這兩個標簽的用法和特點。
，<div>標簽是用來定義HTML文檔中的一個區塊或容器的。它是一個塊級元素，可以用來組織和布局網頁的內容。可以將<div>標簽看作是一個容器，可以放置各種其他HTML元素，比如文本、圖片、表格等。通過使用<div>標簽，我們可以將網頁的不同部分劃分為不同的區域，方便進行樣式和布局的調整。
以下是一個<div>標簽的簡單示例代碼：

<div style="width: 300px; height: 200px; background-color: yellow;">
<p>這是一個div容器</p>
</div>

在上面的代碼中，我們創建了一個寬度為300像素、高度為200像素、背景顏色為黃色的<div>容器。在容器內部，我們可以放置其他HTML元素來展示網頁的內容。在這個例子中，我們放置了一個段落元素

來顯示一段文本。
接下來，我將介紹<li>標簽的用法。它是用來創建一個項目列表的元素。通常與有序列表<ol>或無序列表<ul>配合使用。例如，我們可以使用<ul>和<li>標簽創建一個無序列表：

<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>

在上面的代碼中，我們使用<ul>標簽創建了一個無序列表，列表中的每一項都用<li>標簽包裹起來。瀏覽器會自動在每個列表項前面添加一個符號或者其它符號來表示列表的項目。
除了上述用法，<div>和<li>還可以與CSS樣式配合使用，實現更豐富的表現效果。我們可以在<div>標簽中定義CSS樣式，來控制容器的外觀和布局。例如，我們可以使用CSS的class選擇器給<div>添加樣式：

<style>
.container {
width: 300px;
height: 200px;
background-color: yellow;
}
</style>
<br>
<div class="container">
<p>這是一個帶樣式的div容器</p>
</div>

在上面的代碼中，我們使用了CSS的class選擇器來選中<div>標簽，并給它添加了名為.container的樣式類。然后，在<style>標簽中定義了.class的樣式，來改變容器的外觀。
來說，<div>和<li>是HTML中常用的元素，分別用于創建容器和列表項目。通過它們的靈活運用，我們可以構建出功能豐富、外觀精美的網頁。同時，通過CSS樣式的配合，我們可以自由地控制它們的外觀和布局，實現更好的用戶體驗。