HTML表单里插入一个图片为什么离上面的间距很大？
\u5173\u4e8eHTML\u8868\u683c\u4e2d\u63d2\u5165\u80cc\u666f\u56fe\u7247\u7684\u95ee\u9898 \uff08\u8fd9\u4e8b\u8bbe\u7f6e\u80cc\u666f\u56fe\u7247\uff09
\u5982\u679c\u662f\u8fd9\u6837\u7684\u5c31\u662f\u76f4\u63a5\u63d2\u5165\u56fe\u7247\u3002\u4f60\u770b\u770b\uff0c\u662f\u5426\u6b63\u786e\u3002
\u6ce8\uff1a\u5fc5\u987b\u5408\u5e76\u5355\u5143\u683c\u8fd9\u6837\u624d\u80fd\u5728\u7b2c\u4e00\u6837\u4e00\u8d77\u663e\u793a\u3002
\u5728Dreamweaver CS6\u4e2d\u65b0\u5efa\u4e00\u4e2ahtml\u7a7a\u767d\u6587\u6863\uff0c\u5c06\u9875\u9762\u5185\u5bb9\u653e\u5165\u4e2d\u3002\u9009\u4e2d\u80cc\u666f\u56fe\u5373\u53ef\u63d2\u5165\u3002
\u8be6\u7ec6\u6b65\u9aa4\uff1a
\u5de5\u5177/\u6750\u6599\uff1a
1\u3001\u65b0\u5efa\u6587\u4ef6\u5939\u5e76\u5c06\u5176\u547d\u540d\u4e3a\u201c\u8868\u683c\u201d\u3002
2\u3001\u5c06\u80cc\u666f\u56fe\u653e\u5165\u65b0\u5efa\u7684\u201d\u8868\u683c\u201c\u6587\u4ef6\u5939\u91cc\u3002
3\u3001\u5728Dreamweaver CS6\u4e2d\u65b0\u5efa\u4e00\u4e2ahtml\u7a7a\u767d\u6587\u6863\u3002
4\u3001\u5c06\u9875\u9762\u5185\u5bb9\u653e\u5165\u4e2d\u3002
5\u3001\u5728<body\u540e\u6309\u4e00\u4e0b\u7a7a\u683c\u952e\uff0c\u627e\u5230background\uff0c\u518d\u6309\u7a7a\u683c\uff0c\u70b9\u51fb\u201c\u6d4f\u89c8\u201d\uff0c\u627e\u5230\u80cc\u666f\u56fe\u7684\u4f4d\u7f6e\u3002
6\u3001\u9009\u4e2d\u80cc\u666f\u56fe\uff0c\u70b9\u51fb\u201c\u786e\u5b9a\u201d\u3002
7\u3001\u56fe\u7247\u63d2\u5165\u5b8c\u6210\u3002
8\u3001\u5c06\u8fd9\u4e2ahtml\u53e6\u5b58\u4e3a\u5728\u201c\u8868\u683c\u201d\u6587\u4ef6\u5939\u91cc\u3002
9\u3001\u70b9\u51fb\u8fd9\u4e2a\u9884\u89c8\u56fe\u6807\uff0c\u5c31\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u67e5\u770b\u6548\u679c\u3002
10\u3001\u5b8c\u6210\u6548\u679c\u56fe\u3002
\u53c2\u8003\u8d44\u6599\uff1a
\u767e\u5ea6\u767e\u79d1-HTML\u8868\u5355
绛旓細HTML鎻掑叆鍥剧墖涓嶆樉绀猴紝鏈夊嚑涓師鍥犻渶瑕佹帓鏌ヤ竴涓嬶細1銆佸浘鐗囪皟鐢ㄨ矾寰勪笉瀵癸紱2銆佸浘鐗囧悕绉颁笉瀵癸紱3銆佸浘鐗囨湰韬湁闂锛4銆佸浘鐗囪皟鐢ㄤ唬鐮侀棶棰樸傝В鍐冲姙娉曪細1銆佹洿鏀瑰浘鐗囪皟鐢ㄨ矾寰勶紝閲嶆柊璋冪敤鍥剧墖锛2銆佸浘鐗囧悕绉颁粩缁嗘鏌ワ紝璋冪敤鐨勫浘鐗囧悕涓庡浘鐗囧悕绉颁繚鎸佷竴鑷达紱3銆侀噸鏂版崲涓寮犲浘鐗囷紱4銆佸浘鐗囪皟鐢ㄤ唬鐮侊紝闇瑕佹鏌ヤ竴涓嬶紝寤鸿閲嶆柊缂栧啓...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html锛岀紪鍐欓棶棰樺熀纭浠ｇ爜銆2銆佸湪index.html涓鐨勬爣绛句腑锛鍔犲叆鏍峰紡浠ｇ爜锛歴tyle="background:url(small2.png);width:150px;height:60px"銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵寜閽鎴愬姛娣诲姞浜鍥剧墖銆
绛旓細缁欏乏渚х殑鍥剧墖鍔犱竴涓猚ss鏍峰紡锛 vertical-align: middle锛屽涓嬪浘銆備唬鐮 濡備笅鍥撅細
绛旓細浠ｇ爜鏄<img scr = '鍥剧墖鍦板潃'>鈥濄1銆佹柊寤篽tml鏂囦欢锛屽湪body鏍囩涓坊鍔img鏍囩锛宨mg鏍囩鍦html涓娌℃湁缁撴潫鏍囩锛屾墍浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎～鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
绛旓細浠ｇ爜鏄<img scr = '鍥剧墖鍦板潃'>鈥濄1銆佹柊寤篽tml鏂囦欢锛屽湪body鏍囩涓坊鍔img鏍囩锛宨mg鏍囩鍦html涓娌℃湁缁撴潫鏍囩锛屾墍浠ヤ笉闇瑕佹坊鍔犫</img>鈥濅唬鐮併傜粰img鏍囩娣诲姞灞炴р渟rc鈥濓紝灞炴у煎～鑷繁鎯宠娣诲姞鍥剧墖鐨勫湴鍧锛岃繖閲屼互鍚屼竴鐩綍涓嬬殑1.png涓轰緥锛岃繖鏍峰浘鐗囧氨娣诲姞濂戒簡:2銆佷负浜嗛槻姝㈢敤鎴锋祻瑙堢綉椤垫椂鍥剧墖鍔犺浇澶辫触...
绛旓細濡備綍璁剧疆缃戦〉鑳屾櫙锛1銆侀鍏堟墦寮Atom缂栬緫鍣ㄥ鍏ラ」鐩枃浠跺す锛屽厛鍒涘缓涓涓index.html 鐨鏂囦欢銆傚畾涔変竴涓媓tml鏂囦欢鐨勪富淇℃伅锛2銆佺劧鍚庡～鍐欒嚜宸辩殑缃戦〉鍐呭锛岃缃竴涓嬫牱寮忥紝鐩存帴鍦╞ody鍚庨潰鍔犱笂background="鍥剧墖鍚嶅瓧"鍗冲彲鎻掑叆鍥剧墖锛3銆佹渶鍚庢潵鍒版祻瑙堝櫒锛屽埛鏂颁竴涓嬬綉椤碉紝杩欐牱灏变細鏄剧ず鑳屾櫙浜嗭細缃戦〉鎴栫數鑴戦噷鐨勫浘鐗囧浣曡涓...
绛旓細<!DOCTYPE html> <html> <head> <title>image</title> <meta charset="utf-8"> <style type="text/css"> .myImage{ width: 400px;height: 300px;margin-top: 100px;margin-left: 100px;} </style> </head> <body> <img src="images/cat.jpg" class="myImage" alt="灏忕尗"> </...
绛旓細3銆佺劧鍚庢柊寤涓涓css鏂囦欢锛屽鍥撅紱4銆佽繖閲岀粰body鏍囩璁剧疆background-size灞炴э紝濡傛灉鏍囩鏄痙iv灏卞啓div锛岀劧鍚庡彲浠ヨ缃搴﹀拰楂樺害锛5銆佸鍥炬墍绀猴紝鍦╪ew_file.html閲岄潰缂栬緫锛<link href="css/1.css" type="text/css" rel="stylesheet"/>锛屽氨鍙互璁剧疆鑳屾櫙鍥剧墖鐨勫ぇ灏忎簡锛6銆佹渶鍚庡湪娴忚鍣ㄤ腑棰勮涓涓嬶紝濡傚浘涓...
绛旓細1銆佹彃鍏ヨ儗鏅浘鐗囨湁涓ょ鏂规硶锛屼竴绉嶆槸鐢html鐨img鏍囩锛屽彟涓绉嶆槸鍒╃敤css鐨刡ackground鏍囩鎻掑叆銆傚叿浣撴搷浣滄槸棣栧厛鏂板缓涓涓猦tml鏂囦欢锛屽啓鍏ヤ袱涓猟iv锛屽垎鍒敤鏉ユ紨绀轰袱绉嶆柟娉曟彃鍏ユ爣绛撅細2銆侀鍏堟槸鐢╤tml鏍囩鎻掑叆鍥剧墖锛岃繖閲岀洿鎺ュ湪img鏍囩涓娇鐢╯rc灞炴у氨鍙互鎻掑叆鍥剧墖璺緞灏辨垚鍔熶簡锛3銆佹帴鐫鏄敤css鎻掑叆锛屽湪div涓缃甤lass...
绛旓細<img>涔嬪悗鐨勫唴瀹归兘涓嶄細鏄剧ず銆傝屽鏋滅敤css鏉ュ紩鍏ュ悓鏍风殑鍥剧墖锛岀綉椤电粨鏋勫拰鍐呭鍔犺浇瀹屾垚涔嬪悗锛屾墠寮濮嬪姞杞借儗鏅浘鐗囷紝涓嶄細褰卞搷浣犳祻瑙堢綉椤靛唴瀹广俀2.浠涔鍥剧墖鎻掑叆鍦╟ss锛屼粈涔堝浘鐗囨彃鍏ュ湪html閲岄潰锛烝2.濡傛灉鏄楗版х殑鍥剧墖灏卞啓鍦╟ss閲岄潰锛屽鏋滄槸鍐呭鎬х殑鍥剧墖灏卞啓鍦╤tml閲岄潰锛屾墦涓瘮鏂癸紝浣犺鍋涓涓鏈夋紓浜竟妗嗙殑鐩稿唽銆
