鍓嶇鍚▼锛欻TML銆丆SS涓嶫avaScript鐨勫濡欎笘鐣?/p>

璧拌繘鍓嶇寮€鍙戠殑绁炲澶ч棬锛屼綘浼氳浜斿僵鏂戞枔鐨勭綉椤典笘鐣屾墍鍚稿紩銆傝繖閲岋紝HTML銆丆SS鍜孞avaScript涓夊ぇ鎶€鏈叡鍚岀粯鍒跺嚭涓€骞呭箙缁氫附澶氬僵鐨勭敾鍗枫€?/p>涓€銆佸墠绔紑鍙戝垵鎺?/h3>

鍦ㄥ鎴风娴忚鍣ㄧ殑鏂瑰涔嬮棿锛岄殣钘忕潃鏃犵┓鏃犲敖鐨勫彲鑳姐€傚墠绔紑鍙戞鏄繖鐗囬瓟娉曠殑鍦熷湴涓婄殑寤虹瓚甯堛€侶TML銆丆SS鍜孞avaScript锛屾槸鏋勫缓缃戦〉鐨勫熀鐭炽€?/p>浜屻€佹瀯寤虹綉椤电殑寰楀姏宸ュ叿

鎯宠楂樻晥鍦拌繘琛屽墠绔紑鍙戯紝鍚堥€傜殑宸ュ叿鏄繀涓嶅彲灏戠殑銆俈isual Studio Code鍜孲ublime Text绛夌紪杈戝櫒鏄綘鐨勫緱鍔涘姪鎵嬶紝瀹冧滑鎻愪緵鐨勪唬鐮侀珮浜€佷唬鐮佺墖娈靛拰鑷姩瀹屾垚鍔熻兘锛屽皢鏋佸ぇ鍦版彁鍗囦綘鐨勭紪绋嬫晥鐜囥€傛祻瑙堝櫒鍐呯疆鐨勫紑鍙戣€呭伐鍏蜂篃鏄綘鐨勮创韬皬绉樹功锛屽府鍔╀綘蹇€熻瘖鏂拰浼樺寲缃戦〉鎬ц兘銆?/p>涓夈€丠TML锛氱綉椤电粨鏋勭殑鑹烘湳

HTML锛屼竴绉嶆瀯寤虹綉椤电殑鍩烘湰璇█锛岀姽濡傜粯鐢荤殑绾挎潯锛屽嬀鍕掑嚭缃戦〉鐨勯鏋躲€傞€氳繃鏍囩濡傘€併€佺瓑锛屼綘鍙互杞绘澗鍒涘缓缃戦〉鐨勫竷灞€鍜屽唴瀹广€備竴涓畝鍗曠殑绀轰緥锛氫竴涓甫鏈夋爣棰樺拰娈佃惤鐨勭綉椤碉紝灏卞寘鍚簡HTML鐨勫熀鏈粨鏋勩€?/p>鍥涖€丆SS锛氱編鍖栫綉椤电殑榄旀硶甯?/h3>

CSS涓篐TML鍏冪礌甯︽潵浜嗚瑙変笂鐨勯瓍鍔涖€傚閮–SS鏂囦欢濡傚悓榄旀硶涔︼紝鍖呭惈浜嗗悇绉嶆牱寮忔寚浠ゃ€傞€氳繃body銆乭1銆乸绛夐€夋嫨鍣紝浣犲彲浠ヤ负椤甸潰鍏冪礌璧嬩簣鍚勭鏍峰紡銆備緥濡傦紝浣犲彲浠ヨ缃儗鏅鑹层€佸瓧浣撶瓑銆侰SS鐨勯瓟娉曪紝璁╃綉椤典粠鍗曡皟鐨勬枃瀛楅〉闈紝鍙樻垚浜嗕赴瀵屽褰╃殑瑙嗚鐩涘銆?/p>浜斻€丣avaScript锛氳祴浜堢綉椤电敓鍛藉姏

JavaScript鏄綉椤电殑榄旀硶甯堬紝瀹冧负缃戦〉璧嬩簣浜嗗姩鎬佺殑鍔熻兘鍜屼氦浜掓€с€傞€氳繃鍩虹璇硶濡傚彉閲忓畾涔夈€佹搷浣滅鍜屾帶鍒剁粨鏋勶紝浣犲彲浠ュ疄鐜板悇绉嶅姩鎬佹晥鏋滃拰浜嬩欢澶勭悊銆備緥濡傦紝涓烘寜閽坊鍔犵偣鍑讳簨浠跺鐞嗙▼搴忥紝褰撶敤鎴风偣鍑绘寜閽椂锛岀綉椤典細鍝嶅簲骞舵樉绀虹浉搴旂殑淇℃伅銆?/p>鍏€佸疄鎴樻紨缁冿細鏋勫缓澶╂皵棰勬姤灏忕▼搴?/h3>

