<div>是HTML中的一個重要標簽，用于在網頁中創建一個容器，用來包裹其他元素或內容，如文字、圖片、表格等。在網頁設計中，經常會遇到需要展示一系列照片的情況，而使用<div>來實現照片顯示是一種常見的實踐方法。
下面將通過幾個代碼案例來詳細說明如何使用<div>來顯示照片。，需要先指定一個包含照片的容器：

<div class="photo-container">
</div>

在上面的代碼中，我們使用了一個 class 屬性為 "photo-container" 的<div>，這個容器將用于放置照片。接下來，我們可以在容器內部，使用<img>標簽來添加照片的路徑：

<div class="photo-container">
<img src="photo1.jpg" alt="照片1">
<img src="photo2.jpg" alt="照片2">
<img src="photo3.jpg" alt="照片3">
</div>

在上面的代碼中，我們在包含容器內部添加了三個<img>標簽，分別引用了三張照片的路徑。每個<img>標簽都有一個 "src" 屬性，用于指定圖片的路徑，同時也可以使用 "alt" 屬性來為圖片添加輔助文本，以提供對視覺上有障礙的用戶友好的體驗。
除了上述靜態的照片顯示方式，我們也可以使用動態的方式來展示照片，比如實現圖片輪播的效果。在下面的代碼中，我們將結合使用<div>和CSS的動畫效果來實現一個簡單的圖片輪播：

<style>
.photo-container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
<br>
        .photo-container img {
position: absolute;
width: 100%;
height: 100%;
animation: slide-show 5s infinite;
}
<br>
        @keyframes slide-show {
0% { left: 0; }
33.33% { left: -300px; }
66.66% { left: -600px; }
100% { left: 0; }
}
</style>
<br>
    <div class="photo-container">
<img src="photo1.jpg" alt="照片1">
<img src="photo2.jpg" alt="照片2">
<img src="photo3.jpg" alt="照片3">
</div>

在上述代碼中，我們定義了一個 CSS 類"photo-container"，并設置了它的寬度、高度和溢出隱藏的屬性。然后，通過設置內部<img>標簽的定位屬性為"absolute"，我們使得這些照片可以根據容器的位置進行調整。接下來，我們使用了一個名為"slide-show"的動畫效果，并將其應用于<img>標簽上，使得照片可以在容器內水平移動。最后，我們將<img>標簽放置在<div>容器中，即可實現圖片輪播的效果。
在實際網頁設計中，照片顯示使用<div>標簽的案例非常豐富。例如，在一個產品展示的頁面中，可以使用<div>來實現產品圖片的展示；在一個圖片集合的相冊頁面中，可以使用<div>來將圖片進行分類和排列展示等等。通過合理運用<div>標簽以及CSS的樣式設置，可以實現出各種各樣的照片展示效果，為網頁增添了美觀和交互性。
起來，<div>標簽是實現照片顯示的重要元素之一，通過指定一個容器，可以將圖片包裹在其中。除了靜態的圖片顯示方式外，我們還可以借助CSS的樣式和動畫效果來實現更加豐富的照片展示效果。無論是在產品展示、相冊頁面還是其他需要展示照片的場景中，運用<div>標簽來顯示照片都是一種常見的實踐方法，為網頁設計提供了更多的選擇和靈活性。