本文目錄導(dǎo)讀：

1. 使用HTML插入圖片
2. 使用CSS美化圖片

HTML和CSS是網(wǎng)頁設(shè)計(jì)的兩個(gè)重要方面，HTML負(fù)責(zé)構(gòu)建網(wǎng)頁的結(jié)構(gòu)，而CSS則負(fù)責(zé)美化網(wǎng)頁，在網(wǎng)頁設(shè)計(jì)中，插入圖片是一個(gè)常見的需求，下面是如何使用HTML和CSS來插入圖片的方法。

使用HTML插入圖片

在HTML中，可以使用<img>標(biāo)簽來插入圖片。

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

src屬性指定了圖片的路徑，alt屬性則提供了圖片的描述，如果圖片無法加載，瀏覽器將顯示alt。

使用CSS美化圖片

雖然HTML可以插入圖片，但CSS可以幫助我們更好地控制圖片的外觀，我們可以使用CSS來設(shè)置圖片的大小、位置、邊框等屬性，下面是一個(gè)簡單的例子：

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

在CSS中定義my-image類：

.my-image {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin: 10px;
}

在這個(gè)例子中，CSS將圖片的大小設(shè)置為200像素寬和200像素高，并添加了一個(gè)1像素寬的黑色邊框，還設(shè)置了圖片與周圍元素之間的間隔為10像素。

使用HTML和CSS可以輕松地插入和美化圖片，HTML負(fù)責(zé)插入圖片，而CSS則提供了強(qiáng)大的樣式控制功能，讓我們可以根據(jù)需要自定義圖片的外觀，在實(shí)際應(yīng)用中，我們可以根據(jù)具體需求來選擇合適的方法和屬性來實(shí)現(xiàn)所需的效果。