<div>和<span>是HTML標(biāo)簽中最常用的兩個(gè)元素之一，它們都屬于塊級(jí)元素。而在CSS中，<div>和<span>通常用來選擇和操作HTML文檔中的特定元素或元素組。

在HTML中，<div>標(biāo)簽用于定義文檔中的一個(gè)區(qū)域塊，它通常用來包圍其他HTML元素，并為這些元素提供樣式或布局。可以將<div>看作是一個(gè)容器，它可以設(shè)置自己的樣式，并將其內(nèi)部元素組織在一起。

<div>
<h1>這是一個(gè)div容器</h1>
<p>這是div內(nèi)的一段文字。</p>
<img src="image.jpg" alt="圖片">
</div>

上面的代碼案例中，我們使用了一個(gè)<div>標(biāo)簽來創(chuàng)建一個(gè)包含標(biāo)題、段落和圖片的容器。通過為<div>設(shè)置樣式，我們可以調(diào)整容器的寬度、顏色等屬性，從而改變整個(gè)容器的外觀和布局。

與<div>類似，<span>也是一個(gè)容器元素，但它通常用于包裹文本內(nèi)容或行內(nèi)元素。與<div>不同的是，<span>一般不會(huì)單獨(dú)使用，而是與其他元素一起使用，例如在一個(gè)段落中設(shè)置特定文字的樣式。

<p>
這是一段文字，其中<span>這是要突出顯示</span>的部分內(nèi)容。
</p>

在上述代碼案例中，我們使用了<span>標(biāo)簽來包裹了一段文本中的部分內(nèi)容，通過為<span>設(shè)置樣式，我們可以改變這部分內(nèi)容的顏色、字體大小等屬性。

雖然<div>和<span>是HTML標(biāo)簽，但它們也可以與CSS一起使用。CSS是一種層疊樣式表語言，可以用來為HTML文檔中的元素設(shè)置樣式。

<style>
.container {
width: 300px;
background-color: #F0F0F0;
padding: 10px;
}
<br>
    .highlight {
color: red;
font-weight: bold;
}
</style>
<br>
  <div class="container">
這是一個(gè)<div class="highlight">帶樣式的div容器</div>。
</div>

在上述代碼案例中，我們使用了一個(gè)<style>標(biāo)簽來定義了兩個(gè)CSS樣式，包括.container和.highlight。通過為<div>添加類名.container，我們可以應(yīng)用.container樣式中定義的外觀和布局規(guī)則。而通過為<div>內(nèi)部的<div>添加類名.highlight，我們可以應(yīng)用.highlight樣式中定義的文本樣式。

可以看出，通過使用<div>和<span>標(biāo)簽，并結(jié)合HTML和CSS，我們可以更靈活地選擇和操作HTML文檔中的特定元素，并為其提供樣式和布局。<div>和<span>的靈活性使得它們成為前端開發(fā)中不可或缺的工具。無論是創(chuàng)建容器、包裹文本內(nèi)容還是設(shè)置特定元素的樣式，<div>和<span>都可以滿足我們的需求。