鐞嗚鐭ヨ瘑瀛︿範瀹屾瘯鍚庯紝鏄疄璺电殑鏃跺€欎簡锛侀€夋嫨涓€涓畝鍗曠殑涓婚锛屽鈥滃ぉ姘旈鎶モ€濆簲鐢ㄣ€傝繍鐢ㄦ墍瀛︾煡璇嗭紝浣跨敤HTML鏋勫缓椤甸潰缁撴瀯锛孋SS缇庡寲椤甸潰锛孞avaScript瀹炵幇鍔ㄦ€佹暟鎹睍绀哄拰浜や簰銆傞€氳繃杩欎釜瀹炴垬椤圭洰锛屼綘灏嗘洿娣卞叆鍦扮悊瑙ｅ墠绔紑鍙戠殑榄呭姏鍜屾寫鎴樸€?/p>

---

澶╂皵棰勬姤

姘旇薄鎾姤绔欙細浼︽暒澶╂皵棰勬姤

浠婂ぉ锛屾垜浠负鎮ㄥ甫鏉ヤ鸡鏁︾殑鏈€鏂板ぉ姘旈鎶ャ€?/p>

鑳屾櫙淇℃伅锛?/p>

澶╃┖涔嬩笅锛屼鸡鏁﹁繖搴у彜鑰佽€岀幇浠ｄ氦缁囩殑鍩庡競锛屾鍦ㄧ粡鍘嗘€庢牱鐨勫ぉ姘斿彉鍖栧憿锛熻鎴戜滑涓€鍚屾彮鏅撶瓟妗堛€傞殢鐫€寰杞绘媯娉版櫎澹渤鐣旓紝杩欓噷鏄粖鏃ョ殑澶╂皵棰勬姤淇℃伅銆傝鎴戜滑缈诲紑鑷劧鐢诲嵎鐨勪竴瑙掞紝璺熼殢椋庡悜鍙樺寲涓庢皵娓╂尝鍔紝娲炴倝浠婃棩姘旇薄涔嬮瓍鍔涖€傝鎴戜滑鎵撳紑椤甸潰锛岃窡闅廇PI鏁版嵁鐨勫疄鏃舵洿鏂帮紝涓€鎺㈢┒绔熴€?馃崈 馃對锔?馃導锔?馃尀 馃尃锔?馃寷

锛堟敞锛氳繖閲岀殑澶╂皵鎯呭喌鏍规嵁鐪熷疄鏁版嵁鍔ㄦ€佹洿鏂帮級

浠ヤ笅鏄缁嗙殑澶╂皵淇℃伅锛?/p>

鍦扮偣锛歔鑾峰彇鏁版嵁骞跺睍绀哄湴鐐瑰悕绉癩

娓╁害锛歔鑾峰彇鏁版嵁骞跺睍绀烘俯搴︼紝浠ユ憚姘忓害涓哄崟浣峕

澶╂皵鐘跺喌锛歔鑾峰彇鏁版嵁骞跺睍绀哄ぉ姘旀弿杩帮紝濡傛櫞鏈椼€佸浜戙€佸皬闆ㄧ瓑]

閫氳繃鍓嶇鎶€鏈疄鐜拌繖涓€鍔熻兘锛屼娇寰楁暟鎹疄鏃舵洿鏂帮紝涓虹敤鎴锋彁渚涙渶鍑嗙‘鐨勫ぉ姘旈鎶ヤ俊鎭€傝儗鏅噰鐢ㄦ俯棣ㄧ殑娴呴粍鑹茶皟锛屾爣棰橀噰鐢ㄦ繁钃濊壊瀛椾綋锛屼娇寰楁暣浣撶晫闈㈢畝娲佹槑浜嗐€傚綋鎮ㄦ墦寮€椤甸潰鏃讹紝鏈€鏂扮殑澶╂皵淇℃伅鍗冲埢鍛堢幇鐪煎墠銆傞€氳繃API瀵嗛挜涓嶰penWeatherMap API瀵规帴锛岀‘淇濇暟鎹殑鍑嗙‘鎬у拰瀹炴椂鎬с€備竴鍒囩粏鑺傞兘鍦ㄤ负鎮ㄦ彁渚涙渶浣崇殑浣撻獙銆傝繖涓嶄粎浠呮槸涓€涓畝鍗曠殑澶╂皵棰勬姤鍔熻兘锛屾洿鏄鎮ㄦ棩甯哥敓娲荤殑璐村績鍏虫€€銆傗湪馃審鉁?/p>

