在html代码中如何插入本地图片呢？
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<img src="small3.png" />。
3、浏览器运行index.html页面，此时添加的本地图片的路径是相对路径。
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<body>鏍囩涓紝杈撳叆html浠ｇ爜锛<img src="small3.png" />銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵坊鍔犵殑鏈湴鍥剧墖鐨勮矾寰勬槸鐩稿璺緞銆
绛旓細绗竴绉嶆柟娉曪細鐢╠reamweaver杞欢鎻掑叆鍥剧墖鎵撳紑dreamweaver杞欢锛岀偣鍑绘彃鍏ワ紝閫夋嫨鍥惧儚锛屽鍥 1銆佸湪绔欑偣鏂囦欢澶逛笅闈㈤夋嫨瑕佹彃鍏ョ殑鍥惧儚锛屾绔欑偣鐩綍鏄闈傚鍥 2銆侀夋嫨纭畾鍚庝細璺冲嚭浠ヤ笅鐨勭晫闈紝缁х画閫夋嫨纭畾锛屽鍥 3銆佽繖鏃跺氨灏嗗浘鍍忔彃鍏ュ埌浜唄tml鏂囦欢涓簡锛屾晥鏋滃涓嬪浘 绗簩绉嶆柟娉曪細鐢ㄤ唬鐮佺紪鍐欏<imgsrc=\"1.PNG\"...
绛旓細鍦℉TML涓彃鍏ュ浘鐗鍏跺疄鐩稿綋鐩存帴锛屼互涓嬫槸璇︾粏鐨勬楠わ細棣栧厛锛屼綘闇瑕佸噯澶囦竴浜涘熀鏈伐鍏凤細涓鍙扮數鑴戙佷竴娆剧綉椤垫祻瑙堝櫒鍜屼竴涓狧TML缂栬緫鍣ㄣ傝繖浜涙槸鏋勫缓鍜屽睍绀哄浘鐗囩殑鍩虹銆傚紑濮嬫搷浣滄椂锛屾墦寮浣犵殑HTML缂栬緫鍣紝鏂板缓涓涓枃浠讹紝姣斿鍛藉悕涓"index.html"锛岀劧鍚庡湪姝ゆ枃浠朵腑寮濮嬬紪鍐欏熀纭鐨HTML浠ｇ爜缁撴瀯銆傚湪鏋勫缓琛ㄦ牸閮ㄥ垎锛屾壘鍒版爣绛撅紝...
绛旓細1銆佸湪浠ｇ爜涓缁忓父鐢ㄥ埌鐨鎻掑叆鍥剧墖浠ｇ爜鏄痠mg灞炴э紝鏍煎紡灏辨槸src鍚庨潰鏄坊鍔犲浘鐗囩殑鍦板潃锛屽悗闈㈢殑alt鏄鍥剧墖鐨勬弿杩般2銆鍦ㄦ彃鍏ュ浘鐗鍓嶏紝瑕佸皢html鏂囦欢鍜屽浘鐗囨枃浠舵斁鍦ㄤ竴涓枃浠跺す鍐咃紝杩欓噷鐨刬mg鏂囦欢澶瑰氨鏄笓闂ㄥ瓨鏀惧浘鐗囩殑鍦版柟銆3銆佺劧鍚庡洖鍒颁唬鐮佹爮锛屽湪src涓緭鍏ラ摼鎺ュ湴鍧img/pic_01.jpg锛岃灏嗗浘鐗囩殑鍏蜂綋鍦板潃鍜屽悕绉板叏閮...
绛旓細鍦℉TML涓彃鍏ュ浘鐗囩殑鏂规硶鏈夛細鐩存帴鍦╤tml浠ｇ爜涓婃彃鍏ャ佸湪CSS鏍峰紡涓彃鍏ャ佸湪JavaScript涓氳繃缁檌mg璁剧疆src鍊兼潵鎻掑叆鍥剧墖銆乮nnerHTML鎻掑叆img灞炴ф潵鎻掑叆鍥剧墖濡傛灉涓涓〉闈腑浠呮湁鏂囧瓧浼氭樉寰楀緢鍗曡皟锛屾灟鐕ヤ箯鍛筹紝浣嗘槸褰撴垜浠坊鍔犱簡涓浜涘浘鐗囧湪涓婇潰鏃朵細鏄惧緱濂界湅澶氫簡锛屼粖澶╁皢鍚戝ぇ瀹朵粙缁嶅浣曞湪HTML椤甸潰涓婃彃鍏ュ浘鐗囥傘愭帹鑽愯绋嬶細...
绛旓細绗竴绉嶆柟娉曪細鐢 dreamweaver杞欢鎻掑叆鍥剧墖 鎵撳紑dreamweaver杞欢锛岀偣鍑绘彃鍏ワ紝閫夋嫨鍥惧儚锛屽鍥 鍦ㄧ珯鐐规枃浠跺す涓嬮潰閫夋嫨瑕佹彃鍏ョ殑鍥惧儚锛屾绔欑偣鐩綍鏄闈傚鍥 閫夋嫨纭畾鍚庝細璺冲嚭浠ヤ笅鐨勭晫闈紝缁х画閫夋嫨纭畾锛屽鍥 杩欐椂灏卞皢鍥惧儚鎻掑叆鍒颁簡html鏂囦欢涓簡锛屾晥鏋滃涓嬪浘 绗簩绉嶆柟娉曪細鐢浠ｇ爜缂栧啓 濡 img src="1.PNG&#...
绛旓細1銆html涓鍙互鐢╥mg鏍囩鎻掑叆鍥剧墖涔熷彲浠ョ敤css鐨刡ackground鎻掑叆銆傚叿浣撴柟娉曟槸棣栧厛鏂板缓涓涓猦tml鏂囦欢锛岄噷闈㈡柊寤轰袱涓猟iv鏍囩锛岀浜屼釜鏍囩涓彃鍏img鏍囩骞舵彃鍏ュ浘鐗囷細2銆佺劧鍚庡湪涓婃柟鐨剆tyle鏍囩涓缃涓涓猟iv鐨勬牱寮忥紝鍏堢粰div闀垮害鍜岄珮搴︼紝鎺ョ潃鏄敤background灞炴у紩鍏ュ浘鐗囷紝璁剧疆鍥剧墖涓嶉噸澶嶄互鍙婂浘鐗囩殑鏄剧ず浣嶇疆j鍗冲彲锛3...
绛旓細1銆侀鍏堜綘鏄氳繃绗簩绉嶆柟寮鎻掑叆鐨勬槸鑳屾櫙鍥剧墖锛岀洿鎺ョ敤width鍜宧eight鍙兘鎺у埗div鐨勫搴﹀拰楂樺害銆2銆佸鏋滀綘鎻掑叆鐨勫浘鐗囨槸閫氳繃<img>鏍囩鐨勬柟寮忔潵鎻掑叆鐨勮瘽锛屽彲浠ラ氳繃<img>鑷韩鐨勫睘鎬ф帶鍒跺浘鐗囧ぇ灏忥紝浠ｇ爜鏍煎紡鏄細<img src="鍥剧墖璺緞" width="鍥剧墖瀹藉害" height="鍥剧墖楂樺害"/>銆3銆佸鏋滈潪瑕侀氳繃css鎺у埗鑳屾櫙鍥剧墖鐨...
绛旓細鍦ㄧ綉椤典腑鎻掑叆鍥剧墖html鍥剧墖浠ｇ爜鏂规硶锛氭楠わ細涓銆乭tml鍥剧墖鏍囩璇硶 <img src="divcss-logo-201305.gif" width="165" height="60" /> img浠嬬粛锛歴rc 鍚庤窡鐨勬槸鍥剧墖璺緞鍦板潃width 璁剧疆鍥剧墖瀹藉害height 璁剧疆鍥剧墖楂樺害 浜屻佸叿浣揾tml 鍥剧墖鏄剧ず瀹炰緥 鍦╤tml婧愪唬鐮佷腑鍒嗗埆鎻掑叆涓夊紶鍥剧墖锛屼竴寮犲師濮嬪ぇ銆佷竴寮犲皢瀹藉害楂樺害...
绛旓細鏍囩锛屼笅闈㈡紨绀轰竴涓嬶細1銆佸噯澶囦竴涓html鏂囦欢鍜屼竴寮犲浘鐗囷紝骞舵斁鍦ㄥ悓涓涓枃浠跺す閲岄潰 2銆佹墦寮html鏂囦欢锛屾寜涓嬪浘涓孩鑹叉閫夊嚭鏉ョ殑浣嶇疆鍦╞ody鏍囩閲岄潰杈撳叆<img src="./test.jpg" alt="娴嬭瘯" />锛岀劧鍚庝繚瀛樸./浠ｈ〃浠ｈ〃褰撳墠鐩綍 3銆佸湪娴忚鍣ㄤ腑鎵撳紑html鏂囦欢锛屽氨鍙互鏄剧ず鎻掑叆鐨勫浘鐗囦簡锛屽涓嬪浘鎵绀 ...
