img影像標籤的基本用法詳解

這篇文章主要介紹了HTML/XHTML中img圖像標籤的基本用法,文中列出了img標籤的一些常用屬性,需要的朋友可以參考下

 圖像標籤用於在網頁中顯示一副圖像。
HTML/XHTML 圖片 標籤
#在 XHTML 中，透過 標籤來定義顯示一副圖片。 是一個非成對標籤。

基本語法：

XML/HTML Code複製內容到剪貼簿

1. <img src="url" />

標籤透過src 屬性來決定圖片來源，url 是相對或絕對的圖片位址。

圖片標籤屬性：
src：圖片來源，必要。指定顯示的圖像來源位址，可以是相對位址或絕對位址。
alt：可替換文本，可省略。用於圖像無法顯示或瀏覽器封鎖了圖片時，顯示出來的替換文字。
title：圖像提示文字，可省略。當滑鼠停留到圖片上時，會提示相關文字。
width：圖片顯示的寬度，可省略。單位為像素。
height：圖片顯示的高度，可省略。單位為像素。

文字替換屬性（alt）
圖像標籤的文字替換屬性 alt 雖然不是必要的屬性，但卻是一個很重要的屬性。當因為某些原因，瀏覽器讀取圖像失敗的時候，將顯示該替代文字以取代原始圖像以提供丟失的相關圖像資訊。此屬性也有助於那些使用純文字瀏覽器的使用者理解網頁內容。
因此，為每個圖像添加一個有意義的 alt 文字替換屬性是個很好的習慣。

標籤使用練習
在 e:html 資料夾下的建立 images 資料夾用於存放映像檔。將下面這張圖片，滑鼠右鍵選擇 “圖片另存為”，將圖片儲存到 images 資料夾下備用。

編輯我們的XHTML 小範例1.html ，在id="main-content" 的p 標籤內做以下更改：

XML/HTML Code複製內容到剪貼簿

1. < h3>文章題目h3>

2. <p>文章具體內容p>

3. <p#>#<#img

'

src###=###"images/flower_1.jpg"### ###alt###=###"花朵"### ###/>###### ################這樣我們就在網頁中顯示了一個圖片。 #########指定圖片顯示尺寸######可以給 標籤增加width 或height 屬性以手動指定圖片顯示的尺寸：########## ############XML/HTML Code######複製內容到剪貼簿######

1. <img src="images/flower_1.jpg" alt="花" width="350" height="270" / >

提示
一般情況下都會忽略圖片尺寸屬性而預設顯示原始圖片大小或瀏覽器自適應大小顯示。指定不恰當的影像顯示尺寸，可能會讓影像顯示變形。
由於載入影像需要一定的時間，應該盡量在保證圖片品質的前提下，減少圖片的體積以盡量達到良好的使用者存取體驗。

延伸閱讀
像素（Pixel）：我們可以形象的認為像素就是一個一個電腦可以顯示的最小的點，例如我們常說的的螢幕解析度是1024 *768 ，意思是螢幕橫著有1024 個（像素）點，豎起有768 個（像素）點。用作單位時一般預設寫作 pix。

以上是img影像標籤的基本用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！