整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html自學教程(九)終章

          html鑷鏁欑▼錛堜節錛夌粓绔?/br>

          html5 Canvas杞崲

          Canvas鍏冪礌鍙互琚漿鎹?/p>

          渚嬪,鍦ㄥ潗鏍?20,40)鐨勭敾甯冧笂鍐欏叆鏂囨湰

          ctx.font="bold 20px Arial";

          ctx.textAlign="Hello World";

          ctx.fillText("Hello World",20,40);

          translate(x,y)鏂規硶鐢ㄤ簬縐誨姩canvas.

          x琛ㄧず姘村鉤縐誨姩緗戞牸鐨勮窛紱?y琛ㄧず鍨傜洿縐誨姩緗戞牸鐨勮窛紱?/p>

          ctx.translate(100,500);

          ctx.fillText("after translate",20,40)

          鍦ㄦ渚嬪瓙涓?鐢誨竷鍚戝彸縐誨姩100鍍忕礌,鍚戜笅縐誨姩500鍍忕礌

          rotate()鏂規硶鐢ㄤ簬鏃嬭漿html5鐢誨竷

          涓嬮潰鏄緗棆杞箣鍓嶅拰涔嬪悗緇樺埗鐩稿悓鐭╁艦鐨勪緥瀛?

          ctx.fillStyle="#FF0000";

          ctx.fillRect(10,10,100,100);

          ctx.rotate((Math.PI/180)*25); //rotate 25 degree

          ctx.fillStyle="#0000FF";

          ctx.fillRect(10,10,100,100);

          scale()鏂規硶緙╂斁褰撳墠緇樺浘鑷蟲洿澶ф垨鏇村皬.

          娉ㄦ剰:濡傛灉浣犲緇樼敾榪涜緙╂斁,鎵€鏈変箣鍚庣殑緇樺浘涔熶細琚緝鏀?瀹氫綅涔熶細琚緝鏀?濡傛灉浣犺緗畇cale(2,2)閭d箞緇樺浘灝嗗畾浣嶄簬璺濈鐢誨竷宸︿笂瑙掍袱鍊嶈繙鐨勪綅緗?/p>

          瀹炰緥

          緇樺埗涓€涓煩褰?鏀懼ぇ鍒?鍊?鍐嶆緇樺埗鐭╁艦;鏀懼ぇ鍒?鍊?鍐嶆緇樺埗鐭╁艦;鏀懼ぇ鍒?鍊?鍐嶆緇樺埗鐭╁艦

          var c=document.getElementById("myCanvas");

          var ctx=c.getContext("2d");

          ctx.strokeRect(5,5,25,15);

          ctx.scale(2,2);

          ctx.stokeRect(5,5,25,15);

          ctx.scale(2,2);

          ctx.strokeRect(5,5,25,15);

          ctx.scale(2,2);

          ctx.strokeRect(5,5,25,15);

          浜?html5琛ㄥ崟涓€

          html5浣峸eb琛ㄥ崟鍒涘緩甯︽潵浜嗗緢澶氭柊鐗規€?娣誨姞浜嗗涓柊灞炴€у拰杈撳叆綾誨瀷,榪欎簺鏂扮壒鎬ф彁渚涗簡鏇村ソ鐨勮緭鍏ユ帶鍒跺拰楠岃瘉

          html5涓殑琛ㄥ崟鍒涘緩鏂瑰紡涓巋tml涓€鏍?

          <form>

          <input type="text" name="username" />

          </form>

          placeholder灞炴€?/strong>

          html5娣誨姞浜嗕竴涓悕涓簆laceholder鐨勬柊灞炴€?鍦?lt;input>鍜?lt;textarea>鍏冪礌涓?姝ゅ睘鎬ф彁渚涗竴縐嶆彁紺?鎻忚堪杈撳叆鍩熸墍鏈熷緟鐨勫€?/p>

          綆€鐭殑鎻愮ず鍦ㄧ敤鎴瘋緭鍏ュ€煎墠,浼氭樉紺哄湪杈撳叆鍩熶笂

          瀹炰緥

          <form>

          <input type="text" name="fname" placeholder="First name" />

          <input type="text" name="lname" placeholder="Last name" />

          <input type="submit" value="鎻愪氦鍚?楠氬勾" />

          </form>

          榪愯鏁堟灉濡備笅:

          autofocus灞炴€?/strong>

          褰撹〃autofocus灞炴€ц瀹氬湪欏甸潰鍔犺澆鏃?鍩熻嚜鍔ㄥ湴鑾峰緱鐒︾偣

          瀹炰緥

          璁?First name"input杈撳叆鍩熷湪欏甸潰杞藉叆鏃惰嚜鍔ㄨ仛鐒?

          <form>

          First name:<input type="text" name="fname" autofocus ><br/>

          Last name:<input type="text" name"lname"><br/>

          <input type="submit">

          </form>

          榪愯鏁堟灉濡備笅:

          required灞炴€ц瀹氬繀欏誨湪鎻愪氦涔嬪墠濉啓杈撳叆鍩?涓嶈兘涓虹┖)

          瀹炰緥

          涓嶈兘涓虹┖鐨刬nput瀛楁:

          <form autocomplete="off">

          Username:<input type="text" name="username" required />

          <input type="submit" />

          </form>

          榪愯鏁堟灉濡備笅:

          涓?html5 琛ㄥ崟2

          鏂扮殑鎼滅儲杈撳叆綾誨瀷鍙敤浜庡垱寤烘悳绱㈡

          <input type="search" name="searchitem" />

          <datalist>鍏冪礌瑙勫畾杈撳叆鍩熺殑閫夐」鍒楄〃

          <datalist>灞炴€ц瀹歠orm鎴杋nput鍩熷簲璇ユ嫢鏈夎嚜鍔ㄥ畬鎴愬姛鑳?褰撶敤鎴峰湪鑷姩瀹屾垚鍩熶腑寮€濮嬭緭鍏ユ椂,嫻忚鍣ㄥ簲璇ュ湪璇ュ煙涓樉紺哄~鍐欑殑閫夐」

          瀹炰緥

          <input>鍏冪礌浣跨敤<datalist>棰勫畾涔夊€?/p>

          <input list="browsers" />

          <datalist id="browsers">

          <option value="Internet Exporer">

          <option value="Firefox">

          <option value="Chrome">

          <option value="Opera">

          <option value="Safari">

          </datalist>

          榪愯鏁堟灉濡備笅:

          html5鎷ユ湁澶氫釜鏂扮殑杈撳叆綾誨瀷,鍖呮嫭email,tel,url,data,time絳?/p>

          涓嬮潰鏄竴涓緥瀛?

          <form>

          <input type="email" name="email" placeholder="example@example.com" />

          <br/>

          <input type="tel" name="usrtel" placeholder="666.666.666" />

          <br/>

          <input type="url" name="homepage" placeholder="example.com" />

          </form>

          榪愯鏁堟灉濡備笅:

          鍚庨潰鐨勬枃绔犺繕浼氱戶緇畬鍠刪tml!

          濂斤紝鎴戞槸鍧氭寔鍒嗕韓騫茶揣鐨?EarlGrey錛岀炕璇戝嚭鐗堣繃銆奝ython緙栫▼鏃犲笀鑷€氥€嬨€併€奝ython騫惰璁$畻鎵嬪唽銆嬬瓑鎶€鏈功綾嶃€?/p>


          濡傛灉鎴戠殑鍒嗕韓瀵逛綘鏈夊府鍔╋紝璇?/span>鍏蟲敞鎴?/strong>錛屼竴璧峰悜涓婅繘鍑匯€?/span>

          嫻忚鍣ㄤ笉鏄敤鏉ユ祻瑙堢綉欏點€佽鐪嬬綉緇滆棰戠殑鍚楋紵闅鵑亾榪樺彲浠ュ湪嫻忚鍣ㄩ噷鐮佷唬鐮佸悧錛?/span>


          娌¢敊錛?span style="color: rgb(2, 30, 170);">鐪熺殑鍙互銆傜幇鍦ㄥ凡緇忔湁寰堝綾諱技JSFiddle銆丣SBin榪欐牱鍦ㄧ嚎緙栬緫浠g爜鐨勭綉绔欙紝涓嶈繃鎴戜滑浠婂ぉ瑕佸垎浜殑鏂規硶騫朵笉闇€瑕佹敞鍐岀涓夋柟緗戠珯錛屽彧闇€瑕佸湪嫻忚鍣ㄧ殑鍦板潃鏍忚緭鍏ヤ竴琛屼唬鐮佸嵆鍙€傛垜浠鍏堟潵鐪嬩竴涓嬪叿浣撶殑鏁堟灉銆?/span>



          緙栬緫鍣ㄩ噷鐨凱ython浠g爜


          涓婇潰榪欏箙鍥句腑錛屾垜浠彂鐜板湪嫻忚鍣ㄤ腑鍙互杈撳叆Python浠g爜錛岃€屼笖鏀寔璇硶楂樹寒鍜岃嚜鍔ㄧ緝榪涘姛鑳?/strong>銆傞偅涔堬紝榪欑┒绔熸槸鎬庝箞瀹炵幇鐨勫憿錛?/span>


          榪欏叾瀹炲彲浠ヨ拷婧埌2012騫存椂錛屼竴浣嶅彨Jose Aguinaga鐨勫浗澶栧紑鍙戣€呭湪Coderwall涓婂垎浜殑涓€涓皬璐村+銆?/span>


          灝嗘祻瑙堝櫒鍙樻垚涓€涓畝鏄撴枃鏈紪杈戝櫒



          涓€寮€濮嬬殑鍔熻兘闈炲父綆€鍗曪紝鏍規湰娌℃湁璇硶楂樹寒錛屼篃娌℃湁鑷姩緙╄繘錛屼粎浠呮槸灝嗘祻瑙堝櫒鍙樻垚涓€涓枃鏈紪杈戝櫒鑰屽凡銆?/span>


          Jose鍒嗕韓鐨勪唬鐮佸涓嬶細


          data:text/html, <html contenteditable>


          鍙渶瑕佸皢涓婇潰鐨勪唬鐮佸鍒剁矘璐村埌嫻忚鍣ㄧ殑鍦板潃鏍忥紝鐒跺悗鎸夊洖杞︼紝灝卞彲浠ヨ嫻忚鍣ㄥ彉鎴愮紪杈戝櫒銆傛槸涓嶆槸闈炲父綆€鍗曪紵


          鑳屽悗鐨勫師鐞嗗茍涓嶉珮娣憋紝鍙槸鐢ㄥ埌浜咲ata URI鏍煎紡鑰屽凡銆傝繖琛屼唬鐮佸憡璇夋祻瑙堝櫒娓叉煋涓€涓狧TML欏甸潰錛岃€岃繖涓〉闈㈠叿澶囦竴涓狧5灞炴€э細contenteditable銆?/span>


          Data URI鏄敱RFC 2397瀹氫箟鐨勪竴縐嶆妸灝忔枃浠剁洿鎺ュ祵鍏ユ枃妗g殑鏂規銆傛牸寮忓涓嬶細data:[<MIME type>][;charset=<charset>][;base64],<encoded data>銆傚叾瀹炴暣浣撳彲浠ヨ涓轟笁閮ㄥ垎錛屽嵆澹版槑錛氬弬鏁?鏁版嵁錛岄€楀彿宸﹁竟鐨勬槸鍚勭鍙傛暟錛屽彸杈圭殑鏄暟鎹€?/p>


          璇鋒兂灝濊瘯鐨勬湅鍙嬫敞鎰忥紝榪欒浠g爜鍙€傜敤浜嶤hrome絳夌幇浠f祻瑙堝櫒銆傚鏋滀綘榪樺湪浣跨敤IE8絳夎繃鏃舵祻瑙堝櫒鐨勮瘽錛屾槸娌℃湁鏁堟灉鐨勩€?/span>



          鍑虹幇鍚勭琛嶇敓鐗堟湰



          鐢變簬涓婇潰榪欎釜灝忔妧宸х殑鍑虹幇錛屾縺鍙戜簡璁稿寮€鍙戣€呯殑鐨勬縺鎯咃紝涓嶆柇鍒嗕韓鑷繁鐨勭増鏈€?/span>


          1
          鑷姩鍒囨崲鑳屾櫙棰滆壊


          涓嬮潰榪欐浠g爜錛屽彲浠ヨ緙栬緫鍣ㄥ湪浣犱竴杈規墦瀛楁椂錛屼竴閬嶅垏鎹㈣儗鏅鑹詫細


          data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type='text/css'> html { font-family: 'Open Sans' } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor='#ff'+n+''+n},1e3);var n=;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style='font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;'>

          2
          絎旇鏈牱寮?/span>


          涓嬮潰榪欐浠g爜鍙互灝嗘祻瑙堝櫒欏甸潰鍙樻垚涓€涓瑪璁版湰鐨勬牱寮忥紝鐪嬩笂鍘誨緢鏈夋劅瑙夛細


          data:text/html;charset=utf-8, <title>TextEditor</title> <link rel='shortcut icon' href='http://g.etfv.co/https://docs.google.com'/> <style> html{height:100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding:3%; height:94%;} .paper { font: normal 12px/1.5 'Lucida Grande', arial, sans-serif; width:50%; height:80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color:#444; line-height:20px; border: 1px solid #d2d2d2; background:#fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width:4px; top:0; left:30px; bottom:0; border: 1px solid; border-color: transparent #efe4e4; } textarea{display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height:94%; background: transparent; line-height:20px;} </style> <body spellcheck='false'> <div class='paper'> <textarea autofocus='autofocus'></textarea> </div> </body> </html>


          絎旇鏈牱寮忕殑嫻忚鍣ㄧ紪杈戝櫒


          濡備綍鍙樿韓Python緙栬緫鍣紵



          鎺ヤ笅鏉ワ紝鎴戜滑鏉ョ湅鎬庢牱灝嗘祻瑙堝櫒鎵撻€犳垚Python緙栬緫鍣ㄣ€傚彧闇€瑕佸湪鍦板潃鏍忚緭鍏ヤ笅闈㈢殑浠g爜鍗沖彲錛?/span>


          data:text/html, <style type='text/css'>.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class='e' id='editor'></div><script src='http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js' type='text/javascript' charset='utf-8'></script><script>var e=ace.edit('editor');e.setTheme('ace/theme/textmate');e.getSession().setMode('ace/mode/python');</script>


          榪欐浠g爜鏄敱jdkanani鍦℅ithub涓婂垎浜殑銆?/span>


          浜嬪疄涓婏紝鎴戜滑鍙綆€鍗曚慨鏀逛竴涓嬩笂闈㈢殑浠g爜錛屽氨鍙互椹笂灝嗘祻瑙堝櫒鍙樻垚鍏朵粬璇█鐨勭紪杈戝櫒錛屽寘鎷?strong>Markdown銆丆/C++銆丣avscript銆丣ava絳夊嚑涔庢墍鏈夌紪紼嬭璦€銆備綘鎵€瑕佸仛鐨勶紝鍙槸灝嗕唬鐮佷腑鐨刟ce/mode/python錛屼慨鏀規垚ace/mode/鐩稿簲鐨勮璦€錛堝java錛夊嵆鍙?/strong>銆?/span>


          闄や簡鏀寔澶氱璇█錛屽畠榪樻敮鎸佹洿鏀歸〉闈富棰橈紒Eclipse銆丟ithub銆乀extmate絳変紬澶氱粡鍏鎬富棰橈紝緇熺粺鏀寔錛?/span>


          鍙渶瑕佸皢ace/theme/textmate涓殑textmate鏇挎崲鎴愪綘鍠滄鐨勪富棰樺嵆鍙紝濡俶onokai銆?/span>


          娓叉煋Markdown鏂囨湰



          濡傛灉浣犱範鎯簬鐢∕arkdown璇硶鍐欎綔錛屼綘鎴栬浼氬笇鏈涚洿鎺ュ湪欏甸潰涓煡鐪嬫覆鏌撳悗鐨勬晥鏋溿€傚彧闇€瑕佽緭鍏ヤ笅闈㈣繖琛屼唬鐮佸嵆鍙細


          data:text/html,<style type='text/css'>.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class='e' id='editor'></div><div class='c'></div><script src='http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js' type='text/javascript' charset='utf-8'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js'></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit('editor');e.setTheme('ace/theme/monokai');e.getSession().setMode('ace/mode/markdown');var consoleEl=document.getElementsByClassName('c')[0];var converter=new Showdown.converter;e.commands.addCommand({name:'markdown',bindKey:{win:'Ctrl-M',mac:'Command-M'},exec:function(t){var n=e.getSession().getMode().$id;if(n=='ace/mode/markdown'){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>


          杈撳叆Markdown浠g爜涔嬪悗錛岀劧鍚?span style="color: rgb(2, 30, 170);">鎸塁trl+M鎴朇ommand+M錛屽氨鍙互灝嗕唬鐮佽漿鎹㈡垚HTML銆?/span>



          娓叉煋Markdown浠g爜


          鑳屽悗鐨勫師鐞?/strong>



          鐪嬩簡榪欏嚑涓緥瀛愪箣鍚庯紝澶у鍙兘宸茬粡鏄庣櫧浜嗭細榪欎簺紺轟緥閮芥槸閫氳繃Data URI鏍煎紡璁╂祻瑙堝櫒娓叉煋涓€孌礖TML浠g爜銆傝€岀紪杈戝櫒鐩稿叧鐨勬牱寮忓凡緇忓啓鍦ㄤ簡浠g爜涓€傝繖涓庡皢鐩稿簲鐨凥TML浠g爜鏀懼湪鍗曠嫭鏂囦歡涓墦寮€鐨勬晥鏋滄槸鐩稿悓鐨勩€?/span>


          鑰屽湪鍓嶄袱涓緥瀛愪腑錛屼唬鐮佷腑瀹為檯鐢ㄥ埌浜嗕竴涓彨ace.js鐨勬枃浠訛紝涓嶇煡閬撳ぇ瀹舵敞鎰忓埌娌℃湁錛熸嵁灝忕紪浜嗚В錛孉ce鏄竴涓敤JavaScript緙栧啓鐨勫彲宓屽叆寮忎唬鐮佺紪杈戝櫒錛屾嵁縐板拰Sublime銆乂im鍜孴extMate絳夊師鐢熺紪杈戠殑鍔熻兘鍜屾€ц兘鐩稿綋銆傝€屼笖錛屽畠榪樺彲浠ラ潪甯稿鏄撴淮宓屽叆鍒頒換鎰忕綉欏墊垨JavaScript搴旂敤涓€?/span>


          鑰孉ce涔熸槸涓€涓彨Cloud9IDE鐨勫湪綰塊泦鎴愬紑鍙戠幆澧冩墍浣跨敤鐨勪富瑕佺紪杈戝櫒銆傚叿浣撴晥鏋滆鐪嬩笅鍥撅細



          Cloud9IDE 緙栬緫鍣ㄦ晥鏋?/span>


          SlimText



          紼嬪簭鍛橀兘鏄埍鎶樿吘鐨勭墿縐嶃€傛湁鐨勫紑鍙戣€呰繕鏄笉婊¤凍浜庝笂闈㈤偅縐嶆墜鍔ㄨ緭鍏ヤ唬鐮併€佸皢嫻忚鍣ㄥ彉鎴愮紪杈戝櫒鐨勬柟娉曪紝鐢氳嚦鏄洿鎺ュ皢鐪熸鐨勭紪杈戝櫒鎼埌浜嗘祻瑙堝櫒涓繍琛屻€傝繖灝辨槸鎴戜滑鏈€鍚庤浠嬬粛鐨凷limText錛屼笅闈㈡槸鍏蜂綋鎴浘銆?/span>



          SlimText鎴浘


          濡傛埅鍥炬墍紺猴紝SlimText鏄竴涓湡姝g殑嫻忚鍣ㄧ浠g爜緙栬緫鍣紝浠hrome鎻掍歡鐨勫艦寮忓瓨鍦紝鏂囦歡緇撴瀯銆佹枃浠舵悳绱€佹枃浠朵繚瀛樼瓑鍔熻兘涓€搴斿叿鏈夈€傚畠鏄?span style="color: rgb(2, 30, 170);">涓€浣嶅悕鍙玹ylerlong鐨勫浗浜哄紑鍙戠殑錛屾敮鎸乄indows銆丩inux鍜孧ac OS X絳夊涓鉤鍙般€?/span>



          - EOF -

          鏂囩珷宸茬粡鐪嬪埌榪欎簡錛?strong>鍒繕浜嗗湪鍙充笅瑙掔偣涓€滆禐鈥濆拰鈥滃湪鐪嬧€濋紦鍔卞摝~


          鐐瑰嚮鏍囬鍙煩杞?/span>



          鍥炲鍏抽敭璇嶃€?pybook03銆嶏紝棰嗗彇榪涘嚮鐨凣rey涓庡皬浼欎即涓€璧風炕璇戠殑銆奣hink Python 2e銆嬬數瀛愮増
          鍥炲鍏抽敭璇嶃€?strong>涔﹀崟02銆嶏紝棰嗗彇榪涘嚮鐨凣rey鏁寸悊鐨?10 鏈?Python 鍏ラ棬涔︾殑鐢靛瓙鐗?/span>



          鍛婅瘔浣犳洿澶氱粏鑺傚共璐?/span>


          嬈㈣繋鍥磋鎴戠殑鏈嬪弸鍦?/span>

          馃憜姣忓ぉ鏇存柊鎵€鎯蟲墍鎮?/span>

          html寮€鍙戜腑錛岃〃鍗曟槸欏甸潰涓婇噸瑕佺殑鍐呭錛岀敤鎴瘋緭鍏ュ唴瀹瑰ぇ閮ㄥ垎鍐呭閮芥槸閫氳繃琛ㄥ崟鏀墮泦鐨勶紝鍦╤tml4涓〃鍗曞厓绱犳槸鐩稿綣佺悙鐨勶紝鍦╤tml5涓紝鍚哥撼浜唚eb forms2.0鏍囧噯錛屽ぇ澶у姞寮轟簡閽堝琛ㄥ崟鍏冪礌鐨勫姛鑳姐€備笅闈負澶у浠嬬粛html5涓柊澧炵殑琛ㄥ崟鍏冪礌銆?/p>

          form鍏冪礌

          鍦╤tml4涓〃鍗曞唴鐨勪粠灞炲厓绱犲繀欏誨啓鍦ㄨ〃鍗曞唴閮紝鍦╤tml5涓病鏈夎繖涓檺鍒訛紝鍙互鍐欏湪欏甸潰浠諱綍鍦版柟錛岀劧鍚庣粰璇ュ厓绱犱竴涓猣rom灞炴€э紝灞炴€у€間負璇ヨ〃鍗曠殑id錛岃繖鏍峰氨鍙互澹版槑璇ュ厓绱犱粠灞炰簬鎸囧畾鐨勮〃鍗曚簡銆傜ず渚嬩唬鐮侊細<form id="test"><input type="text"></form><textarea form="test"></textarea>textarea灞炴€ц鍐欏湪form琛ㄥ崟涔嬪錛屼絾瀹冧粠灞炰簬form琛ㄥ崟錛屾墍浠ュ皢form琛ㄥ崟id鎸囧畾緇檛extarea鍏冪礌鐨刦orm灞炴€с€傝繖鏍風殑濂藉鍦ㄤ簬鎴戜滑鍙互鏂逛究娣誨姞鍏冪礌鐨勬牱寮忥紝鍥犱負瀹冧滑涓嶆槸鍒嗘暎鍦ㄥ悇琛ㄥ崟涔嬪唴銆備笉榪囩幇鍦ㄥ彧鏄儴鍒嗘祻瑙堝櫒鏀寔榪欎竴灞炴€с€?/p>

          formaction灞炴€?/strong>

          鍦╤tml4涓紝涓€涓〃鍗曟墍鏈夌殑鍏冪礌鍙兘閫氳繃琛ㄥ崟鐨刟ction灞炴€х粺涓€鎻愪氦鍙︿竴欏甸潰錛岃€屽湪HTML5涓彲浠ョ粰鎵€鏈夌殑鎻愪氦鎸夐挳錛?lt;input type="submit">銆?lt;input type="image">銆?lt;button type="submit">錛夛紝閮藉鍔犱簡涓嶅悓鐨刦ormaction灞炴€э紝鐐瑰嚮涓嶅悓鐨勬寜閽彁浜ょ粰涓嶅悓鐨勯〉闈€?/p>

          placeholder灞炴€?/strong>

          placeholder鏄寚褰撴枃鏈錛?lt;input type="text">鎴?lt;textarea>錛夊浜庢湭杈撳叆鐘舵€佹椂鏂囨湰妗嗘樉紺虹殑杈撳叆鎻愮ず銆傚彧瑕佸姞涓婁簡placeholder灞炴€э紝鍦ㄦ寚瀹氭彁紺烘枃瀛楀氨鍙互浜嗐€?/p>

          autofocus灞炴€?/strong>

          緇欐枃鏈銆侀€夋嫨妗嗘垨鎸夐挳鍔犱笂璇ュ睘鎬э紝褰撶敾闈㈡墦寮€鏃訛紝鎺т歡鑷姩鑾峰緱鐒︾偣銆傚湪html4涓仛鍒拌繖涓晥鏋滈渶瑕佷嬌鐢↗avaScript濡傗€渃ontrol.focus()鈥濄€備笉寤鴻闅忔剰浣跨敤璇ュ睘鎬э紝姣斿鎼滅儲欏甸潰涓殑鎼滅儲鏂囨湰妗嗐€?/p>

          list灞炴€?/strong>

          鍦╤tml5涓紝涓哄崟琛屾枃鏈澧炲姞浜嗕竴涓猯ist灞炴€э紝璇ュ睘鎬х殑鍊間負鏌愪釜datelist鍏冪礌鐨刬d銆俤atelist涔熸槸html5鏂板鐨勫厓绱狅紝璇ュ厓绱犵被浼奸€夋嫨妗嗭紙select錛夈€備絾鏄綋鐢ㄦ埛鎯寵璁懼畾鐨勫€間笉鍦ㄩ€夋嫨鍒楄〃鏃訛紝鍏佽鑷杈撳叆銆傝鍏冪礌鏈韓騫朵笉鏄劇ず錛岃€屾槸鏂囨湰妗嗚幏寰楃劍鐐規椂鎻愮ず杈撳叆鐨勬柟寮忔樉紺恒€備負浜嗛伩鍏嶅湪娌℃湁鏀寔鍏冪礌鐨勬祻瑙堝櫒鏄劇ず閿欒錛屽彲浠ョ敤css灝嗗畠璁劇疆涓轟笉鏄劇ず銆?/p>

          autocomplete灞炴€?/strong>

          杈呭姪杈撳叆鎵€鏈夌殑鑷姩瀹屾垚鍔熻兘錛岃妭鐪佽緭鍏ユ椂闂達紝鍚屾椂涔熷崄鍒嗘柟渚褲€傚彲浠ユ寚瀹氣€渙n鈥濄€佲€渙ff鈥濄€佲€滀笉鎸囧畾鈥濊繖涓夌鍊鹼紝涓嶆寚瀹氭椂錛屽彇鍐沖悇涓祻瑙堝櫒銆傚睘鎬т負on鏃訛紝鍙互鏄劇ず鎸囧畾鍊欒ˉ杈撳叆鐨勬暟鎹垪琛紝off鍙嶄箣銆?/p>

          濡傛灉鏈夋紡鎺夊叾浠栨柟娉曪紝嬈㈣繋澶у琛ュ厖銆傛瘡澶╁涔犱竴涓煡璇嗙偣錛屾瘡鏃ュ瘎璇€滃け璐ュ彧鏈変竴縐嶏紝閭e氨鏄崐閫旇€屽簾銆傗€?/p>


          主站蜘蛛池模板: 中文字幕一区二区三区免费视频| 精品无码国产一区二区三区麻豆| 国偷自产一区二区免费视频| 国产福利一区二区| 国产av一区最新精品| 激情久久av一区av二区av三区| 加勒比无码一区二区三区| 丝袜美腿一区二区三区| 在线观看中文字幕一区| 色噜噜一区二区三区| 亚洲毛片不卡av在线播放一区| 亚洲国产成人久久一区WWW | 精品久久久久久中文字幕一区| 在线精品一区二区三区电影| 国产成人无码精品一区不卡| 国产麻豆剧果冻传媒一区| 国产日韩视频一区| 亚洲第一区精品观看| 国产一区二区三区久久| 日韩精品无码一区二区中文字幕| 91一区二区三区四区五区| 国产欧美一区二区精品仙草咪 | 一区二区三区www| 中文字幕在线观看一区二区 | 香蕉久久ac一区二区三区| 国产91精品一区| 国产肥熟女视频一区二区三区 | 亲子乱av一区二区三区| 无码精品人妻一区二区三区漫画| 亚洲av无码一区二区三区天堂古代| 国产精品视频一区二区三区经| 在线观看一区二区三区视频| 乱色熟女综合一区二区三区| 国产精品一区二区av| 韩国理伦片一区二区三区在线播放| 国产成人一区二区在线不卡| 国产无码一区二区在线| 精品一区二区三区在线观看视频| 亚洲码欧美码一区二区三区| 无码精品人妻一区| 一区二区三区在线免费看|