HTML img 圖片標籤

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

HTML img 圖片標籤語法
<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="upload/20131017185230.gif" alt="替代文字一" title="範例圖片一">
<img src="upload/20131017185230.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,可能會出現醜醜的邊框,若要美化圖片邊框,請參閱:CSS borderimg border 圖片邊框

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C