本文屬於腳本之家閃電兒原創,轉載可以去掉這句話,但是不要以任何藉口或方式更改文章的內容,否則後果自負!轉載請註明作者和出處。
很久以前一直到現在,有好多網友問過我類似的問題,尤其是拷貝了本站的一些圖形圖像特效代碼後,總是圖片顯示不出來等問題出現,在這裡專門為這些初學者寫一篇相關的教程,如果您沒有這方面的疑問,請自行走開!
關於網頁中應用圖像的問題,也就是網頁中圖像標記的應用,以下來跟大家總結一下!
1)影像標記概述。
如果網頁只有文字而沒有圖像,像失去了很多活力,圖像在
網頁製作中是非常重要的一個方面,HTML專業提供了
標記來把圖像輸出到網頁上。該標記有SRC、ALT、ALIGN、BORDER、WIDTH和HEIGHT屬性。
2)屬性介紹。
SRC屬性。對於
標記,其SRC屬性是必然屬性,即在
標記中SRC是必須賦值的,是標記不可缺少的一部分。這時,IMG應該寫成如下格式:
其中,參數值為影像的檔案名稱全稱和路徑。
我們知道圖像文件佔用的空間一般遠大於諸如HTML文檔這樣的純文本文件,而網頁設計經常需要加入許多圖像以便增加吸引力,如果這些圖像文件都要加入HTML文檔裡,HTML文檔就會變得很大,在網路上傳輸必然會很慢。
標記不是真正把圖片加入HTML文件中,而是告訴HTML:圖片檔案是哪一個?在哪裡?以便HTML到映像檔的原始位置去呼叫它。 SRC屬性的功能就是回答這兩個問題,所以SRC屬性的參數值一定要有圖像檔案的檔案名稱全稱,即檔案名稱和副檔名,如logo.gif,這就回答了圖像檔案是哪個的問題;其參數值也要有圖片檔案的路徑,以便HTML知道在哪裡去找這個圖片檔。
SRC屬性的參數值中,如何撰寫影像檔案的路徑對於初學者往往是個問題。
影像檔案的路徑可以是相對路徑,也可以是網址。所謂相對路徑是指要連結或嵌入到目前HTML文件的檔案與目前HTML檔案的相對位置所形成的路徑。假如HTML檔案與圖片檔案(假設名字為logo.gif)在同一個目錄下,則可以將程式碼寫成
;如果該映像檔放在目前的HTML檔案所在目錄的子目錄(假設子目錄名為images)下,則程式碼應為
;假如該映像檔放在目前HTML檔案所在目錄的上層目錄(假設上層目錄名為home)下,則相對路徑必須是準網址了,即用「. ./”來表示開發者的網站,然後在後邊緊跟著圖像檔案在開發者網站中的路徑。例如,假設home是這個網站下的一個目錄,則程式碼應該是
,若home是網站下的目錄king下的一個子目錄,則程式碼應該寫為
。
其它屬性。
標記的ALT、ALIGN、BORDER、WIDTH和HEIGHT屬性是可選的。 ALIGN屬性是影像的對齊方式,參數取值為左(left)、中(center)、右(right);BORDER是影像的邊框,其參數取大於或等於0,預設單位為像素;WIDTH和HEIGHT屬性是圖像的寬和高,其參數的預設單位為像素;ALT屬性是當滑鼠移動到圖像上時顯示的文本,在這裡提醒大家製作網頁時一定要使用該屬性,這樣做的目的是什麼呢?是當圖像因某種原因無法顯示時可以顯示提示的文字,這增加了對使用者的友善度。