img 圖片標籤

四、HTML img 圖片標籤：

(一)HTML img 圖片標籤用來在網頁上插入圖片，增加網頁的豐富程度，標準的 HTML img 圖片標籤不需要像其他標籤，有開始標籤與結尾標籤，而是可以為一個獨立個體，很容易的將圖片插入到要顯示的地方，HTML img 圖片標籤還包含許多不同的參數，用來替圖片做些設計，例如 border 可以替圖片增加邊框、width 可以現置圖片的顯示寬度、height 可以限制圖片的顯示高度 ... 等。

(二)語法：

<img src="要插入的圖片 URL" alt="圖片替代文字" title="要顯示的文字" border="圖片邊框">

基本語法中除了 src 必須之外，其他項目都是選擇項目，其中「要插入的圖片 URL」就是要顯示的圖片網址，若不需要替圖片做任何的設計，也不需要做任何的文字標示，只要寫

『<img src="圖片網址">』

這樣，就可以把一張圖片插入到網頁中，其實寫部落格文章時，插入圖片至文章中，用的也一樣是 img 標籤，以下為常用到的一些 HTML img 參數。

(三)HTML img 圖片參數

參數	用法說明
src	圖片網址，必要項目。
border	圖片邊框，例如 border="0" 代表邊框為 0。
alt	圖片替代文字，當圖片顯示失效，則顯示 alt 文字。
title	圖片文字標示，當滑鼠移經圖片，自動顯示的文字。
width	圖片寬度，例如 width="120px" 代表寬度限制在 120px。
height	圖片高度，例如 height="100px" 代表高度限制在 100px。

(四)HTML <img> 插入圖片實做範例

<img src="圖片001.gif" alt="替代文字一" title="範例圖片一">

<img src="圖片002.gif" alt="替代文字二" title="範例圖片二" width="100px" height="100px">

<img src="upload/20131017185230.gif" alt="替代文字三" title="範例圖片三" width="100px;">

(五)為圖片加上超連結

<a href="http://www.wibibi.com"><img src="範例圖片" border="0" title="Wibibi 網頁設計教學百科"></a>

要替圖片加上超連結，就必須使用到 HTML 超連結語法，一般來說替圖片加上超連結都會同時使用 border="0" 讓邊框隱藏，否則在部分瀏覽器如 IE，可能會出現醜醜的邊框。