HTML img tag 圖片標籤 - 網頁設計教學站

HTML img tag 圖片標籤是 HTML 網頁設計中，用來在網頁裡面插入圖片的標準語法，同一個網頁中沒有特別限制所能插入的 img tag 數量，不過插入的圖片越大或是圖片數量越多，所占用的頻寬將會越多。HTML img tag 的用法與許多 HTML tag 需要有開頭標籤與結尾標籤不太一樣，img tag 僅有單一個 <img> 即可插入一張圖片，所有的瀏覽器都支援 HTML img tag 圖片標籤的功能。

HTML img tag 圖片標籤語法

HTML img tag 僅有 src 屬性為必填項目，src 用來標示圖片的網址（url），少了 src 屬性，瀏覽器無法判斷要顯示的圖片是哪一張，所以示必填項目，在網頁中插入一張圖片最簡單的方式就是「<img src="圖片網址">」這樣，其它屬性功能如下。

alt - 圖片替代文字，當圖片無法呈現時，可以顯示 alt 的文字內容。
title - 圖片的提示文字，也就是當滑鼠移到圖片上方會顯示的文字。
border - 圖片的邊框粗細，可以用 CSS 的 border 設計方式取代。
width - 圖片的寬度，預設單位為 px，可以用 CSS 的樣式設計取代。

有了這些屬性，可以讓 HTML img tag 很輕鬆的變化出各種適合網頁的結果。

HTML img tag 圖片標籤使用範例

範例所呈現的結果

範例中，總共準備了四張相同的圖片，透過四個 HTML img tag 插入網頁中，第一張圖片並未使用 img tag 的其它屬性，僅是很單純的使用 img src 屬性，就可以把圖片順利插入網頁中，第二張圖片使用的是 img tag 的 alt 替代文字，在範例所呈現的結果看不到任何效果，那是因為圖片可以正常顯示，所以不需要 alt 的文字內容，假設圖片失效的情況發生，瀏覽器才會顯示 alt 的內容。第三張圖片使用的是 img 的 title 圖片提示文字，所以在範例呈現的效果中，滑鼠移到第三張圖片，就會自動顯示文字內容，最後一張圖片使用的是 HTML img tag 的邊框屬性，預設單位是 px，所以直接寫 border="1" 就等於 border="1px" 的意思。

更多網頁圖片設計