如何在HTML上插入图片
在HTML中插入图片的方法有：直接在html代码上插入、在CSS样式中插入、在JavaScript中通过给img设置src值来插入图片、innerHTML插入img属性来插入图片
如果一个页面中仅有文字会显得很单调，枯燥乏味，但是当我们添加了一些图片在上面时会显得好看多了，今天将向大家介绍如何在HTML页面上插入图片。
【推荐课程：HTML课程、JavaScript课程】
在HTML页面中插入图片需要用到html中的<img>标签
<img src="" alt="">img代表“图像”,它是图像在页面上显示。
src代表“来源”它告诉浏览器去哪里找图像，在写代码的时候最好将图片放置在一个文件夹下保存，通过这样的方式可以通过名称前面的子目录名称来调用图片
alt代表“文字”告诉浏览器如果找不到图像，就只显示该文本，或者将鼠标悬停在图像上就会弹出设置的文字
Web的图像格式
.gif：是一种简单的格式，由一系列彩色图片元素或点，排列成一幅图片，是动图
.png：与gif格式类似但它具有部分透明度选项，只支持无损压缩。
.JPEG：JPEG格式是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式
HTML插入图片方法
直接在html代码内插入图片
<img src="images/1.jpg">效果图：
在CSS样式中插入图片
<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>效果图：
利用JavaScript语言插入图片
<body>
<img id="demo">
<script>
var demo=document.getElementById("demo");
demo.src="images/3.jpg";
demo.width="450";
demo.height="300";
</script>
</body>效果图：
innerHTML方法插入图片
<div id="demo"></div>
<script>
var demo=document.ElementById("demo");
demo.innerHTML='<img src="images/4.jpg" width="450px" height="300px">';
</script>效果图：
总结：
绛旓細绗竴绉嶆柟娉曪細鐢╠reamweaver杞欢鎻掑叆鍥剧墖鎵撳紑dreamweaver杞欢锛岀偣鍑绘彃鍏ワ紝閫夋嫨鍥惧儚锛屽鍥 1銆佸湪绔欑偣鏂囦欢澶逛笅闈㈤夋嫨瑕佹彃鍏ョ殑鍥惧儚锛屾绔欑偣鐩綍鏄闈傚鍥 2銆侀夋嫨纭畾鍚庝細璺冲嚭浠ヤ笅鐨勭晫闈紝缁х画閫夋嫨纭畾锛屽鍥 3銆佽繖鏃跺氨灏嗗浘鍍忔彃鍏ュ埌浜唄tml鏂囦欢涓簡锛屾晥鏋滃涓嬪浘 绗簩绉嶆柟娉曪細鐢ㄤ唬鐮佺紪鍐欏<imgsrc=\"1.PNG\"...
绛旓細鍦℉TML涓彃鍏ュ浘鐗鍏跺疄鐩稿綋鐩存帴锛屼互涓嬫槸璇︾粏鐨勬楠わ細棣栧厛锛屼綘闇瑕佸噯澶囦竴浜涘熀鏈伐鍏凤細涓鍙扮數鑴戙佷竴娆剧綉椤垫祻瑙堝櫒鍜屼竴涓狧TML缂栬緫鍣ㄣ傝繖浜涙槸鏋勫缓鍜屽睍绀哄浘鐗囩殑鍩虹銆傚紑濮嬫搷浣滄椂锛屾墦寮浣犵殑HTML缂栬緫鍣紝鏂板缓涓涓枃浠讹紝姣斿鍛藉悕涓"index.html"锛岀劧鍚庡湪姝ゆ枃浠朵腑寮濮嬬紪鍐欏熀纭鐨凥TML浠ｇ爜缁撴瀯銆傚湪鏋勫缓琛ㄦ牸閮ㄥ垎锛屾壘鍒版爣绛撅紝...
绛旓細缁撹锛鍦℉TML椤甸潰涓婃樉绀哄浘鐗囷紝鍙渶浣跨敤鏍囩鍗冲彲銆備互涓嬫槸璇︾粏鐨勬楠ゅ拰鐩稿叧鐭ヨ瘑锛氳鎻掑叆鍥剧墖锛屾渶绠鍗曠殑鏂规硶鏄湪HTML涓彃鍏ユ爣绛撅紝鍏跺熀鏈牸寮忎负锛氥傞鍏堬紝鍒涘缓涓涓爣绛撅紝骞跺湪src灞炴т腑濉叆鍥剧墖鐨勬湰鍦拌矾寰勩傚綋浣犲湪娴忚鍣ㄤ腑鎵撳紑鍖呭惈姝ゆ爣绛剧殑HTML鏂囦欢鏃讹紝鍥剧墖灏变細鏄剧ず鍦ㄩ〉闈笂锛屽涓嬫墍绀猴細鍊煎緱娉ㄦ剰鐨勬槸锛屾爣绛惧苟闈...
绛旓細鐩稿璺緞锛氬鏋滄槸缃戠珯鐨勮瘽锛屽垯涓轰笅闈㈢殑锛歩mg src=images/tupian.jpeg/>鐩稿璺緞:濡傛灉鏄綉绔欙紝鍒欏涓:灏嗚繖涓html鏂囦欢涓巌mages鏀惧湪鍚屼竴涓洰褰曚腑:灏嗘鍥剧墖涓巋tml鏂囦欢鏀惧湪鍚屼竴涓洰褰曚腑:鏍囩涓紝杈撳叆html浠ｇ爜锛歩mg src="small3.png"/>銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃娣诲姞鐨勬湰鍦板浘鐗囩殑璺緞鏄浉瀵硅矾寰勩
绛旓細鍦℉TML涓彃鍏ュ浘鐗囩殑鏂规硶鏈夛細鐩存帴鍦╤tml浠ｇ爜涓婃彃鍏ャ佸湪CSS鏍峰紡涓彃鍏ャ佸湪JavaScript涓氳繃缁檌mg璁剧疆src鍊兼潵鎻掑叆鍥剧墖銆乮nnerHTML鎻掑叆img灞炴ф潵鎻掑叆鍥剧墖濡傛灉涓涓〉闈腑浠呮湁鏂囧瓧浼氭樉寰楀緢鍗曡皟锛屾灟鐕ヤ箯鍛筹紝浣嗘槸褰撴垜浠坊鍔犱簡涓浜涘浘鐗囧湪涓婇潰鏃朵細鏄惧緱濂界湅澶氫簡锛屼粖澶╁皢鍚戝ぇ瀹朵粙缁嶅浣曞湪HTML椤甸潰涓婃彃鍏ュ浘鐗囥傘愭帹鑽愯绋嬶細...
绛旓細<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> 灏忔彁绀 纭繚鍥剧墖鐨刄RL鍦板潃涓寘鍚浘鐗囨枃浠剁殑鏍煎紡锛堝.jpg銆.gif绛夌瓑锛夈傚湪鐢佃剳涓婁繚鐣欏浘鐗囩殑澶囦唤鏂囦欢...
绛旓細1銆侀鍏堝湪鐢佃剳涓柊寤轰竴涓枃浠跺す锛堝锛歸eb-01锛夛紝鍦ㄨ鏂囦欢澶归噷鏂板缓涓涓html鏂囦欢锛堝锛歩ndex1.html锛夈2銆佹帴鐫鎵撳紑杩欎釜html鏂囦欢锛岀紪鍐欎竴涓猦tml鐨勫熀鏈鏋躲3銆佹帴鐫鍦ㄥご閮<head>鈥︹</head>涓姞鍏鎻掑叆鑳屾櫙鍥剧墖鐨勪唬鐮併備笉璁剧疆骞抽摵鏂瑰紡鐨勬儏鍐典笅鏄粯璁ゆ按骞崇珫鐩撮兘骞抽摵銆4銆佽嫢瑕佷笉閲嶅骞抽摵锛岄渶瑕佸啓鍏モ渂ack...
绛旓細html鎻掑叆鍥剧墖鏈変袱绉嶆柟寮忥細涓绉嶆槸閫氳繃<img>鏍囩鎻掑叆鐨勬甯哥殑鍥剧墖锛屽彟涓绉嶆槸閫氳繃css鏍峰紡鎻掑叆鐨勮儗鏅浘鐗囥傞棶棰樺垎鏋愶細1銆侀鍏堜綘鏄氳繃绗簩绉嶆柟寮忔彃鍏ョ殑鏄儗鏅浘鐗囷紝鐩存帴鐢╳idth鍜宧eight鍙兘鎺у埗div鐨勫搴﹀拰楂樺害銆2銆佸鏋滀綘鎻掑叆鐨勫浘鐗囨槸閫氳繃<img>鏍囩鐨勬柟寮忔潵鎻掑叆鐨勮瘽锛屽彲浠ラ氳繃<img>鑷韩鐨勫睘鎬ф帶鍒跺浘鐗囧ぇ灏忥紝...
绛旓細1銆佹彃鍏ヨ儗鏅浘鐗囨湁涓ょ鏂规硶锛屼竴绉嶆槸鐢html鐨刬mg鏍囩锛屽彟涓绉嶆槸鍒╃敤css鐨刡ackground鏍囩鎻掑叆銆傚叿浣撴搷浣滄槸棣栧厛鏂板缓涓涓猦tml鏂囦欢锛屽啓鍏ヤ袱涓猟iv锛屽垎鍒敤鏉ユ紨绀轰袱绉嶆柟娉曟彃鍏ユ爣绛撅細2銆侀鍏堟槸鐢╤tml鏍囩鎻掑叆鍥剧墖锛岃繖閲岀洿鎺ュ湪img鏍囩涓浣跨敤src灞炴у氨鍙互鎻掑叆鍥剧墖璺緞灏辨垚鍔熶簡锛3銆佹帴鐫鏄敤css鎻掑叆锛屽湪div涓缃甤lass...
绛旓細1銆佹柊寤篽tml鏂囦欢锛屽鍥炬墍绀猴紝鍦╞ody鏍囩涓彃鍏img鏍囩锛岄渶瑕佹敞鎰忕殑鏄紝img鍦╤tml涓娌℃湁缁撴潫鏍囩锛屾墍浠ヤ笉闇瑕佹坊鍔犫</img>鈥濄傜粰鏍囩娣诲姞鈥渟rc鈥濆睘鎬э紝灞炴у煎～鍐欐兂瑕娣诲姞鍥剧墖鐨勮矾寰勶紝杩欓噷浠ュ拰html鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨鎻掑叆瀹屾垚浜嗭細2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鏃犳硶鍔犺浇鍥剧墖锛屽彲浠ョ粰img鏍囩娣诲姞...
