首頁 >web前端 >html教學 >關於html中 標籤的使用詳解

關於html中 標籤的使用詳解

黄舟
黄舟原創
2017-06-19 15:26:062925瀏覽

1,area標籤:是在圖像地圖中劃分作用區域的,透過該標籤可以在圖像地圖中設定作用區域(又稱為熱點),這樣當使用者的滑鼠移到指定的作用區域點擊時,會自動連結到預先設定好的頁面,來進行定位。
2,area>標籤:其劃分的作用區域必須在圖像地圖的區域內,所以在用03fc64e1e502d5ba947b3a9af06d2d2a 標記劃分區域前必須用HTML的另一個標記dab9f699790ab0922e596ecb9f6677d5來設定圖像地圖的作用區域,並為指定的影像地圖設定名稱。

其基本語法結構如下:

<area    
class=type    
id=Value     
href=url     
alt=text     
shape=area-shape     
coods=value>

shape和coords:是兩個主要的參數,用來設定熱點的形狀和大小。其基本用法如下:

<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。

03fc64e1e502d5ba947b3a9af06d2d2a標記是在圖像地圖中劃分作用區域的,因此其劃分的作用區域必須在圖像地圖的區域內,所以在用03fc64e1e502d5ba947b3a9af06d2d2a 標記劃分區域前必須用HTML的另一個標記dab9f699790ab0922e596ecb9f6677d5來設定圖像地圖的作用區域,並為指定的圖像地圖設定名稱,該標記的用法很簡單,即10ee5f2c2af5467477ba0b23c03ca295 ...... 205a5be6c2444442266d3019416bb37a。

下面透過一個例子來說明這兩個標記的用法:

這裡是一幅新書架的圖片,要做的效果是:當滑鼠點"網址大全"這本書時,新開一窗口,顯示關於這本書的簡介及訂單的網頁(urlall.htm);當滑鼠點"網站設計攻略"這本書時,新開一窗口,顯示關於這本書的簡介及訂單的網頁(siteall.htm);當滑鼠點"網頁技巧大全"這本書時,新開一窗口,顯示關於這本書的簡介及訂單的網頁(pagejqlall.htm)。製作方法:

插入圖片,並設定好圖片的相關參數,並在a1f02c36ba31691bcfe87b2722de723b標記中設定參數usemap="newbook" ismap,以表示對圖片地圖(newbook)的引用;

以dab9f699790ab0922e596ecb9f6677d5標記設定圖像地圖的作用區域,並取名為:newbook;

分別用03fc64e1e502d5ba947b3a9af06d2d2a標記針對三本書的位置劃分出三個矩形作用區域,並設定其連結參數href。

1    <img src="image/htmlp3.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0">     
2    <map name="newbook">     
3    <area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。">     
4    <area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。">     
5    <area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。">     
6    </map>

在製作本文介紹的效果時應注意的幾點:

在a1f02c36ba31691bcfe87b2722de723b標記不要忘記設定usemap、ismap參數,且usemap的參數值必須與ea729c7cebb230dc35ef49f000625341標記皆要在dab9f699790ab0922e596ecb9f6677d5與205a5be6c2444442266d3019416bb37a之間;

在03fc64e1e502d5ba947b3a9af06d2d2a標記中的cords 參數設定的座標格式要與shape參數設定的作用區域形狀配套,避免出現在shape參數設定的矩形作用區域,而在cords 中設定的卻是多邊形區域頂點座標的現像出現。

以上是關於html中 標籤的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:html 標籤在網頁中的使用詳解下一篇:html 標籤在網頁中的使用詳解