<div>和<span>是HTML中的兩個常用標簽，常常一起使用來構建網頁的布局和樣式。在HTML中，<div>用于定義文檔中的一個區域，而<span>用于定義文檔中的一個行內元素。本文將詳細介紹<div>中如何使用<span>，并通過幾個代碼案例來說明。
，我們來看一個簡單的例子。假設我們有一個<div>，用于包圍一段文本，并且要給這段文本應用特定的樣式。我們可以在<div>內部使用<span>標簽給這段文本進行標記，然后通過CSS來為<span>定義樣式。以下是一個示例代碼：

<style>
div {
border: 1px solid black;
padding: 10px;
}
<br>
span {
color: red;
font-weight: bold;
}
</style>
<br>
<div>
<span>這是一段文本</span>
</div>

在上面的代碼中，我們定義了<div>的樣式，包括邊框和內邊距。接著，我們又定義了<span>的樣式，包括文本顏色和字體加粗。最后，我們在<div>內部使用了一個<span>標簽，并為其包裹了一段文本。
運行上面的代碼，我們會發現這段文本被包裹在一個帶有邊框和內邊距的<div>中，并且文本的顏色變成了紅色且加粗了。這樣我們就成功地通過<div>中的<span>來為文本應用了特定的樣式。
接下來，我們再來看一個稍微復雜一些的例子。假設我們要創建一個導航條，其中導航項之間有一些間距，并且當前活動的導航項要使用特定的樣式。以下是一個示例代碼：

<style>
div {
display: flex;
justify-content: space-between;
}
<br>
span {
padding: 5px;
}
<br>
span.active {
background-color: blue;
color: white;
}
</style>
<br>
<div>
<span>首頁</span>
<span>關于我們</span>
<span class="active">產品中心</span>
<span>聯系我們</span>
</div>

在上面的代碼中，我們通過CSS將<div>的display屬性設置為flex，并且使用justify-content屬性將內部的元素均勻分布在容器中。接著，我們定義了<span>的樣式，并為.active類定義了特定的樣式，包括背景顏色和文本顏色。
運行上面的代碼，我們會得到一個具有導航項的導航條，其中導航項之間有一些間距，且當前活動的導航項的背景顏色變成了藍色且文本的顏色變成了白色。
通過上面的兩個例子，我們可以看到<div>中如何使用<span>來為元素應用特定的樣式。它們的組合使用可以讓我們更靈活地控制文檔的布局和樣式。使用<div>和<span>能夠使我們的網頁更加具有結構和美觀。希望本文對你理解<div>和<span>的使用有所幫助。