# 圖片標簽 圖片是互聯網的重要組成部分，讓網頁變得豐富多彩。本章介紹如何在網頁插入圖片。 ## 1.`<img>` `<img>`標簽用于插入圖片。它是單獨使用的，沒有閉合標簽。 ~~~html <img src="logo.png"> <img src="http://noi.dodoke.com/images/logo.png"> ~~~ 上面代碼在網頁插入一張圖片`logo.jpg`。`src`屬性指定圖片的網址，上例是相對 URL，表示圖片與網頁在同一個目錄。 `<img>`默認是一個行內元素，與前后的文字處在同一行。 ~~~html <p>Hello<img src="logo.jpg">World</p> ~~~ 上面代碼的渲染結果是，文字和圖片在同一行顯示。 圖像默認以原始大小顯示。如果圖片很大，又與文字處在同一行，那么圖片將把當前行的行高撐高，并且圖片的底邊與文字的底邊在同一條水平線上。 - **alt 屬性** `alt`屬性用來設定圖片的文字說明。圖片不顯示時（比如下載失敗，或用戶關閉圖片加載），圖片的位置上會顯示該文本。 ~~~html <img src="foo.jpg" alt="示例圖片"> ~~~ 上面代碼中，`alt`是圖片的說明。圖片下載失敗時，瀏覽器會在圖片位置，顯示文字“示例圖片”。 - **width 屬性，height 屬性** 圖片默認以原始大小插入網頁，`width`屬性和`height`屬性可以指定圖片顯示時的寬度和高度，單位是像素或百分比。 ~~~html <img src="logo.jpg" width="400" height="300"> ~~~ 上面代碼中，`width`屬性指定圖片顯示的寬度為400像素，`height`屬性指定顯示高度為300像素。 注意，一旦設置了這兩個屬性，瀏覽器會在網頁中預先留出這個大小的空間，不管圖片有沒有加載成功。不過，由于圖片的顯示大小可以用 CSS 設置，所以不建議使用這兩個屬性。 一種特殊情況是，`width`屬性和`height`屬性只設置了一個，另一個沒有設置。這時，瀏覽器會根據圖片的原始大小，自動設置對應比例的圖片寬度或高度。舉例來說，圖片大小是 800像素 x 800像素，`width`屬性設置成200，那么瀏覽器會自動將`height`設成200。