HTML 圖片插入或加入連結語法

網頁設計難免會需要插入些圖片來美化你的頁面,或是需要透過圖片來表達你要傳遞的內容,你可以透過 HTMLimg 標籤來為網頁加入圖片以及呈現的風格調整,許多的呈現效果在 CSS 中也是可以達到的。

插入圖片語法

<img src="圖片網址">


圖片加上連結語法

<a href="連結前往的網址"><img src="圖片網址"></a>


圖片加上寬度與高度的限制

<a href="連結前往的網址"><img src="圖片網址" width="200" height="100"></a>


在這個範例中我們加入了寬度 200 與高度 100 的規格設定,在 HTML 中這樣的寫法就可以,但是若使用 CSS 語法則必須加上寬度與高度的單位,才可以順利呈現唷!

圖片加入連結後的邊框處理

<a href="連結前往的網址"><img src="圖片網址" border="0"></a>


因為圖片加入了邊框的緣故,IE 瀏覽器會判斷為連結的效果,所以會出現奇怪的邊框,也許那不是你要的,所以我們在這個範例中,設定了圖片 border="0",意思是邊框為零,這樣就不會顯示邊框。

延伸閱讀
HTML img 圖片標籤
CSS border 屬性介紹與範列
CSS border-width 邊框寬度應用
CSS border-color 屬性與用法範例
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012