HTML 相冊代碼下載
在網頁制作中，一個頁面中通過圖片展示來呈現內容是很常見的，而相冊是一種將多張圖片集中起來展示的方式。下面是一個基礎版的 HTML 相冊代碼供大家參考，在此之上可以進行進一步的擴展。
首先，在 HTML 頁面中使用<div>標簽來定義一個容器，用于容納相冊中的每一張照片。
<div class="album"> <img src="image1.jpg" alt="照片1"> </div>
以上代碼中的<div class="album">定義了一個類名為 album 的容器，隨后使用<img>標簽將圖片插入到這個容器中。通過為每一張圖片設置不同的 src 屬性和 alt 屬性，來區分不同的圖片。
為了實現相冊的布局效果，我們可以使用 CSS 對容器進行布局樣式的設置，例如定義圖片的大小、位置和間距等。
.album {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.album img {
width: 200px;
height: 200px;
margin: 10px;
}以上樣式中，使用了彈性布局的相關樣式來控制相冊中每一張照片的排列方式。其中，display: flex;定義了容器為彈性布局方式，flex-wrap: wrap;定義了當容器的寬度不足以容納所有子元素時，應該如何換行展示。justify-content 和 align-items 屬性則用來控制子元素在 X 軸和 Y 軸方向上的排列方式。.album img部分則用于控制每一張照片的大小和外邊距。
當然，以上僅是一個簡單的示例，實際的相冊布局樣式可能更加復雜且需要適應不同的設備和瀏覽器。到這里，我們已經完成了一個相冊的基本構建。
完整的 HTML 相冊代碼可以在下方的 pre 標簽中下載：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Album</title>
<style>
.album {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.album img {
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<div class="album">
<img src="image1.jpg" alt="照片1">
<img src="image2.jpg" alt="照片2">
<img src="image3.jpg" alt="照片3">
<img src="image4.jpg" alt="照片4">
<img src="image5.jpg" alt="照片5">
</div>
</body>
</html>