圖片標籤、絕對路徑和相對路徑，［］ < img >標籤代表圖片，img標籤的作用是向網頁中插入一張圖片，並不是將圖片繪製到網頁中。

src 屬性：“插入”圖片到網頁中去。

alt 屬性：值可以是一段文字，當圖片由於各種原因無法顯示時，alt屬性的值就會被顯示在網頁上。

width/height 屬性：設定圖片的寬度／高度；不適合用於圖片，可用於純色圖的拉伸；單位可以是px，也可以是％，單位為％時是指佔窗體寬高的百分比大小。

1. <font size="3"><!DOCTYPE html>

2. <html>

3. <head>

4. <title>image</title>

5. </head>

6. <body>

7. <img src="a.png" alt="picture" width="100px" height="100px" />

8. </body>

9. </html></font>

推薦 < img >標籤中加上“/”來關閉標籤。

推薦使用 PNG圖片格式

當圖片無法正確載入時會出現圖片錯誤的圖示：
圖片載入錯誤

可能導致圖片錯誤的原因：
1. 路徑名寫錯了
2. 引用的圖片被刪除了
3. 網路問題

畫素：顯示內容基本長度單位 pixel。

點陣圖：圖片中每一個畫素都由 4個數字（argb）組成（0-255），原則上不能拉伸因為會導致失真。
a：透明度；r：紅色；g：綠色；b：藍色

向量圖：可以隨意拉伸。
透過圖片的拉伸可以將一張很小的純色圖片冒充為一張大圖，節約資源的載入。

絕對路徑：使用圖片在硬碟上的絕對位置來訪問圖片，通常是從根目錄開始，向下一個目錄一個目錄的尋找；在開發網頁的過程中，一般不會使用絕對路徑

相對路徑：指的是相對於當前網頁的路徑。
相對路徑的起點就是

src的值就是路徑。

“..” 在路徑中代表當前網頁所在目錄的上一級目錄
“.” 在路徑中代表當前網頁所在目錄

1. <img src="../a.png" />

好程式設計師web分享圖片標籤、絕對路徑和相對路徑

相關文章