HTML img 圖片標籤

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

HTML img 圖片標籤語法

基本語法中除了 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> 插入圖片實做範例

範例呈現結果如

範例準備了三個圖片的顯示，第一個例子用最簡單的方式將圖片顯示出來，不限定寬度與高度，第二個例子則對圖片限制顯示的寬度與高度，很明顯的看到圖片變形了，從原本的長方形變成正方形，文字也出現扭曲現象，這是採用強制限定顯示範圍所造成的結果，第三個例子只限定圖片的顯示寬度，並未限制顯示高度，圖片就以等比例縮小的方式呈現。

為圖片加上超連結

以上範例呈現

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

延伸閱讀