璁╂垜浠竴璧疯繋鎺ユ瘡涓€澶╃殑鏂版皵璞″惂锛佲湪馃尀鉁?鉀咃笍鈽侊笍鈿○煂?/p>

璇峰瘑鍒囧叧娉ㄥぉ姘斿彉鍖栵紝涓烘棩甯稿嚭琛屽仛濂藉噯澶囧摝锛佹効闃冲厜涓庢偍鍚屽湪锛侌煂熲湪馃尋锔? 鈥嬧€?/p>

馃専鈥嬧€?锛堟敞锛氭牴鎹湡瀹炲ぉ姘旀儏鍐垫洿鏂版彁绀轰俊鎭級 鈥嬧€?馃専鈥嬧€?锛堝锛氫粖鏃ラ槼鍏夋槑濯氾紝閫傚悎澶栧嚭閮婃父绛夛級 鈥嬧€?馃専鈥嬧€?銆? 鈥嬧€?馃専鈥嬧€?锛堟敞锛氭彁閱掔敤鎴锋敞鎰忛槻鏅掋€佹惡甯﹂洦鍏风瓑锛? 鈥嬧€?馃専鈥嬧€?銆? 鈥嬧€?馃専鈥嬧€?锛堟敞锛氬畾鏈熸洿鏂伴鎶ヤ俊鎭互搴斿鍙樺寲鏃犲父鐨勫ぉ姘旀儏鍐碉級鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?銆? 锛堟敞锛氶殢鏃舵彁渚涘噯纭殑棰勬姤淇℃伅浠ヤ繚鎸佺敤鎴峰畨鍏ㄥ嚭琛屻€傦級 鈥嬧€嬧€嬶紙鈥嬮€氳繃 API 鎺ュ彛瀹炵幇鐨勫ぉ姘斿姩鎬佹樉绀鸿鐢ㄦ埛瀵瑰綋鍦版皵鍊欐洿鏀惧績銆傦級鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?銆?/p>

鍚屾椂璇锋敞鎰忓畨鍏ㄥ嚭琛屽摝锛佹効姣忎竴娆″嚭琛岄兘鍏呮弧闃冲厜涓庡笇鏈涳紒馃槉馃寛馃殫馃寘鉁?馃専鉁ㄢ€嬧€?銆傗€嬩笅闈粙缁嶅浣曞皢椤圭洰鍙戝竷鍒扮ぞ鍖猴細鈥嬪皢椤圭洰涓婁紶鍒癎itHub鎴栦釜浜虹綉绔欐槸鍒嗕韩缁欑ぞ鍖虹殑绗竴姝ャ€傞€氳繃鍒嗕韩浣犵殑椤圭洰鎴愭灉鍜屼唬鐮佹洿鏀硅褰曪紝浣犲彲浠ョН绱疂璐电殑缁忛獙骞舵敹鑾峰叾浠栧紑鍙戣€呯殑鍙嶉鍜屽缓璁€傝繖涓繃绋嬭褰曚簡浣犱粠闆跺紑濮嬫瀯寤洪」鐩殑瀹屾暣杩囩▼鈥斺€斾粠鍩烘湰姒傚康鐨勪簡瑙ｃ€佸伐鍏风殑閫夋嫨鍒颁唬鐮佺殑缂栧啓鍜岄」鐩殑瀹炵幇銆傝璁颁綇锛屽墠绔紑鍙戞槸涓€涓寔缁涔犵殑杩囩▼锛屼笉鏂湴瀹炶返鍜屾帰绱㈡柊鎶€鏈槸鎻愬崌鎶€鑳界殑鍏抽敭銆備笉鏂湴瀹屽杽鍜屼紭鍖栦綘鐨勯」鐩嚦鍏抽噸瑕併€傚悓鏃跺湪杩欎釜杩囩▼涓煿鍏诲洟闃熷悎浣滅簿绁炰篃闈炲父閲嶈鍝︼紒璁╃煡璇嗗拰鎶€鏈负浣犲紑鍚柊鐨勫緛绋嬪惂锛佸姞娌瑰紑鍙戣€呬滑锛佽鎴戜滑鍏卞悓鍒涢€犳洿缇庡ソ鐨勬湭鏉ワ紒馃専鉁煔€馃挭