HTML怎样插入图片 html里怎么插入背景图片？？急
HTML\u4e2d \u600e\u4e48\u63d2\u5165\u56fe\u7247\u94fe\u63a5\uff1f \u56fe\u7247\u662f\u672c\u5730\u7535\u8111\u4e0a\u600e\u4e48\u5199\u8def\u5f84\uff1fHTML\u4e2d \u600e\u4e48\u63d2\u5165\u56fe\u7247\u94fe\u63a5\u4f7f\u7528a\u6807\u7b7e\u548cimg\u6807\u7b7e\uff0c\u793a\u4f8b\uff1a
\u5176\u4e2d\u6807\u7b7e\u4ee3\u8868\u94fe\u63a5\uff0c\u6807\u7b7e\u653e\u5728\u91cc\u9762\u8868\u793a\u56fe\u7247\u94fe\u63a5\uff0cimg\u7684\u5c5e\u6027src='/image/aaa.jpg'\u8868\u793a\u4e86\u56fe\u7247\u7684\u8def\u5f84\uff0c/image/aaa.jpg\u662f\u672c\u5730\u7535\u8111\u7684\u56fe\u7247\u5730\u5740\u3002
\u6269\u5c55\u8d44\u6599
html\u4e2d\u6807\u7b7e\u7528\u6cd5\u4ecb\u7ecd\uff1a
\u94fe\u63a5\u7684 HTML \u4ee3\u7801\u7c7b\u4f3c\u8fd9\u6837\uff1a
Link texthref \u5c5e\u6027\u89c4\u5b9a\u94fe\u63a5\u7684\u76ee\u6807\u3002
\u5f00\u59cb\u6807\u7b7e\u548c\u7ed3\u675f\u6807\u7b7e\u4e4b\u95f4\u7684\u6587\u5b57\u88ab\u4f5c\u4e3a\u8d85\u7ea7\u94fe\u63a5\u6765\u663e\u793a\u3002
\u5b9e\u4f8bVisit W3School\u4e0a\u9762\u8fd9\u884c\u4ee3\u7801\u663e\u793a\u4e3a\uff1aVisit W3School
\u70b9\u51fb\u8fd9\u4e2a\u8d85\u94fe\u63a5\u4f1a\u628a\u7528\u6237\u5e26\u5230 W3School \u7684\u9996\u9875\u3002
\u63d0\u793a\uff1a"\u94fe\u63a5\u6587\u672c" \u4e0d\u5fc5\u4e00\u5b9a\u662f\u6587\u672c\u3002\u56fe\u7247\u6216\u5176\u4ed6 HTML \u5143\u7d20\u90fd\u53ef\u4ee5\u6210\u4e3a\u94fe\u63a5\u3002
HTML \u94fe\u63a5 - target \u5c5e\u6027\u4f7f\u7528 Target \u5c5e\u6027\uff0c\u4f60\u53ef\u4ee5\u5b9a\u4e49\u88ab\u94fe\u63a5\u7684\u6587\u6863\u5728\u4f55\u5904\u663e\u793a\u3002
\u4e0b\u9762\u7684\u8fd9\u884c\u4f1a\u5728\u65b0\u7a97\u53e3\u6253\u5f00\u6587\u6863\uff1a
Visit W3School!
1\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
插入图片可以使用img标签来实现。
1、新建html文件，如图所示，在body标签中插入img标签，需要注意的是，img在html中没有结束标签，所以不需要添加“</img>”。给标签添加“src”属性，属性值填写想要添加图片的路径，这里以和html同一目录下的1.png为例，这样图片就插入完成了：
2、为了防止用户浏览网页时无法加载图片，可以给img标签添加“alt”属性，这个属性可以在图片加载失败时显示出来以告诉用户这里是张什么图片，还可以在用户将鼠标放在图片上是显示提示信息，这里以属性值“鹦鹉”为例：
3、img标签中插入的图片宽和高默认是图片自身的宽和高，如果想要自定义宽和高的话，可以用“width”和“height”来控制，这里以宽和高都是200为例，为width”和“height”设置属性值为“200”：
对于HTML的插入图片技巧老渔哥网络提示可以从以下的三个步骤去进行：
1、首先，通过TXT文档，创建一个网页的基本框架。也就是html、head、body。当然，用dw创建一个网页文档，会自动写入这些代码。这里老渔哥网络使用的是dw.
2、图片的格式通过有3种：GIF、JPEG、PNG。GIF最大的好处是可以制作动态图片。具体选择何种格式可自行决定。
3、插入图片的标记值有一个：“img”标记！请在body中加入如下一行：<img src="./test.jpg">由src指示图片的位置，双击该网页运行，便可看到网页中的图片了。
第一种：img标签插入图片
<img src="h5course.png" alt="HTML5学堂">
第二种：通过背景图插入图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5学堂</title>
<style type="text/css">
.h5course {
width: 200px;
height: 200px;
/* 图片路径记得修改哈 */
background: url('../images/h5course.jpg');
}
</style>
</head>
<body>
<div class="h5course">HTML5学堂</div>
</body>
</html>
可以去看看HTML5学堂，里面有很多HTML5原创技术干货。
绛旓細浠ｇ爜鏄<img scr = '鍥剧墖鍦板潃'>鈥濄1銆佹柊寤html鏂囦欢锛屽湪body鏍囩涓坊鍔爄mg鏍囩锛宨mg鏍囩鍦╤tml涓病鏈夌粨鏉熸爣绛撅紝鎵浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎～鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
绛旓細鐩存帴鍦html缂栬緫绐楀彛鎻掑叆鐩稿簲鍛戒护鍗冲彲鍦╤tml琛ㄦ牸涓姞鍏ュ浘鐗囷紝鍏蜂綋鎿嶄綔姝ラ濡備笅锛1銆佸皢html鏂囦欢鍜屽浘鐗囨斁鍦ㄥ悓涓鏂囦欢澶癸紝渚嬪鏀惧湪鐢佃剳妗岄潰锛屽涓嬪浘鎵绀猴紱2銆佹墦寮html缂栬緫绐楀彛锛屽琛ㄦ牸杩涜缂栬緫锛屽畬鎴愯〃鏍肩殑鏍囩锛屽涓嬪浘鎵绀猴紱3銆佸湪鍗曞厓鏍尖渢able鈥濋噷闈鎻掑叆鍥剧墖鐨勬爣绛撅紝鐒跺悗鍦ㄢ滃崟鍏冩牸td鈥濆悗闈㈡彃鍏ュ浘鐗囩殑淇濆瓨璺緞...
绛旓細1銆html涓彲浠ョ敤img鏍囩鎻掑叆鍥剧墖涔熷彲浠ョ敤css鐨刡ackground鎻掑叆銆傚叿浣撴柟娉曟槸棣栧厛鏂板缓涓涓猦tml鏂囦欢锛岄噷闈㈡柊寤轰袱涓猟iv鏍囩锛岀浜屼釜鏍囩涓彃鍏mg鏍囩骞舵彃鍏ュ浘鐗囷細2銆佺劧鍚庡湪涓婃柟鐨剆tyle鏍囩涓缃涓涓猟iv鐨勬牱寮忥紝鍏堢粰div闀垮害鍜岄珮搴︼紝鎺ョ潃鏄敤background灞炴у紩鍏ュ浘鐗囷紝璁剧疆鍥剧墖涓嶉噸澶嶄互鍙婂浘鐗囩殑鏄剧ず浣嶇疆j鍗冲彲锛3...
绛旓細1銆佹坊鍔<img> 鏍囩锛岃祫婧愨渟rc鈥濋噷闈㈠～鍐欐湰鍦鍥剧墖鐨勮矾寰勫悕锛2銆佺敤娴忚鍣ㄦ墦寮鏂囦欢锛屽嵆鍙湅鍒板浘鐗囧凡娣诲姞鎴愬姛锛屽涓嬪浘鎵绀 img鏍囩瀹氫箟鍙婁娇鐢ㄨ鏄:<img> 鏍囩瀹氫箟 HTML 椤甸潰涓殑鍥惧儚銆<img> 鏍囩鏈変袱涓繀闇鐨勫睘鎬э細src 鍜 alt銆傛敞閲婏細浠庢妧鏈笂璁诧紝鍥惧儚骞朵笉浼鎻掑叆 HTML 椤甸潰涓紝鑰屾槸閾炬帴鍒 HTML 椤甸潰...
绛旓細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銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
绛旓細浠ｇ爜鏄<img scr = '鍥剧墖鍦板潃'>鈥濄1銆佹柊寤html鏂囦欢锛屽湪body鏍囩涓坊鍔爄mg鏍囩锛宨mg鏍囩鍦╤tml涓病鏈夌粨鏉熸爣绛撅紝鎵浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎～鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
绛旓細浠ｇ爜鏄<img scr = '鍥剧墖鍦板潃'>鈥濄1銆佹柊寤html鏂囦欢锛屽湪body鏍囩涓坊鍔爄mg鏍囩锛宨mg鏍囩鍦╤tml涓病鏈夌粨鏉熸爣绛撅紝鎵浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎～鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
绛旓細濡傛灉浣犵殑鍥剧墖鏄綔涓洪檮浠舵坊鍔犲埌閭欢涓殑锛岄偅涔堜綘闇瑕佷娇鐢ㄩ偖浠跺鎴风鐨勭壒瀹氬嚱鏁版潵灏嗗浘鐗囨坊鍔犲埌閭欢涓紝骞惰幏鍙栧浘鐗囩殑ID銆傚叿浣撶殑鎿嶄綔鏂规硶鍙栧喅浜庝綘浣跨敤鐨勯偖浠跺鎴风鎴栨湇鍔°傞渶瑕佹敞鎰忕殑鏄紝铏界劧澶ч儴鍒嗙幇浠ｇ殑閭欢瀹㈡埛绔兘鏀寔HTML鏍煎紡鐨勯偖浠讹紝浣嗘槸骞朵笉鏄墍鏈夌殑閭欢瀹㈡埛绔兘鏀寔鎵鏈夌殑HTML鐗规с傚洜姝わ紝浣犲簲璇ョ‘淇濅綘鐨...
绛旓細鐢ㄦ爣绛俱備唬鐮佹牱寮忥細浠ｇ爜璇存槑锛氳繖鏄湪缃戦〉涓鎻掑叆涓鍓浘鍍忥紝鑳借皟鏁村浘鍍忓ぇ灏忥紝鑳芥媺浼稿浘鍍忥紝浣嗘槸涓嶈兘骞抽摵鍥惧儚锛屽浘鍍忚鍗犵敤椤甸潰鐨勭┖闂寸殑锛屼竴鑸儏鍐典笅锛屾枃瀛椾笉鑳藉湪杩欐牱鐨勫浘鍍忎笂闈備唬鐮佹爣绛捐В閲婏細1銆佹爣绛惧畾涔夊浘鍍忋2銆乻rc锛氳鏄剧ず鐨勫浘鍍忕殑URL锛鍥剧墖鍦板潃锛夈3銆亀idth锛氬浘鐗囧搴 4銆乭eight锛氬畾涔夊浘鍍忕殑楂樺害銆5銆...
