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

<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>

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

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