在網頁設計中，照片墻作為一種常用的頁面布局方式，可以讓網頁更加美觀，實現起來也比較簡單。本文將介紹如何使用HTML5制作照片墻。

首先，我們需要使用HTML5的語義化標簽，將圖片封裝在figure標簽中，以及給圖片添加alt屬性等標準的圖片屬性。以下是一個基礎的HTML5照片墻代碼示例：

<div id="photo-wall">
<figure>
<img src="image1.jpg" alt="圖片1">
<figcaption>圖片1說明文字</figcaption>
</figure>
<figure>
<img src="image2.jpg" alt="圖片2">
<figcaption>圖片2說明文字</figcaption>
</figure>
<figure>
<img src="image3.jpg" alt="圖片3">
<figcaption>圖片3說明文字</figcaption>
</figure>
</div>

可以看到，我們使用了div標簽將整個照片墻封裝起來，每一個圖片則使用了figure標簽，其中包含圖片本身和圖片說明文字。在CSS中，我們可以使用flexbox技術，將圖片進行等距排列。以下是一個基礎的CSS布局代碼：

#photo-wall {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
figure {
margin: 10px;
}
img {
width: 100%;
height: auto;
object-fit: cover;
}
figcaption {
text-align: center;
}

這段CSS代碼的作用是將照片墻進行等距排列，并將照片完全填充每一個div塊。其中，display: flex;可以將div塊變成一個伸縮盒子，flex-wrap: wrap;表示換行，justify-content: center;可以讓子項目居中對齊。同時，我們也對圖片的大小進行了限制，使其完美地適配到每一個div塊中。

通過以上代碼，我們就可以輕松實現一整個HTML5照片墻。你也可以通過添加動畫，調整排列方式等方式進行更加個性化的設置，來滿足不同的設計需求。