HTML里面怎么插图片? 怎么在html中加图片
html\u91cc\u600e\u4e48\u63d2\u5165\u80cc\u666f\u56fe\u7247\uff1f\uff1f\u60251\u3001\u63d2\u5165\u80cc\u666f\u56fe\u7247\u6709\u4e24\u79cd\u65b9\u6cd5\uff0c\u4e00\u79cd\u662f\u7528html\u7684img\u6807\u7b7e\uff0c\u53e6\u4e00\u79cd\u662f\u5229\u7528css\u7684background\u6807\u7b7e\u63d2\u5165\u3002\u5177\u4f53\u64cd\u4f5c\u662f\u9996\u5148\u65b0\u5efa\u4e00\u4e2ahtml\u6587\u4ef6\uff0c\u5199\u5165\u4e24\u4e2adiv\uff0c\u5206\u522b\u7528\u6765\u6f14\u793a\u4e24\u79cd\u65b9\u6cd5\u63d2\u5165\u6807\u7b7e\uff1a
2\u3001\u9996\u5148\u662f\u7528html\u6807\u7b7e\u63d2\u5165\u56fe\u7247\uff0c\u8fd9\u91cc\u76f4\u63a5\u5728img\u6807\u7b7e\u4e2d\u4f7f\u7528src\u5c5e\u6027\u5c31\u53ef\u4ee5\u63d2\u5165\u56fe\u7247\u8def\u5f84\u5c31\u6210\u529f\u4e86\uff1a
3\u3001\u63a5\u7740\u662f\u7528css\u63d2\u5165\uff0c\u5728div\u4e2d\u8bbe\u7f6eclass\u5c5e\u6027\u4e3aimg2\uff0c\u5728script\u6807\u7b7e\u4e2d\u4f7f\u7528background\u6807\u7b7e\u63d2\u5165\uff0c\u5176\u4e2durl\u662f\u6807\u7b7e\u7684\u8def\u5f84\uff0cno-repeat\u662f\u8bbe\u7f6e\u56fe\u7247\u4e0d\u91cd\u590d\uff0ccenter\u662f\u8bbe\u7f6e\u7167\u7247\u5c45\u4e2d\u663e\u793a\uff1a
4\u3001\u6700\u540e\u7ed9\u8fd9\u4e9b\u6807\u7b7e\u90fd\u8bbe\u7f6e\u4e00\u4e9b\u6837\u5f0f\uff0c\u8ba9\u5b83\u4eec\u663e\u5f97\u7f8e\u89c2\u4e00\u4e9b\u3002\u7136\u540e\u6253\u5f00\u6d4f\u89c8\u5668\u67e5\u770b\u6548\u679c\uff1a
5\u3001\u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u53ef\u4ee5\u770b\u5230\u7167\u7247\u90fd\u663e\u793a\u51fa\u6765\u4e86\u3002\u4ee5\u4e0a\u5c31\u662fhtml\u63d2\u5165\u7167\u7247\u7684\u65b9\u6cd5\u4ecb\u7ecd\uff1a
\u4ee3\u7801\u662f\u201c\u201d\u3002
1\u3001\u65b0\u5efahtml\u6587\u4ef6\uff0c\u5728body\u6807\u7b7e\u4e2d\u6dfb\u52a0img\u6807\u7b7e\uff0cimg\u6807\u7b7e\u5728html\u4e2d\u6ca1\u6709\u7ed3\u675f\u6807\u7b7e\uff0c\u6240\u4ee5\u4e0d\u9700\u8981\u6dfb\u52a0\u201c\u201d\u4ee3\u7801\u3002\u7ed9img\u6807\u7b7e\u6dfb\u52a0\u5c5e\u6027\u201csrc\u201d\uff0c\u5c5e\u6027\u503c\u586b\u81ea\u5df1\u60f3\u8981\u6dfb\u52a0\u56fe\u7247\u7684\u5730\u5740\uff0c\u8fd9\u91cc\u4ee5\u540c\u4e00\u76ee\u5f55\u4e0b\u76841.png\u4e3a\u4f8b\uff0c\u8fd9\u6837\u56fe\u7247\u5c31\u6dfb\u52a0\u597d\u4e86:
2\u3001\u4e3a\u4e86\u9632\u6b62\u7528\u6237\u6d4f\u89c8\u7f51\u9875\u65f6\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u800c\u4e0d\u77e5\u9053\u8fd9\u8fb9\u662f\u4ec0\u4e48\u5185\u5bb9\uff0c\u53ef\u4ee5\u7ed9img\u6807\u7b7e\u6dfb\u52a0\u201calt\u201d\u5c5e\u6027\uff0c\u5c5e\u6027\u503c\u586b\u60f3\u8981\u663e\u793a\u7684\u5185\u5bb9\uff0c\u8fd9\u91cc\u4ee5\u201c\u9e66\u9e49\u201d\u4e3a\u4f8b\uff0c\u6b64\u65f6\uff0c\u5f53\u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u65f6\uff0c\u201c\u9e66\u9e49\u201d\u4e24\u4e2a\u5b57\u5c31\u4f1a\u663e\u793a\u51fa\u6765\uff1a
3\u3001img\u63d2\u5165\u7684\u56fe\u7247\u5927\u5c0f\u9ed8\u8ba4\u662f\u56fe\u7247\u81ea\u8eab\u7684\u5927\u5c0f\uff0c\u6211\u4eec\u53ef\u4ee5\u7528\u201cwidth\u201d\u5c5e\u6027\u548c\u201cheight\u201d\u5c5e\u6027\u63a7\u5236\u56fe\u7247\u5927\u5c0f\uff0c\u8fd9\u91cc\u4ee5\u5bbd\u5ea6200\u548c\u9ad8\u5ea6200\u4e3a\u4f8b\uff0c\u6b64\u65f6\u4ee3\u7801\u5c31\u662f\u201cwidth='200' height='200'\u201d\uff0c\u8fd9\u6837\u56fe\u7247\u5927\u5c0f\u5c31\u4f1a\u53d8\u6210200*200\uff1a
代码是“<img scr = '图片地址'>”。
1、新建html文件，在body标签中添加img标签，img标签在html中没有结束标签，所以不需要添加“</img>”代码。给img标签添加属性“src”，属性值填自己想要添加图片的地址，这里以同一目录下的1.png为例，这样图片就添加好了:
2、为了防止用户浏览网页时图片加载失败而不知道这边是什么内容，可以给img标签添加“alt”属性，属性值填想要显示的内容，这里以“鹦鹉”为例，此时，当图片加载失败时，“鹦鹉”两个字就会显示出来：
3、img插入的图片大小默认是图片自身的大小，我们可以用“width”属性和“height”属性控制图片大小，这里以宽度200和高度200为例，此时代码就是“width='200' height='200'”，这样图片大小就会变成200*200：
可以用<img src="图片地址">
也可以在css中设置background:url(地址)
还可以用JS实现插入
具体相对路径还是绝对路径就要看你的需求了
<img src="图片地址">
可以使用img src
绛旓細html娣诲姞鍥剧墖鐨勬柟娉曪細棣栧厛鎵撳紑缂栬緫鍣紝鏂板缓img鏍囩锛涚劧鍚庣粰img鏍囩鐨勫睘鎬с恠rc娣诲姞涓寮犲浘鐗囩殑鍦板潃銆戯紱鏈鍚庢妸html鏂囦欢鎷栧埌娴忚鍣ㄤ腑鍗冲彲銆傚叿浣撳涓嬶細鐐瑰嚮鎵撳紑html缂栬緫鍣╯ublime_text.鎴戜滑鍒涘缓涓涓猦tml鏂囦欢锛岀劧鍚庛愬垱寤轰竴涓猧mg鏍囩銆戙傚垱寤篿mg鏍囩浠ュ悗锛屾垜浠粰img鏍囩鐨勫睘鎬с恠rc娣诲姞涓寮犲浘鐗囩殑鍦板潃銆戙傛垜浠妸ht...
绛旓細HTML鍥剧墖鐨勫悇绉嶈矾寰勪唬鐮 鐗╃悊璺緞锛氬亣濡備綘鐨勫浘鐗囧湪D鐩樼殑images鏂囦欢涓嬶紝鏂囦欢鍚嶇О涓簍upian.jpeg鐨勮瘽鐢ㄤ笅闈㈢殑鏍煎紡銆俰mg src=file:///D/images/tupian.jpeg/>鐗╃悊璺緞:濡傛灉浣犵殑鍥剧墖鍦―鐩樼殑鍥剧墖鏂囦欢涓锛屾枃浠跺悕鏄痶upian.jpeg锛屼娇鐢ㄤ笅闈㈢殑鏍煎紡銆/ 鐩稿璺緞锛氬鏋滄槸缃戠珯鐨勮瘽锛屽垯涓轰笅闈㈢殑锛歩mg src=images/tu...
绛旓細绗竴绉嶆柟娉曪細鐢╠reamweaver杞欢鎻掑叆鍥剧墖鎵撳紑dreamweaver杞欢锛岀偣鍑绘彃鍏ワ紝閫夋嫨鍥惧儚锛屽鍥 1銆佸湪绔欑偣鏂囦欢澶逛笅闈㈤夋嫨瑕佹彃鍏ョ殑鍥惧儚锛屾绔欑偣鐩綍鏄闈傚鍥 2銆侀夋嫨纭畾鍚庝細璺冲嚭浠ヤ笅鐨勭晫闈紝缁х画閫夋嫨纭畾锛屽鍥 3銆佽繖鏃跺氨灏嗗浘鍍忔彃鍏ュ埌浜唄tml鏂囦欢涓簡锛屾晥鏋滃涓嬪浘 绗簩绉嶆柟娉曪細鐢ㄤ唬鐮佺紪鍐欏<imgsrc=\"1.PNG\"...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html锛岀紪鍐欓棶棰樺熀纭浠ｇ爜銆2銆佸湪index.html涓鐨<script>鏍囩锛岃緭鍏s浠ｇ爜锛歠unction fun() { var a = Math.random() * 5;('img').attr('src', 'image' + a + '.jpg');} 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃剁偣鍑鍥剧墖浼氭崲涓寮犲浘鐗囥
绛旓細1銆侀鍏堟墦寮Atom缂栬緫鍣ㄥ鍏ラ」鐩枃浠跺す锛屽厛鍒涘缓涓涓猧ndex.html 鐨鏂囦欢銆傚畾涔変竴涓媓tml鏂囦欢鐨勪富淇℃伅锛2銆佺劧鍚庡～鍐欒嚜宸辩殑缃戦〉鍐呭锛岃缃竴涓嬫牱寮忥紝鐩存帴鍦╞ody鍚庨潰鍔犱笂background="鍥剧墖鍚嶅瓧"鍗冲彲鎻掑叆鍥剧墖锛3銆佹渶鍚庢潵鍒版祻瑙堝櫒锛屽埛鏂颁竴涓嬬綉椤碉紝杩欐牱灏变細鏄剧ず鑳屾櫙浜嗭細缃戦〉鎴栫數鑴戦噷鐨鍥剧墖濡備綍璁句负妗岄潰鑳屾櫙鍥撅紵鎭㈠鍘熸潵...
绛旓細html鎻掑叆鍥剧墖鏈変袱绉嶆柟寮忥細涓绉嶆槸閫氳繃<img>鏍囩鎻掑叆鐨勬甯哥殑鍥剧墖锛屽彟涓绉嶆槸閫氳繃css鏍峰紡鎻掑叆鐨勮儗鏅浘鐗囥傞棶棰樺垎鏋愶細1銆侀鍏堜綘鏄氳繃绗簩绉嶆柟寮忔彃鍏ョ殑鏄儗鏅浘鐗囷紝鐩存帴鐢╳idth鍜宧eight鍙兘鎺у埗div鐨勫搴﹀拰楂樺害銆2銆佸鏋滀綘鎻掑叆鐨勫浘鐗囨槸閫氳繃<img>鏍囩鐨勬柟寮忔潵鎻掑叆鐨勮瘽锛屽彲浠ラ氳繃<img>鑷韩鐨勫睘鎬ф帶鍒跺浘鐗囧ぇ灏忥紝...
绛旓細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...
绛旓細1銆佹坊鍔<img> 鏍囩锛岃祫婧愨渟rc鈥閲岄潰濉啓鏈湴鍥剧墖鐨勮矾寰勫悕锛2銆佺敤娴忚鍣ㄦ墦寮鏂囦欢锛屽嵆鍙湅鍒板浘鐗囧凡娣诲姞鎴愬姛锛屽涓嬪浘鎵绀 img鏍囩瀹氫箟鍙婁娇鐢ㄨ鏄:<img> 鏍囩瀹氫箟 HTML 椤甸潰涓殑鍥惧儚銆<img> 鏍囩鏈変袱涓繀闇鐨勫睘鎬э細src 鍜 alt銆傛敞閲婏細浠庢妧鏈笂璁诧紝鍥惧儚骞朵笉浼鎻掑叆 HTML 椤甸潰涓紝鑰屾槸閾炬帴鍒 HTML 椤甸潰...
绛旓細1銆html涓鍙互鐢╥mg鏍囩鎻掑叆鍥剧墖涔熷彲浠ョ敤css鐨刡ackground鎻掑叆銆傚叿浣撴柟娉曟槸棣栧厛鏂板缓涓涓猦tml鏂囦欢锛閲岄潰鏂板缓涓や釜div鏍囩锛岀浜屼釜鏍囩涓彃鍏mg鏍囩骞舵彃鍏ュ浘鐗囷細2銆佺劧鍚庡湪涓婃柟鐨剆tyle鏍囩涓缃涓涓猟iv鐨勬牱寮忥紝鍏堢粰div闀垮害鍜岄珮搴︼紝鎺ョ潃鏄敤background灞炴у紩鍏ュ浘鐗囷紝璁剧疆鍥剧墖涓嶉噸澶嶄互鍙婂浘鐗囩殑鏄剧ず浣嶇疆j鍗冲彲锛3...
绛旓細浠ｇ爜鏄<img scr = '鍥剧墖鍦板潃'>鈥濄1銆佹柊寤篽tml鏂囦欢锛屽湪body鏍囩涓坊鍔爄mg鏍囩锛宨mg鏍囩鍦html涓娌℃湁缁撴潫鏍囩锛屾墍浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎～鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
