照片墻是一個在網頁上展示多張照片的常見方式，它可以用于個人相冊、產品展示等多種場景。在 HTML5 中，我們可以使用新的標簽和屬性來制作照片墻，無需借助 JavaScript 或其他腳本。

<!-- HTML 代碼 -->
<figure>
<img src="photo1.png" alt="照片 1">
<figcaption>照片 1 的標題</figcaption>
</figure>
<figure>
<img src="photo2.png" alt="照片 2">
<figcaption>照片 2 的標題</figcaption>
</figure>
<figure>
<img src="photo3.png" alt="照片 3">
<figcaption>照片 3 的標題</figcaption>
</figure>

使用 HTML5 新增的figure標簽可以將每張照片和其標題包裹在一起，方便布局和樣式設置。我們可以使用 CSS 為figure和figcaption設置樣式，比如設置它們的寬度和高度、邊距、字體等。

/* CSS 代碼 */
figure {
display: inline-block;
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
img {
max-width: 100%;
height: auto;
}
figcaption {
font-size: 14px;
text-align: center;
margin-top: 5px;
}

以上 CSS 代碼示例中，我們設置了figure元素為內聯塊級元素，使它們可以排列在一行。同時設置了width和height屬性，使它們的尺寸保持一致。邊框樣式可以根據需求進行設置。

最后，我們可以為每張照片添加一些鼠標交互效果，比如懸停效果、點擊效果等。這可以通過 CSS 的偽類實現。例如：

/* CSS 代碼 */
figure:hover {
box-shadow: 0 0 10px #aaa;
}
figure:active {
transform: scale(0.95);
}

以上 CSS 代碼示例中，我們為figure設置了:hover和:active偽類，分別在鼠標懸停和點擊時實現了陰影和縮小的效果。

通過以上 HTML5 和 CSS 的代碼示例，我們可以快速、簡單地制作出一個美觀、實用的照片墻。