htm圖像標記的使用方法

網頁中最引人入勝的莫過於那豐富多彩的圖像了成功的站點中不能沒有絢麗的圖像否則便使測覽者覺得索然無味，下面介紹html圖像標記其基本語法結構如下

 

align=top|middle|center|bottom|left|right

class=type

id=Value

name=value

src=url

title=text

alt=value

border=n

height=n

width=n

hspace=n

vspace=n

ismap=image

usemap=url

onload=function

onabort=function

onerror=function

dynsrc=url

controls=controls

loop=n

start=type>

可以看出關於基本圖像標記的應用參數多達項當然我們實際應用的只是其中幾項只有在需要實現特殊效果的情況下才需要使用較多的參數下面先介紹一下各參數的具體含義

align是指定圖像的位置是靠左靠右居中靠上或者是靠底默認情況下是靠上即align=top在圖文混排時這個參數很有用

class和id分別指定圖像所屬的類型和圖像的id號

name用於設定圖像的名稱

src規定插入的圖像的url地址也就是含路徑的圖像文件名

title設定圖像的標題

alt表示圖像的替代字主要用於在浏覽器還沒有裝入圖像(或關閉圖像顯示)的時候先顯示有關此圖像的信息這是初學者最易忽略的參數因不設定它在正常顯示時沒問題

border設定圖片的邊框

height和width分別用於指定圖像的高度和寬度可以與圖片原來的寬度和高度不同

hspace和vspace分別用於設定圖像的左右邊框大小和上下邊框大小在圖文混排時會用到

ismp和usemap在應用圖像地圖時使用ismap表示圖像地圖的數據存放在服務器中當鼠標在圖像上的某個區域上時可以將此區域的坐標傳送給服務器處理usemap則用於設定圖像地圖的名稱

onloadonabortonerror對應於設定的子程序分別在圖像被載入取消載入載入出錯的情況下各自對應的子程序不常用

dynsrc指定要下載的影像片斷的url地址

controls設定影像播放的控制接鈕

loop指定影像片斷的播放次數當loop=時影像片斷將循環播放直至頁面更新

start設定何時開始播放影像片斷有三種選擇start=fileopen表示頁面載入後即開始播放默認的就是這種狀態start=mouseover表示當鼠標移到影像上即開始播放start=fileopenmouseover表示當有上面兩種情況之一發生時就開始播放

上邊這張圖片的邊框是border=所產生的效果注意邊框的顏色默認的是黑色不美觀而標記也沒有設置邊框顏色的參數我們可以通過設置Class參數調用CSS達到改變邊框顏色的目的如本例的完整代碼是

這裡的CSS的style放在網頁源代碼的與之間其代碼為

給圖片加動態說明和替代文字

若想制作當鼠標移到圖片上出現一行簡短說明文字的效果不必去使用圖層技術(特殊效果的說明除外)設定title參數就行了例在上例的圖片的代碼改成這樣這樣當鼠標移到圖片上就會

給圖片加上替代文字是一種好習慣象上例那樣設置alt參數當用戶關閉圖像顯示或頁面剛剛下載時圖片還沒來不得及顯示時圖像的替代文字就會顯示出來這樣用戶就能知道對應的圖像內容

圖像與文字混排

圖文混排主要是設置align參數在這裡要注意

) topmiddlecenterbottom所產生的效果只是一行文字在多行文本與圖象對齊時要用left和right參數值

)中的對齊參數align所產生的效果是指圖片與周圍文字的位置關系而圖片在頁面中的位置對齊是在圖片所在的頁面元素中設置的如下面這段代碼

 

 

在上面這段代碼中標記

中的align=left表示圖片的位置在窗口的左端而中的align=top則表示圖片旁邊的文字與圖片的頂端對齊

)為了避免圖片與旁邊文字挨得太近不便閱讀可以通過設置hspace參數來控制圖片與文字間的距離一般設置hspace=(表示圖片的左右有個像素的空白)就能達到較好的效果

 

當用戶的鼠標放在圖片上時圖片會自動更換鼠標離開之後圖片又會恢復原來的樣了象上邊所示的這種效果當把鼠標移到上面時看到的效果似乎是那個白色窗口向上下展開了實際上是換了一張圖片鼠標移開又恢復了原樣制作這樣的效果先要給欲替換的圖片設定名字本例中是name=webjx然後設定onmuseover和onmouseout 參數本例標記的完整代碼如下

 

采用本例來制作動態按鈕將會達到很吸引人的效果

在網頁加入影像片斷

例在video目錄下有一介紹網頁制作的影像片斷文件webavi現要在網頁中播放那麼源代碼是這樣的

上面這段代碼的效果是當鼠標移開影像片斷上時即開始訓動媒體播放器播放影像一次並且還設定了顯示播放器控制面板以便對播放過程進行控制

從上面的代碼可以看出在網頁中加入影像片斷與加普通圖像基本相同如它們都要指定來源設定大小和替代文字等但在這裡請注意加入影像片斷時要使用dynsrc參數且不能再在同個標記中使用src參數否則將不能播放影像片斷只能顯示替代文字了

以上就是我們給大家介紹的html圖像標記了。希望大家繼續關注我們的網站！