HTML5對網頁照片對齊進行了極大的改進，使其在視覺上更加優美。在這篇文章中，我們將介紹如何使用HTML5進行照片對齊代碼的編寫。

代碼示例：

<style>
.photo-gallery {
display: flex;
flex-flow: row wrap;
}
.photo-gallery img {
width: 100%;
height: auto;
}
.photo-gallery img:nth-child(odd) {
margin-right: 10px;
}
.photo-gallery img:nth-child(even) {
margin-left: 10px;
}
</style>
<div class="photo-gallery">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
<img src="photo4.jpg">
<img src="photo5.jpg">
<img src="photo6.jpg">
</div>

在上面的示例代碼中，我們使用了CSS的flex布局來實現照片對齊。我們使用了一個容器div，并把它設置為display: flex，以便自動排列所有圖片。我們還使用了 flex-flow: row wrap，使得圖片能夠自適應大小并自動換行。

我們還使用:nth-child()選擇器來針對每張圖片進行特定的樣式設置。從第一張圖片開始，我們設置margin-right: 10px的間距，從第二張圖片開始，我們設置margin-left: 10px的間距。這樣就可以實現照片的合理排列和對齊。

HTML5的照片對齊功能可以讓我們在網頁設計中更加自由和靈活。代碼也非常簡單易懂，即使是新手也可以很快上手。希望這篇文章能對你有所幫助。