<div>和<span>是HTML元素中常用的兩個標簽，用于控制文本和元素的位置。在HTML中，常常會使用這兩個標簽來設置頁面的布局和樣式。下面將通過幾個代碼案例來詳細說明<div>和<span>的使用方法和效果。
案例一：基本使用

，我們來看一個基本的<div>和<span>的使用案例。

<div>這是一個div標簽</div>
<span>這是一個span標簽</span>

在網頁顯示中，上述代碼將被轉換為：

<div>這是一個div標簽</div> <span>這是一個span標簽</span>
案例二：設置樣式

除了用于控制文本和元素的位置外，<div>和<span>還可以結合CSS樣式來設置元素的外觀。

<div style="background-color: pink; width: 200px; height: 100px;">這是一個帶樣式的div標簽</div>
<span style="font-weight: bold; color: blue;">這是一個帶樣式的span標簽</span>

在網頁顯示中，上述代碼將被轉換為：

<div style="background-color: pink; width: 200px; height: 100px;">這是一個帶樣式的div標簽</div> <span style="font-weight: bold; color: blue;">這是一個帶樣式的span標簽</span>
案例三：<div>嵌套<span>

除了可以分別使用<div>和<span>，它們還可以嵌套使用，以實現更復雜的布局效果。

<div style="background-color: lightgray; padding: 10px;">
<span style="font-weight: bold;">標題：</span>
<span>這是一個帶標題的區塊</span>
</div>

在網頁顯示中，上述代碼將被轉換為：

<div style="background-color: lightgray; padding: 10px;"> <span style="font-weight: bold;">標題：</span> <span>這是一個帶標題的區塊</span> </div>
綜上所述，<div>和<span>是HTML中常用的兩個標簽，用于控制文本和元素的位置。通過結合CSS樣式和嵌套使用，可以實現多種布局效果。希望以上案例對你理解<div>和<span>的使用有所幫助。