HTML是一種用來創建網頁的標記語言，它可以輕松地設置圖冊。讓我們來看看如何使用HTML來創建一個圖冊。 首先，我們需要在HTML文件中添加一個列表。我們可以使用pre標簽來放置我們的代碼：

<ul>
<li><img src="gallery/image1.jpg"></li>
<li><img src="gallery/image2.jpg"></li>
<li><img src="gallery/image3.jpg"></li>
<li><img src="gallery/image4.jpg"></li>
</ul>

在上面的代碼中，我們創建了一個無序列表<ul>，并在其中添加了四個列表項<li>。每個列表項都包含一個圖片標簽<img>，其中的src屬性指定了圖片的路徑。在這個例子中，我們假設圖片都保存在名為“gallery”的目錄中。 接下來，我們可以利用CSS來使圖冊更加美觀。我們可以使用p標簽來加入CSS樣式，代碼同樣可以通過pre標簽來展示：

<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
width: 25%;
vertical-align: top;
margin-bottom: 15px;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
</style>
<ul>
<li><img src="gallery/image1.jpg"></li>
<li><img src="gallery/image2.jpg"></li>
<li><img src="gallery/image3.jpg"></li>
<li><img src="gallery/image4.jpg"></li>
</ul>

在上面的代碼中，我們使用CSS來設置樣式。我們將ul元素的列表樣式刪除，將margin和padding設置為0，使列表看起來更干凈。我們將每個列表項設置為inline-block元素，使它們在同一行內顯示。我們還使用box-sizing屬性來包括元素的內邊距和邊框，使它們在盒子模型中更可預測。最后，我們將圖片的最大寬度設置為100％，以使其適應其容器的大小。 在這個例子中，我們展示了使用HTML和CSS來設置圖冊的基本方法。通過使用預處理標簽，在代碼中展示HTML和CSS，可以使整個過程更加清晰明了。