HTML和CSS是設計網站的基礎語言，通過它們可以實現頁面的布局和樣式。其中，圖片排版也是網頁設計的一個重要部分。本文將介紹一些HTML和CSS的圖片排版代碼。 首先，我們需要在HTML中插入圖片。可以使用以下代碼：

<img src="圖片地址" alt="圖片描述">

其中，"圖片地址"是圖片文件在服務器上的路徑，"圖片描述"是在無法顯示圖片時的替代文本。注意，img標簽是一個自閉合標簽，不需要結束標簽。 接下來，需要設置圖片的樣式。可以使用以下代碼：

img {
width: 100%; /* 圖片寬度占據父元素的100% */
height: auto; /* 圖片高度自適應 */
margin: 0 auto; /* 居中 */
display: block; /* 讓圖片成為塊級元素，以便設置margin和居中 */
}

這些代碼將使圖片占據其父元素的100%寬度，并在居中時調整高度。display屬性將其轉換為塊級元素，以便margin和居中樣式能夠起作用。 如果需要在文字描述和圖片之間添加空格，可以使用以下代碼：

<p>這是段落文字。</p>
<p>  </p><img src="圖片地址" alt="圖片描述">

接下來，我們需要將多個圖片排列在一行或一列中。可以使用以下代碼： 在一行中，使用float屬性來使圖片"浮動"左右：

<style>
.img-container {
overflow: hidden; /* 為了避免"浮動"的內容漏出容器，需要添加overflow屬性 */
}
.img-container img {
float: left; /* "浮動"，讓多張圖片排至一行 */
}
</style>
<div class="img-container">
<img src="圖片地址1" alt="圖片描述1">
<img src="圖片地址2" alt="圖片描述2">
<img src="圖片地址3" alt="圖片描述3">
</div>

在一列中，可以使用flex布局：

<style>
.img-container {
display: flex; /* 使用flex布局 */
flex-direction: column; /* 子元素按列排列 */
}
</style>
<div class="img-container">
<img src="圖片地址1" alt="圖片描述1">
<img src="圖片地址2" alt="圖片描述2">
<img src="圖片地址3" alt="圖片描述3">
</div>

以上是一些基本的HTML和CSS圖片排版代碼。與其他元素一樣，圖片的樣式和位置可以根據需求進行調整。理解如何使用HTML和CSS將圖片排版，將有助于您創建出更好的網頁設計。