怎样在html中插入jpg图片？
HTML中插入gif格式的图片有几种简单的方法可以实现：
1、直接插入：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML中插入gif格式的图片</title>
</head>
<body>
<div><img src="name.gif" alt="" /></div>
</body>
</html>
2、采用css中background-image的属性实现此效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML中插入gif格式的图片</title>
</head>
<body>
<div style="background-image:url(name.gif); width:500px; height:375px; margin:0 auto;"></div>
</body>
</html>
3、采用css中background的属性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML中插入gif格式的图片</title>
</head>
<body>
<div style="background:url(name.gif) center no-repeat; width:100%; height:375px; margin:0 auto;"></div>
</body>
</html>
小提示
确保图片的URL地址中包含图片文件的格式（如.jpg、.gif等等）。
在电脑上保留图片的备份文件，以防万一。
GIF图片很适合作为商标或动画出现，而JPEG图片适合作为复杂图像的格式，如产品摄影 等。
在大多数情况下，最好一直使用.gif、.jpeg、.jpg或.png等文件格式。其它格式可能无法在所有浏览器中都正确显示出来。
警告
不要将超链接引向他人的网站。这样做会占用他人网站的带宽，而且也无法为其带来访客。除此以外，带有超链接的图片会因链接网址的失效而消失。如果网站主机看到了你的超链接，他甚至可以更改你网站上显示的图片。
绛旓細鐩稿璺緞锛氬鏋滄槸缃戠珯鐨勮瘽锛屽垯涓轰笅闈㈢殑锛歩mg src=images/tupian.jpeg/>鐩稿璺緞:濡傛灉鏄綉绔欙紝鍒欏涓:灏嗚繖涓html鏂囦欢涓巌mages鏀惧湪鍚屼竴涓洰褰曚腑:灏嗘鍥剧墖涓巋tml鏂囦欢鏀惧湪鍚屼竴涓洰褰曚腑:鏍囩涓紝杈撳叆html浠ｇ爜锛歩mg src="small3.png"/>銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃娣诲姞鐨鏈湴鍥剧墖鐨璺緞鏄浉瀵硅矾寰勩
绛旓細1銆佺洿鎺鎻掑叆锛<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <titl...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<body>鏍囩涓紝杈撳叆html浠ｇ爜锛<form style="background-image: url(small3.png)"><input type="text"></form> 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔鍦╤tml鐨琛ㄥ崟涓坊鍔浜嗚儗鏅鍥剧墖銆
绛旓細绗竴绉嶆柟娉曪細鐢╠reamweaver杞欢鎻掑叆鍥剧墖鎵撳紑dreamweaver杞欢锛岀偣鍑绘彃鍏ワ紝閫夋嫨鍥惧儚锛屽鍥 1銆佸湪绔欑偣鏂囦欢澶逛笅闈㈤夋嫨瑕佹彃鍏ョ殑鍥惧儚锛屾绔欑偣鐩綍鏄闈傚鍥 2銆侀夋嫨纭畾鍚庝細璺冲嚭浠ヤ笅鐨勭晫闈紝缁х画閫夋嫨纭畾锛屽鍥 3銆佽繖鏃跺氨灏嗗浘鍍忔彃鍏ュ埌浜唄tml鏂囦欢涓簡锛屾晥鏋滃涓嬪浘 绗簩绉嶆柟娉曪細鐢ㄤ唬鐮佺紪鍐欏<imgsrc=\"1.PNG\"...
绛旓細2鍦ㄩ〉闈笂鏄剧ず涓涓粦鑹茶竟妗嗙殑蹇冨舰锛3鍦ㄥ舰鐘舵牱寮忛噷鐐圭浜岀锛岀粰瀹冨姞涓婂僵鑹插～鍏咃紝鐧借壊杞粨锛4鐐瑰～鍏呴鑹叉寜閽紝鐐光滃浘鐗団濊繘琛屽浘鐗囧～鍏锛5鎵惧埌瑕佸～鍏呭浘鐗囩殑璺緞锛岄夋嫨瑕佸～鍏呯殑鍥剧墖锛6鎸夋墦寮鍚庯紝閫変腑鐨勫浘鐗囧氨濉厖杩涙潵浜嗭紱7鍥剧墖娣诲姞杩涙潵鍚庯紝鍙互鏍规嵁闇瑕佸啀鏉ヨ缃叾瀹冩晥鏋滐紝濡備笁缁存晥鏋滃拰鍏跺畠鏁堟灉銆倃ord鎬庝箞鍦...
绛旓細鍦╤tml涓缁檇iv娣诲姞鑳屾櫙鍥剧墖涓昏鏈変互涓嬪嚑绉嶆柟娉:绗竴涓:缁檆ss鏂囦欢娣诲姞鑳屾櫙鍥剧墖:浣跨敤url(../images/鑳屾櫙鍥剧墖2.jpg)鍦╟ss涓紝鐢变簬html鏂囦欢鍜宑ss鏂囦欢鐨勭浉瀵逛綅缃笉鍚岋紝鍐呰仈css鍜屽鍏ss涓紩鍏ュ浘鐗囩殑璺緞浼氭湁鎵涓嶅悓銆傚鍥炬墍绀:绗簩:浠嬬粛:濡傚浘鎵绀:绗笁绉:鍦╠iv涓坊鍔犲浘鐗銆俰mg src=../images/鑳屾櫙鍥1....
绛旓細1銆佸湪浠ｇ爜涓粡甯哥敤鍒鐨勬彃鍏ュ浘鐗浠ｇ爜鏄痠mg灞炴э紝鏍煎紡灏辨槸src鍚庨潰鏄娣诲姞鍥剧墖鐨勫湴鍧锛屽悗闈㈢殑alt鏄鍥剧墖鐨勬弿杩般2銆鍦ㄦ彃鍏ュ浘鐗鍓嶏紝瑕佸皢html鏂囦欢鍜屽浘鐗囨枃浠舵斁鍦ㄤ竴涓枃浠跺す鍐咃紝杩欓噷鐨刬mg鏂囦欢澶瑰氨鏄笓闂ㄥ瓨鏀惧浘鐗囩殑鍦版柟銆3銆佺劧鍚庡洖鍒颁唬鐮佹爮锛屽湪src涓緭鍏ラ摼鎺ュ湴鍧img/pic_01.jpg锛岃灏嗗浘鐗囩殑鍏蜂綋鍦板潃鍜屽悕绉板叏閮...
绛旓細.JPEG锛欽PEG鏍煎紡鏄洰鍓嶇綉缁滀笂鏈娴佽鐨鍥惧儚鏍煎紡锛屾槸鍙互鎶婃枃浠跺帇缂╁埌鏈灏忕殑鏍煎紡HTML鎻掑叆鍥剧墖鏂规硶鐩存帴鍦╤tml浠ｇ爜鍐呮彃鍏ュ浘鐗<img src="images/1.jpg">鏁堟灉鍥撅細鍦–SS鏍峰紡涓彃鍏ュ浘鐗<style>div{width:450px;height: 300px;background-image: url("images/2.jpg")}</style></head><body><div></div>...
绛旓細绗竴绉嶆柟娉曪細鐢 dreamweaver杞欢鎻掑叆鍥剧墖 鎵撳紑dreamweaver杞欢锛岀偣鍑绘彃鍏ワ紝閫夋嫨鍥惧儚锛屽鍥 鍦ㄧ珯鐐规枃浠跺す涓嬮潰閫夋嫨瑕鎻掑叆鐨勫浘鍍锛屾绔欑偣鐩綍鏄闈傚鍥 閫夋嫨纭畾鍚庝細璺冲嚭浠ヤ笅鐨勭晫闈紝缁х画閫夋嫨纭畾锛屽鍥 杩欐椂灏卞皢鍥惧儚鎻掑叆鍒颁簡html鏂囦欢涓簡锛屾晥鏋滃涓嬪浘 绗簩绉嶆柟娉曪細鐢ㄤ唬鐮佺紪鍐 濡 img src="1.PNG&#...
绛旓細1銆佹柊寤篽tml鏂囦欢锛屽鍥炬墍绀猴紝鍦╞ody鏍囩涓彃鍏img鏍囩锛岄渶瑕佹敞鎰忕殑鏄紝img鍦╤tml涓娌℃湁缁撴潫鏍囩锛屾墍浠ヤ笉闇瑕佹坊鍔犫</img>鈥濄傜粰鏍囩娣诲姞鈥渟rc鈥濆睘鎬э紝灞炴у煎～鍐欐兂瑕娣诲姞鍥剧墖鐨勮矾寰勶紝杩欓噷浠ュ拰html鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨鎻掑叆瀹屾垚浜嗭細2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鏃犳硶鍔犺浇鍥剧墖锛屽彲浠ョ粰img鏍囩娣诲姞...
