<div>和<span>是HTML中常用的標簽，它們在網頁布局和樣式設計中起到重要的作用。本文將詳細討論<div>和<span>標簽的使用方法，并通過幾個代碼案例來說明它們的作用和區別。
<div>標簽用于定義HTML文檔中的一個區塊，常用于網頁布局的容器。它是一個塊級元素，可以在其內部放置其他HTML元素，如文本、圖像、表格等。<div>標簽的主要作用是將一組HTML元素組合在一起，并根據需要設置其樣式。通過為<div>標簽添加class或id屬性，可以進一步選擇和樣式化這個區塊。
下面的例子展示了如何使用<div>標簽創建兩個容器：

<div class="container">
<p>這是第一個容器</p>
</div>
<br>
    <div class="container">
<p>這是第二個容器</p>
</div>

上面的代碼中，我們為兩個<div>標簽添加了相同的class屬性值"container"，以顯示它們屬于同一類型的容器。這樣，我們就可以通過CSS選擇器選擇并設置這個類中的元素樣式。
<span>標簽用于定義HTML文檔中的一段文本，常用于對文本的樣式設計。它是一個內聯元素，不會獨占一行，可以與其他元素在同一行上顯示。與<div>標簽不同，<span>標簽通常作用于更小的文本片段，并且可以通過CSS樣式來改變它們的外觀。
下面的例子展示了如何使用<span>標簽為一段文本添加樣式：

<p>這是一個<span style="color: red;">紅色</span>的文本。</p>
<p>這是一個<span style="font-weight: bold;">加粗</span>的文本。</p>

上面的代碼中，我們在兩個段落中使用<span>標簽將一部分文本標記為需要樣式化的部分。通過在<span>標簽中添加style屬性，我們可以直接為這些文本片段設置顏色、字體大小、字重等樣式。
起來，<div>標簽通常用于布局和容器設計，它是一個塊級元素，可以包含多個HTML元素。而<span>標簽則主要用于對文本樣式的設計，它是一個內聯元素，通常用于設置文本的樣式。在實際開發中，根據需要選擇合適的標簽來實現網頁布局和樣式化。