怎样用HTML代码在图片插入超链接
1、图像链接
图片超链接和文字超链接是一样的，在图像上插入链接：点击图片，跳转页面：<a></a>之间插入<img/>元素。如：<a href="超链接地址"><img src="路径" alt="替代文本"></a>。（如图）
2、局部链接
在某种情况下，我们不希望整张图片加链接。希望的效果是：点击图片某个区域，链接到某地址。是通过map标签和<area>标签结合使用的。如：
(1)、<img src="超链接地址" alt="替换文本" usemap="#map名称" width="链接区域宽度" height="链接区域高度"/>
(2)、<map name="map名称" id="id名称"><area shape="描述区域的形状" coords="坐标" href="链接地址" target="打开方式" alt="替换文本" /></map>
扩展资料：
<img>元素向网页中嵌入一幅图像。
img元素的属性：
(1)、src：图片来源URL。
(2)、alt:规定图像的替代文本。
(3)、height和width:单位为像素，如果不指定，则为默认；如果只指定height或width，则自动调整大小。
(4)、ismap ：将图像定义为服务器端图像映射。
(5)、usemap：将图像定义为客户器端图像映射。
(6)、longdesc： 指向包含长的图像描述文档的 URL。
<map>元素定义一个客户端图像映射。
map元素的属性：
(1)、id:为 map 标签定义唯一的名称。
(2)、name:为 image-map 规定的名称。
注意：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以应同时向 <map> 添加 id 和 name 属性。
<area> 元素定义图像映射中的区域。
area元素的属性：
(1)、alt:规定图像的替代文本。
(2)、shape：用于描述区域的形状，rect\poly\circle\default可选,default指的是还没有被定义的区域。
(3)、coords：指定区域的坐标。比如矩形有4个坐标，前两个是左上角的x,y坐标，后两个是右下角的x,y坐标。
(4)、href和nohref：href指定目的的链接，如果不指定href属性，则需要指定nohref，nohref="nohref"
(5)、target：和<a>标签的作用一样。
注意：area 元素永远嵌套在 map 元素内部。
参考资料：
百度百科-链接图像
绛旓細target=_blank><IMG src="鍥剧墖鏈韩鐨勫湴鍧 锛堝氨鏄寚浣犵殑鍥剧墖鑷繁浠庡摢閲屾潵鐨勶級" border=0></A> 姝ラ锛1銆侀鍏堟壘鍒板浘鐗囨湰韬殑鍦板潃锛堝氨鏄寚浣犵殑鍥剧墖鑷繁浠庡摢閲屾潵鐨 2銆佸叾娆＄‘瀹鍥剧墖瓒閾炬帴鐨勫湴鍧锛堝嵆鐐瑰嚮鍥剧墖鍚庯紝鎮ㄦ兂鍑虹幇鐨勭綉椤碉級3銆佸皢鍘熷浠ｇ爜鏇挎崲 4銆佺偣鍑绘墦寮浠ヤ笅缃戦〉鈫掆滃湪绾HTML缂栬緫鍣ㄢ濓紝鎵撳紑...
绛旓細鍦ㄥ浘鐗涓婁綘瑕佸姞閾炬帴鐨勫湴鏂瑰姞鐑偣閾炬帴锛屽府浣犵殑浠ｇ爜鏀硅繃浜嗭紝浣犺窡浣犵殑瀵规瘮涓涓嬶細<head> <style> { margin:0px;padding:0px;} body{ background:#fff;text-align:center;overflow:hidden;} </style> </head> <body> <img src="lamour90.jpg" width="100%" height="100%" border="0" use...
绛旓細1銆佸湪浠ｇ爜涓粡甯哥敤鍒扮殑鎻掑叆鍥剧墖浠ｇ爜鏄痠mg灞炴э紝鏍煎紡灏辨槸src鍚庨潰鏄娣诲姞鍥剧墖鐨勫湴鍧锛屽悗闈㈢殑alt鏄鍥剧墖鐨勬弿杩般2銆鍦ㄦ彃鍏ュ浘鐗鍓嶏紝瑕佸皢html鏂囦欢鍜屽浘鐗囨枃浠舵斁鍦ㄤ竴涓枃浠跺す鍐咃紝杩欓噷鐨刬mg鏂囦欢澶瑰氨鏄笓闂ㄥ瓨鏀惧浘鐗囩殑鍦版柟銆3銆佺劧鍚庡洖鍒颁唬鐮佹爮锛屽湪src涓緭鍏ラ摼鎺ュ湴鍧img/pic_01.jpg锛岃灏嗗浘鐗囩殑鍏蜂綋鍦板潃鍜屽悕绉板叏閮...
绛旓細浠ｇ爜鏄<img scr = '鍥剧墖鍦板潃'>鈥濄1銆佹柊寤html鏂囦欢锛屽湪body鏍囩涓坊鍔爄mg鏍囩锛宨mg鏍囩鍦╤tml涓病鏈夌粨鏉熸爣绛撅紝鎵浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎～鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
绛旓細2涓柟娉曪紒1.鍦ㄥ浘鐗涓 娣诲姞涓涓眰 鍦ㄥ眰閲岀紪杈戞枃瀛2.灏辨槸 鎶婁綘瑕佺敤鐨勯偅涓浘鐗囧厛PS涓涓嬶紝鍐嶇敤
绛旓細闂浜旓細html浠ｇ爜鏄粈涔堟庝箞鎶婁竴涓浘鐗囧姞涓婇摼鎺ワ紵姹傝缁 HTML灏辨槸鐢熸垚瀹㈡埛绔紙缃戦〉锛夌殑涓绉嶈绠楁満璇█锛岀敤杩欑璇█娴风殑灏辨槸html浠ｇ爜銆傛妸涓涓浘鐗囧姞涓婇摼鎺ワ紝鍦ㄤ綘瑕鍔犲叆鐨勫浘鐗囩殑浣嶇疆鍐欏叆涓涓摼鎺ワ紱鐢―reamweaver鐐瑰嚮灞炴т篃鍙互璁剧疆鐨勶紝姣斿啓浠ｇ爜绠鍗曘傞棶棰樺叚锛歝ss鏍峰紡閲岀殑鍥剧墖鎬庝箞鍔犻摼鎺ワ紵 濡傛灉鏄湪缃戦〉涓...
绛旓細缃戦〉鍥剧墖鐨勫熀鏈牸寮忥細HTML鐨鐩稿叧鏍囧噯涓苟娌℃湁瑙勫畾鍥剧墖鐨勬牸寮忥紝鍘熷垯涓婃潵璇存槸浠绘剰鐨勩備絾鏄洰鍓嶅競鍦轰笂鐨勪富娴佹祻瑙堝櫒瀵圭綉椤靛浘鐗囩殑鏍煎紡鏈夋墍瑕佹眰锛岄氬父鎯呭喌涓嬫槸锛欽PEG(鑱斿悎鍥惧儚涓撳缁)鍜孏IF(鍥惧儚浜ゆ崲鏍煎紡)涓ょ鏍煎紡鐨勫浘鐗囷紱鑷充簬涓ょ鍥剧墖鐨勪竴浜涚壒鐐瑰拰鍚勮嚜鐨勪紭缂虹偣銆鎻掑叆鍥剧墖锛氭彃鍏ュ浘鐗囧彲浠ヨ捣鍒伴傚綋鐨勭編鍖栦綔鐢ㄣ傝屾彃鍏...
绛旓細鎶鍥剧墖褰撲綔鑳屾櫙銆傜劧鍚鎻掑叆鏂囧瓧灏辫浜嗐傚涓嬶細<div style="background:url(pic001.jpg) no-repeat"><p>浣犳兂鐪嬭鐨勬枃瀛</p></div>
绛旓細<a href=""><img src="images/logo.gif" width="100" height="200" broder=0></a> width="100" 鍥剧墖鐨勫 height="200" 鍥剧墖鐨勯珮
绛旓細浣跨敤浠ｇ爜鐨勬柟娉曪紝鍦ㄥ浘鐗涓婂姞瀛鎬庝箞鍋氬埌鍛 鍦html鏂囦欢涓紝鍏堝缓绔嬩竴涓猟iv锛岀劧鍚庡湪閲岄潰璁剧疆涓涓浘鐗囧拰鏂囧瓧h1锛屽鍥炬墍绀 鐜板湪鎵撳紑鍚庣殑鏍峰紡鏄繖鏍风殑锛屽鍥撅紝鍥剧墖鍦ㄤ笂锛屾枃瀛楀湪涓 鐒跺悗瀵筯1杩涜绠鍗曚慨楗帮紝瀵规枃瀛楀ぇ灏廸ont-size鍜屾枃瀛楅鑹瞔olor鍔犱互淇グ 濡傚浘鎵浠ユ晥鏋滐紝鐜板湪鏄繖鏍风殑锛岃繖鏍峰緟浼氬皢瀛楃Щ鍔ㄥ埌鍥句笂闈㈡椂锛屽瓧...
