HTML與CSS的結合使用可以創(chuàng)建出豐富多彩的網(wǎng)頁，其中HTML用于構建網(wǎng)頁的結構，而CSS則用于美化這些網(wǎng)頁，在HTML中放置圖片，通常使用<img>標簽，而CSS則提供了更多的控制和樣式化選項。

HTML中的圖片放置

在HTML中，你可以使用<img>標簽來放置圖片。

<img src="image.jpg" alt="圖片描述">

src屬性指定了圖片的路徑，alt屬性則提供了圖片的描述，這對于搜索引擎優(yōu)化和視覺障礙用戶來說是非常重要的。

CSS中的圖片控制

CSS提供了更多的控制和樣式化選項，比如你可以使用CSS來設置圖片的大小、位置、邊框等屬性。

img {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
}

這段CSS代碼將使得所有<img>標簽的圖片寬度和高度都為200像素，并且?guī)в?像素寬的黑色邊框。

圖片的浮動與排列

CSS中的float屬性可以用來控制圖片在網(wǎng)頁中的浮動和排列。

img.float-left {
    float: left;
    margin-right: 10px;
}
img.float-right {
    float: right;
    margin-left: 10px;
}

這段CSS代碼定義了兩個類，分別用于將圖片浮動到左側或右側，并帶有一定的外邊距，在HTML中，你可以這樣使用：

<img class="float-left" src="image1.jpg" alt="圖片1">
<img class="float-right" src="image2.jpg" alt="圖片2">

響應式圖片

在CSS中，你還可以使用媒體查詢（Media Queries）來創(chuàng)建響應式圖片，即根據(jù)屏幕大小自動調(diào)整圖片大小。

img {
    width: 100%;
    height: auto;
}

這段CSS代碼將使得圖片的寬度始終為100%，高度則根據(jù)寬度自動調(diào)整，保持圖片的原始比例，在窄屏設備上，這將導致圖片的高度減小，以適應屏幕寬度。

HTML與CSS的結合使用可以使得圖片的放置更加靈活和多樣化，通過CSS，你可以控制圖片的大小、位置、邊框等屬性，甚***實現(xiàn)圖片的浮動和響應式設計，這些技巧將幫助你創(chuàng)建出更加美觀和實用的網(wǎng)頁。