xxxx日本少妇做受,古典武侠,人妻,狠狠,久久,国产99视频精品免费视频76

\r\n \r\n

\r\n 測(cè)試type屬性\r\n <\/legend>\r\n color:\r\n <\/label>\r\n \r\n date:\r\n <\/label>\r\n \r\n datetime:\r\n <\/label>\r\n \r\n datetime-local:\r\n <\/label>\r\n \r\n month:\r\n <\/label>\r\n \r\n week:\r\n <\/label>\r\n \r\n time:\r\n <\/label>\r\n \r\n email:\r\n <\/label>\r\n \r\n number:\r\n <\/label>\r\n \r\n range:\r\n <\/label>\r\n \r\n search:\r\n <\/label>\r\n \r\n tel:\r\n <\/label>\r\n \r\n \r\n <\/fieldset>\r\n <\/form>\r\n <\/body>\r\n <\/html><\/pre><\/strong><\/p><\/li>運(yùn)行效果<\/ul>
$\"關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹\"$ <\/p>
<\/p>
<\/h3>input新type屬性.png
新type屬性的注意要點(diǎn)
* 點(diǎn)擊不同type的input標(biāo)簽會(huì)有不一樣的彈出內(nèi)容\r\n* 如果發(fā)現(xiàn)w3cschool內(nèi)容不全,建議去MDN搜索\r\n* 并不是每一個(gè)新type屬性,在PC端都有不同的顯示\r\n* color, date, number 這些效果較為明顯<\/pre><\/strong><\/p><\/li>相容性問(wèn)題
<\/p><\/li>
由於ie的相容性的問(wèn)題,在不同的瀏覽器中顯示效果不盡相同
<\/p><\/li>
但是在行動(dòng)裝置上的支援效果較好,可以將該頁(yè)面?zhèn)魉偷绞謾C(jī)進(jìn)行測(cè)試
<\/p><\/li><\/ul> 實(shí)際開(kāi)發(fā)中可以依照需求選用<\/ul>
<\/a><\/h2>input
表單驗(yàn)證
<\/code><\/p><\/blockquote>
<\/h3><\/a><\/p><\/blockquote> ##用戶在輸入內(nèi)容的時(shí)候不可能做到全部正確,比如<\/a>email地址``電話長(zhǎng)度<\/p>等等都有可能出現(xiàn)輸入錯(cuò)誤,試想一下,當(dāng)用戶辛辛苦苦的輸入了10多個(gè)表單內(nèi)容,點(diǎn)選提交由於輸入錯(cuò)誤,內(nèi)容被清空了<\/li> w3cSchool 查閱位置<\/p><\/li>##下面把<\/ul>api 文件的查閱位置加如下<\/h3><\/code>[w3cSchool_事件<\/code>屬性]w3School<\/code><\/code>[w3cSchool_input標(biāo)籤]w3cSchool<\/p><\/blockquote>#[w3cSchool_input標(biāo)籤]w3cSchool <\/strong>#email標(biāo)籤<\/p><\/li>在H5中的input的新<\/a>type<\/code>屬性email<\/code>自帶格式驗(yàn)證<\/p><\/li> <\/code>範(fàn)例程式碼:<\/p><\/li><\/ul><\/ul> 當(dāng)我們點(diǎn)擊提交<\/p>按鈕 <\/p>時(shí),如果輸入的 email格式不正確,會(huì)彈出提示訊息<\/a><\/h3><\/p>email<\/blockquote>標(biāo)籤並不會(huì)驗(yàn)證內(nèi)容是否為空，這個(gè)需要注意 <\/strong><\/p><\/li> #email自帶提示.png \r\n\r\n\r\n \r\n Title<\/title>\r\n<\/head>\r\n<body> <h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\r\n<form action=\"\">\r\n email:<input type=\"email\" name=\"userEmail\">\r\n <br\/>\r\n <input type=\"submit\">\r\n<\/form>\r\n<\/body>\r\n<\/html><\/pre><code><\/code>require<\/p>d屬性<\/li><\/ul><li>對(duì)於沒(méi)有自帶驗(yàn)證效果的標(biāo)籤,就需要手動(dòng)新增屬性增加驗(yàn)證了<p><strong><\/strong><\/p><\/li><ul class=\" list-paddingleft-2\" style=\"list-style-type: square;\">使用方法:<li><p><a href=\"http:\/\/www.miracleart.cn\/js\/js-jspopular-guide-widget.html\" target=\"_blank\"><\/a><\/p><\/li>只需要加入<\/ul>required<\/ul>屬性即可,不需要賦值<p class=\"image-package\"><img src=\"\/\/upload-images.jianshu.io\/upload_images\/4414359-efad3b75c6c255fa.png?imageMogr2\/auto-orient\/strip%7CimageView2\/2\/w\/1240\"\/ alt=\"關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹\" ><br\/> <\/p><p class=\"image-caption\"><\/p>#範(fàn)例程式碼:<h3><a href=\"http:\/\/www.miracleart.cn\/php\/php-tp-validatieregel.html\" target=\"_blank\"><\/a><\/h3><blockquote><p>當(dāng)<code>控制項(xiàng)<\/code>沒(méi)有輸入任何內(nèi)容直接點(diǎn)擊提交時(shí),會(huì)彈出提示<\/p><\/blockquote><ul class=\" list-paddingleft-2\"><li><p><strong><\/strong><\/p><\/li><ul class=\" list-paddingleft-2\" style=\"max-width:90%\"><li><p><code><\/code><\/p><\/li>##required屬性.png<li><pre class='brush:php;toolbar:false;'><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n<\/head>\r\n<body>\r\n<form action=\"\">\r\n email:<input type=\"email\" name=\"userEmail\">\r\n <br\/>\r\n tel:<input type=\"tel\" required>\r\n <br\/>\r\n <input type=\"submit\">\r\n<\/form>\r\n<\/body>\r\n<\/html><\/pre><p>pattern 自訂<a href=\"http:\/\/www.miracleart.cn\/wiki\/588.html\" target=\"_blank\">驗(yàn)證規(guī)則<\/a><\/p><\/li><\/ul>#使用<li>required<p>標(biāo)籤只能夠驗(yàn)證內(nèi)容是否為空,如果想要驗(yàn)證的更為準(zhǔn)確就需要自訂驗(yàn)證規(guī)則了<strong><\/strong><\/p> <\/li><ul class=\" list-paddingleft-2\" style=\"list-style-type: square;\"><li>使用方法:<p><\/p><\/li><\/ul><\/ul><p class=\"image-package\">#在需要新增自訂驗(yàn)證規(guī)則的元素中新增<img src=\"\/\/upload-images.jianshu.io\/upload_images\/4414359-cc27f62eb23d650a.png?imageMogr2\/auto-orient\/strip%7CimageView2\/2\/w\/1240\"\/ alt=\"關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹\" >required<br\/>標(biāo)籤<\/p><p class=\"image-caption\"><\/p>###使用###正規(guī)表示式###編寫(xiě)驗(yàn)證規(guī)則##################範(fàn)例程式碼:##### #############當(dāng)我們輸入的內(nèi)容跟驗(yàn)證條件不符時(shí),就會(huì)彈出對(duì)應(yīng)的提示#################### #######自訂驗(yàn)證.png####<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n<\/head>\r\n<body>\r\n<form action=\"\">\r\n email:<input type=\"email\" name=\"userEmail\">\r\n <br\/>\r\n tel:<input type=\"tel\" required pattern=\"[0-9]{3}\">\r\n <br\/>\r\n <input type=\"submit\">\r\n<\/form>\r\n<\/body>\r\n<\/html><\/pre><h3>自定義驗(yàn)證信息<\/h3><blockquote><p>系統(tǒng)的提示消息只能夠提示格式錯(cuò)誤,如果想要更為詳細(xì)的就需要我們通過(guò)js來(lái)自定義了<\/p><\/blockquote><ul class=\" list-paddingleft-2\"><li><p><strong>使用方法:<\/strong><\/p><\/li><ul class=\" list-paddingleft-2\" style=\"list-style-type: square;\"><li><p>注冊(cè)事件:<code>oninput:輸入時(shí)<\/code>,<code>oninvalid驗(yàn)證失敗<\/code><\/p><\/li><li><p>設(shè)置自定義信息<code>dom.setCustomValidity(\"這里輸入提示信息\");<\/code><\/p><\/li><\/ul><li><p><strong>示例代碼:<\/strong><\/p><\/li><ul class=\" list-paddingleft-2\" style=\"list-style-type: square;\"><li><p>輸入時(shí),會(huì)彈出<code>oninput<\/code>綁定的代碼<\/p><\/li><\/ul><\/ul><p class=\"image-package\"><img src=\"\/\/upload-images.jianshu.io\/upload_images\/4414359-458a0f67e72eda17.png?imageMogr2\/auto-orient\/strip%7CimageView2\/2\/w\/1240\"\/ alt=\"關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹\" ><br\/><\/p><p class=\"image-caption\">輸入中.png<\/p><ul class=\" list-paddingleft-2\"><li><p>驗(yàn)證失敗時(shí),會(huì)彈出<code>oninvalid<\/code>綁定的代碼<\/p><p class=\"image-package\"><img src=\"\/\/upload-images.jianshu.io\/upload_images\/4414359-31b1902f9a214a47.png?imageMogr2\/auto-orient\/strip%7CimageView2\/2\/w\/1240\"\/ alt=\"關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹\" ><br\/><\/p><p class=\"image-caption\">驗(yàn)證失敗.png<\/p><\/li><\/ul><pre class='brush:php;toolbar:false;'> <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Title<\/title>\r\n<\/head>\r\n<body>\r\n<form action=\"\">\r\n email:<input type=\"email\" name=\"userEmail\">\r\n <br\/>\r\n tel:<input type=\"tel\" required pattern=\"[0-9]{3}\" id=\"telInput\">\r\n <br\/>\r\n <input type=\"submit\">\r\n<\/form>\r\n<\/body>\r\n<\/html>\r\n <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <script>var V_PATH="/";window.onerror=function(){ return true; };</script> </head> <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2"> <link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css"> <header> <div id="377j5v51b" class="head"> <div id="377j5v51b" class="haed_left"> <div id="377j5v51b" class="haed_logo"> <a href="http://www.miracleart.cn/zh-tw/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="377j5v51b" class="head_nav"> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="社群" class="head_nava head_nava-template1">社群</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh-tw/article.html" title="文章" class="languagechoosea on">文章</a> <a href="http://www.miracleart.cn/zh-tw/faq/zt" title="合集" class="languagechoosea">合集</a> <a href="http://www.miracleart.cn/zh-tw/wenda.html" title="問(wèn)答" class="languagechoosea">問(wèn)答</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh-tw/course.html" title="課程" class="languagechoosea on">課程</a> <a href="http://www.miracleart.cn/zh-tw/dic/" title="程式設(shè)計(jì)字典" class="languagechoosea">程式設(shè)計(jì)字典</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="工具庫(kù)" class="head_nava head_nava-template1_2">工具庫(kù)</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools" title="開(kāi)發(fā)工具" class="languagechoosea on">開(kāi)發(fā)工具</a> <a href="http://www.miracleart.cn/zh-tw/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a> <a href="http://www.miracleart.cn/zh-tw/toolset/php-libraries" title="PHP 函式庫(kù)" class="languagechoosea">PHP 函式庫(kù)</a> <a href="http://www.miracleart.cn/zh-tw/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a> <a href="http://www.miracleart.cn/zh-tw/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a> <a href="http://www.miracleart.cn/zh-tw/toolset/extension-plug-ins" title="擴(kuò)充插件" class="languagechoosea on">擴(kuò)充插件</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://www.miracleart.cn/zh-tw/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="休閒" class="head_nava head_nava-template1_3">休閒</a> <div class="377j5v51b" id="dropdown-template1_3" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh-tw/game" title="遊戲下載" class="languagechoosea on">遊戲下載</a> <a href="http://www.miracleart.cn/zh-tw/mobile-game-tutorial/" title="遊戲教程" class="languagechoosea">遊戲教程</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('zh-tw')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="搜尋" onclick="searchs('zh-tw')"><img src="/static/imghw/find.png" alt="搜尋"></a> </div> <div id="377j5v51b" class="head_right"> <div id="377j5v51b" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">繁體中文<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="377j5v51b" id="dropdown-template" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a> <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a> <a href="javascript:;" title="繁體中文" class="languagechoosea">繁體中文</a> <a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a> <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a> <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a> <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a> <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a> </div> </div> </div> <span id="377j5v51b" class="head_right_line"></span> <div style="display: block;" id="login" class="haed_login "> <a href="javascript:;" title="Login" class="haed_logina ">Login</a> </div> <div style="display: block;" id="reg" class="head_signup login"> <a href="javascript:;" title="singup" class="head_signupa">singup</a> </div> </div> </div> </header> <main> <div id="377j5v51b" class="Article_Details_main"> <div id="377j5v51b" class="Article_Details_main1"> <div id="377j5v51b" class="Article_Details_main1L"> <div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain"> <div id="377j5v51b" class="Article_Details_main1L1">目錄</div> <div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">  <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#新type-a-href-http-www-php-cn-wiki-html-target-blank-屬性-a-介紹" title="新type<a href="http://www.miracleart.cn/wiki/169.html" target="_blank">屬性</a>介紹" >新type<a href="http://www.miracleart.cn/wiki/169.html" target="_blank">屬性</a>介紹</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#文件的查閱位置加如下" title="文件的查閱位置加如下" >文件的查閱位置加如下</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#email-a-href-http-www-php-cn-wiki-html-target-blank-格式不正確-會(huì)彈出提示訊息-a" title="email<a href="http://www.miracleart.cn/wiki/136.html" target="_blank">格式不正確,會(huì)彈出提示訊息</a>" >email<a href="http://www.miracleart.cn/wiki/136.html" target="_blank">格式不正確,會(huì)彈出提示訊息</a></a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#自定義驗(yàn)證信息" title="自定義驗(yàn)證信息" >自定義驗(yàn)證信息</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#總結(jié)" title="總結(jié)" >總結(jié)</a> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main1M"> <div id="377j5v51b" class="phpgenera_Details_mainL1"> <a href="http://www.miracleart.cn/zh-tw/" title="首頁(yè)" class="phpgenera_Details_mainL1a">首頁(yè)</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/zh-tw/web-designer.html" class="phpgenera_Details_mainL1a">web前端</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/zh-tw/html5-tutorial.html" class="phpgenera_Details_mainL1a">H5教程</a> <img src="/static/imghw/top_right.png" alt="" /> <span>關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://www.miracleart.cn/zh-tw/member/1506.html" class="author_avatar"> <img class="lazy" data-src="https://img.php.cn/upload/avatar/000/001/506/5922afcbb3cf4752.jpg" src="/static/imghw/default1.png" alt="零下一度"> </a> <div id="377j5v51b" class="author_detail"> <a href="http://www.miracleart.cn/zh-tw/member/1506.html" class="author_name">零下一度</a> </div> </div> </div> <span id="377j5v51b" class="Articlelist_txts_time">May 14, 2018 pm 04:26 PM</span> </div> </div> <hr /> <div id="377j5v51b" class="article_main php-article"> <div id="377j5v51b" class="article-list-left detail-content-wrap content"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3461856641"> </ins> <h3 id="新type-a-href-http-www-php-cn-wiki-html-target-blank-屬性-a-介紹">新type<a href="http://www.miracleart.cn/wiki/169.html" target="_blank">屬性</a>介紹</h3> <ul class=" list-paddingleft-2"><li><p>首先讓我們來(lái)看一張表格</p></li></ul> <p class="image-package"><img src="/static/imghw/default1.png" data-src="http://upload-images.jianshu.io/upload_images/4414359-529ae67cdb9e75c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="lazy" style="max-width:90%" style="max-width:90%" alt="關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹" ><br></p> <p class="image-caption"><a href="http://www.miracleart.cn/wiki/1118.html" target="_blank">HTML5</a>中的type.png</p> <pre class="brush:php;toolbar:false">其中標(biāo)有`紅色5`的代表`HTML5`中推出的</pre> <ul class=" list-paddingleft-2"><li><p><strong>測(cè)試程式碼:</strong></p></li></ul> <ul class=" list-paddingleft-2"><li> <p> <pre class='brush:php;toolbar:false;'> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> form { width: 80%; background-color: #F7F7F7; } label { display: block; width: 80%; margin: 0 auto; font-size: 30px; font-weight: bold; } input { display: block; width: 80%; margin: 0 auto; } </style> </head> <body> <form action=""> <fieldset> <legend>測(cè)試type屬性 </legend> <label for="">color: </label> <input type="color"> <label for="">date: </label> <input type="date"> <label for="">datetime: </label> <input type="datetime"> <label for="">datetime-local: </label> <input type="datetime-local"> <label for="">month: </label> <input type="month"> <label for="">week: </label> <input type="week"> <label for="">time: </label> <input type="time"> <label for="">email: </label> <input type="email"> <label for="">number: </label> <input type="number"> <label for="">range: </label> <input type="range"> <label for="">search: </label> <input type="search"> <label for="">tel: </label> <input type="tel"> <input type="submit"> </fieldset> </form> </body> </html></pre><strong></strong></p></li>運(yùn)行效果</ul><p class="image-package"><img src="/static/imghw/default1.png" data-src="http://upload-images.jianshu.io/upload_images/4414359-eb2e6b71cedd9686.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="lazy" style="max-width:90%" style="max-width:90%"/ alt="關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹" ><br/></p><p class="image-caption"></p><h3></h3>input新type屬性.png<ul class=" list-paddingleft-2"><li>新type屬性的注意要點(diǎn)<p><pre class="brush:php;toolbar:false">* 點(diǎn)擊不同type的input標(biāo)簽會(huì)有不一樣的彈出內(nèi)容 * 如果發(fā)現(xiàn)w3cschool內(nèi)容不全,建議去MDN搜索 * 并不是每一個(gè)新type屬性,在PC端都有不同的顯示 * color, date, number 這些效果較為明顯</pre><strong></strong></p></li>相容性問(wèn)題<ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p></p></li><li>由於ie的相容性的問(wèn)題,在不同的瀏覽器中顯示效果不盡相同<p></p></li><li>但是在行動(dòng)裝置上的支援效果較好,可以將該頁(yè)面?zhèn)魉偷绞謾C(jī)進(jìn)行測(cè)試<p></p></li></ul> 實(shí)際開(kāi)發(fā)中可以依照需求選用</ul><h2><a href="http://www.miracleart.cn/code/81.html" target="_blank"></a></h2>input<blockquote>表單驗(yàn)證<p><code></code></p></blockquote><h3></h3><blockquote><p><a href="http://www.miracleart.cn/js/js-weixinapp-api.html" target="_blank"></a></p></blockquote><ul class=" list-paddingleft-2"><li><p><a href="http://www.miracleart.cn/js/js-jspopular-guide-event.html" target="_blank">##用戶在輸入內(nèi)容的時(shí)候不可能做到全部正確,比如</a>email地址``電話長(zhǎng)度</p>等等都有可能出現(xiàn)輸入錯(cuò)誤,試想一下,當(dāng)用戶辛辛苦苦的輸入了10多個(gè)表單內(nèi)容,點(diǎn)選提交由於輸入錯(cuò)誤,內(nèi)容被清空了</li><li><p>w3cSchool 查閱位置</p></li>##下面把</ul>api<h3 id="文件的查閱位置加如下">文件的查閱位置加如下</h3><blockquote><p><code></code>[w3cSchool_<code>事件</code>屬性]w3School<code></code><code></code>[w3cSchool_input標(biāo)籤]w3cSchool</p></blockquote><ul class=" list-paddingleft-2">#[w3cSchool_input標(biāo)籤]w3cSchool<li><p><strong> </strong>#email標(biāo)籤</p></li><ul class=" list-paddingleft-2" style="list-style-type: square;">在<li>H5<p>中的<code>input<a href="http://www.miracleart.cn/code/5991.html" target="_blank">的新</a>type</code>屬性<code>email</code>自帶格式驗(yàn)證</p></li><li><p><code></code>範(fàn)例程式碼:</p></li></ul></ul><p class="image-package"><img src="/static/imghw/default1.png" data-src="http://upload-images.jianshu.io/upload_images/4414359-2366601fe744a037.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="lazy"/ alt="關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹" >當(dāng)我們點(diǎn)擊<br/>提交</p>按鈕<p class="image-caption"></p>時(shí),如果輸入的<h3 id="email-a-href-http-www-php-cn-wiki-html-target-blank-格式不正確-會(huì)彈出提示訊息-a">email<a href="http://www.miracleart.cn/wiki/136.html" target="_blank">格式不正確,會(huì)彈出提示訊息</a></h3><blockquote><p></p>email</blockquote>標(biāo)籤並不會(huì)驗(yàn)證內(nèi)容是否為空，這個(gè)需要注意<ul class=" list-paddingleft-2"><li><p><strong></strong></p></li><ul class=" list-paddingleft-2" style="max-width:90%"><li>#email自帶提示.png<p><pre class='brush:php;toolbar:false;'> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> email:<input type="email" name="userEmail"> <br/> <input type="submit"> </form> </body> </html></pre><code></code>require</p>d屬性</li></ul><li>對(duì)於沒(méi)有自帶驗(yàn)證效果的標(biāo)籤,就需要手動(dòng)新增屬性增加驗(yàn)證了<p><strong></strong></p></li><ul class=" list-paddingleft-2" style="list-style-type: square;">使用方法:<li><p><a href="http://www.miracleart.cn/js/js-jspopular-guide-widget.html" target="_blank"></a></p></li>只需要加入</ul>required</ul>屬性即可,不需要賦值<p class="image-package"><img src="/static/imghw/default1.png" data-src="http://upload-images.jianshu.io/upload_images/4414359-efad3b75c6c255fa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="lazy"/ alt="關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹" ><br/> </p><p class="image-caption"></p>#範(fàn)例程式碼:<h3><a href="http://www.miracleart.cn/php/php-tp-validatieregel.html" target="_blank"></a></h3><blockquote><p>當(dāng)<code>控制項(xiàng)</code>沒(méi)有輸入任何內(nèi)容直接點(diǎn)擊提交時(shí),會(huì)彈出提示</p></blockquote><ul class=" list-paddingleft-2"><li><p><strong></strong></p></li><ul class=" list-paddingleft-2" style="max-width:90%"><li><p><code></code></p></li>##required屬性.png<li><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> email:<input type="email" name="userEmail"> <br/> tel:<input type="tel" required> <br/> <input type="submit"> </form> </body> </html></pre><p>pattern 自訂<a href="http://www.miracleart.cn/wiki/588.html" target="_blank">驗(yàn)證規(guī)則</a></p></li></ul>#使用<li>required<p>標(biāo)籤只能夠驗(yàn)證內(nèi)容是否為空,如果想要驗(yàn)證的更為準(zhǔn)確就需要自訂驗(yàn)證規(guī)則了<strong></strong></p> </li><ul class=" list-paddingleft-2" style="list-style-type: square;"><li>使用方法:<p></p></li></ul></ul><p class="image-package">#在需要新增自訂驗(yàn)證規(guī)則的元素中新增<img src="/static/imghw/default1.png" data-src="http://upload-images.jianshu.io/upload_images/4414359-cc27f62eb23d650a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="lazy"/ alt="關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹" >required<br/>標(biāo)籤</p><p class="image-caption"></p>###使用###正規(guī)表示式###編寫(xiě)驗(yàn)證規(guī)則##################範(fàn)例程式碼:##### #############當(dāng)我們輸入的內(nèi)容跟驗(yàn)證條件不符時(shí),就會(huì)彈出對(duì)應(yīng)的提示#################### #######自訂驗(yàn)證.png####<pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> email:<input type="email" name="userEmail"> <br/> tel:<input type="tel" required pattern="[0-9]{3}"> <br/> <input type="submit"> </form> </body> </html></pre><h3 id="自定義驗(yàn)證信息">自定義驗(yàn)證信息</h3><blockquote><p>系統(tǒng)的提示消息只能夠提示格式錯(cuò)誤,如果想要更為詳細(xì)的就需要我們通過(guò)js來(lái)自定義了</p></blockquote><ul class=" list-paddingleft-2"><li><p><strong>使用方法:</strong></p></li><ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p>注冊(cè)事件:<code>oninput:輸入時(shí)</code>,<code>oninvalid驗(yàn)證失敗</code></p></li><li><p>設(shè)置自定義信息<code>dom.setCustomValidity("這里輸入提示信息");</code></p></li></ul><li><p><strong>示例代碼:</strong></p></li><ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p>輸入時(shí),會(huì)彈出<code>oninput</code>綁定的代碼</p></li></ul></ul><p class="image-package"><img src="/static/imghw/default1.png" data-src="http://upload-images.jianshu.io/upload_images/4414359-458a0f67e72eda17.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="lazy"/ alt="關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹" ><br/></p><p class="image-caption">輸入中.png</p><ul class=" list-paddingleft-2"><li><p>驗(yàn)證失敗時(shí),會(huì)彈出<code>oninvalid</code>綁定的代碼</p><p class="image-package"><img src="/static/imghw/default1.png" data-src="http://upload-images.jianshu.io/upload_images/4414359-31b1902f9a214a47.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="lazy"/ alt="關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹" ><br/></p><p class="image-caption">驗(yàn)證失敗.png</p></li></ul><pre class='brush:php;toolbar:false;'> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> email:<input type="email" name="userEmail"> <br/> tel:<input type="tel" required pattern="[0-9]{3}" id="telInput"> <br/> <input type="submit"> </form> </body> </html> <script> var telInput = document.getElementById("telInput"); // 正在輸入時(shí) telInput.oninput=function () { this.setCustomValidity("請(qǐng)正確輸入哦"); } // 驗(yàn)證失敗時(shí) telInput.oninvalid=function(){ this.setCustomValidity("請(qǐng)不要輸入火星的手機(jī)號(hào)好嗎？"); }; </script></pre></p> <h3 id="總結(jié)">總結(jié)</h3> <ul class=" list-paddingleft-2"> <li><p><strong>優(yōu)點(diǎn):</strong></p></li> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li><p>html5自帶的驗(yàn)證使用便捷</p></li> <li><p>不需要額外的js<a href="http://www.miracleart.cn/css/css-rwd-frameworks.html" target="_blank">框架</a></p></li> </ul> <li><p><strong>缺點(diǎn):</strong></p></li> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li><p>兼容性問(wèn)題</p></li> <li><p>如果想要兼容所有瀏覽器,建議使用<code>js驗(yàn)證框架</code></p></li> </ul> <p>【相關(guān)推薦】</p> <p>1.?<a href="http://www.miracleart.cn/course/list/13.html" target="_self">免費(fèi)h5在線視頻教程</a></p> <p>2.?<a href="http://www.miracleart.cn/course/34.html" target="_self">HTML5 完整版手冊(cè)</a></p> <p>3.?<a href="http://www.miracleart.cn/course/372.html" target="_self">php.cn原創(chuàng)html5視頻教程</a></p> </ul> </li></ul><p>以上是關(guān)於HTML5中input標(biāo)籤（type屬性）的詳細(xì)介紹的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">本網(wǎng)站聲明</div> <div>本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <div id="377j5v51b" class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins>  <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>熱AI工具</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免費(fèi)脫衣圖片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>用於從照片中去除衣服的線上人工智慧工具。</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脫衣器</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>熱門(mén)文章</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/1796821119.html" title="指南：恆星刀片保存文件位置/保存文件丟失/不保存" class="phpgenera_Details_mainR4_bottom_title">指南：恆星刀片保存文件位置/保存文件丟失/不保存</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 週前</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 週前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 週前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/1796821436.html" title="沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘：覺(jué)醒 - 高級(jí)行星學(xué)家Quest演練</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 週前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/1796821278.html" title="約會(huì)一切：德克和哈珀關(guān)係指南" class="phpgenera_Details_mainR4_bottom_title">約會(huì)一切：德克和哈珀關(guān)係指南</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 週前</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh-tw/article.html">顯示更多</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>熱工具</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="記事本++7.3.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>記事本++7.3.1</h3> </a> <p>好用且免費(fèi)的程式碼編輯器</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3漢化版" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title"> <h3>SublimeText3漢化版</h3> </a> <p>中文版，非常好用</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禪工作室 13.0.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禪工作室 13.0.1</h3> </a> <p>強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神級(jí)程式碼編輯軟體(SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>熱門(mén)話題</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/gmailyxdlrkzn" title="gmail信箱登陸入口在哪裡" class="phpgenera_Details_mainR4_bottom_title">gmail信箱登陸入口在哪裡</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>8638</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>17</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/java-tutorial" title="Java教學(xué)" class="phpgenera_Details_mainR4_bottom_title">Java教學(xué)</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1784</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>16</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1729</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>56</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1580</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>28</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/zh-tw/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1445</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>31</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh-tw/faq/zt">顯示更多</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main2"> <div id="377j5v51b" class="phpgenera_Details_mainL4"> <div id="377j5v51b" class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div id="377j5v51b" class="phpgenera_Details_mainL4_info"> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh-tw/faq/1796795637.html" title="H5是HTML5的速記嗎？探索細(xì)節(jié)" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174456032160428.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="H5是HTML5的速記嗎？探索細(xì)節(jié)" /> </a> <a href="http://www.miracleart.cn/zh-tw/faq/1796795637.html" title="H5是HTML5的速記嗎？探索細(xì)節(jié)" class="phphistorical_Version2_mids_title">H5是HTML5的速記嗎？探索細(xì)節(jié)</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 14, 2025 am 12:05 AM</span> <p class="Articlelist_txts_p">H5不僅僅是HTML5的簡(jiǎn)稱，它代表了一個(gè)更廣泛的現(xiàn)代網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)生態(tài)：1.H5包括HTML5、CSS3、JavaScript及相關(guān)API和技術(shù)；2.它提供更豐富、互動(dòng)、流暢的用戶體驗(yàn)，能在多設(shè)備上無(wú)縫運(yùn)行；3.使用H5技術(shù)?？梢詣?chuàng)建響應(yīng)式網(wǎng)頁(yè)和復(fù)雜交互功能。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh-tw/faq/1796795169.html" title="H5和HTML5：網(wǎng)絡(luò)開(kāi)發(fā)中常用的術(shù)語(yǔ)" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174447367256958.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="H5和HTML5：網(wǎng)絡(luò)開(kāi)發(fā)中常用的術(shù)語(yǔ)" /> </a> <a href="http://www.miracleart.cn/zh-tw/faq/1796795169.html" title="H5和HTML5：網(wǎng)絡(luò)開(kāi)發(fā)中常用的術(shù)語(yǔ)" class="phphistorical_Version2_mids_title">H5和HTML5：網(wǎng)絡(luò)開(kāi)發(fā)中常用的術(shù)語(yǔ)</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 13, 2025 am 12:01 AM</span> <p class="Articlelist_txts_p">H5與HTML5指的是同一個(gè)東西，即HTML5。 HTML5是HTML的第五個(gè)版本，帶來(lái)了語(yǔ)義化標(biāo)籤、多媒體支持、畫(huà)布與圖形、離線存儲(chǔ)與本地存儲(chǔ)等新功能，提升了網(wǎng)頁(yè)的表現(xiàn)力和交互性。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh-tw/faq/1796797288.html" title="了解H5代碼：HTML5的基本原理" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174481968244816.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="了解H5代碼：HTML5的基本原理" /> </a> <a href="http://www.miracleart.cn/zh-tw/faq/1796797288.html" title="了解H5代碼：HTML5的基本原理" class="phphistorical_Version2_mids_title">了解H5代碼：HTML5的基本原理</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 17, 2025 am 12:08 AM</span> <p class="Articlelist_txts_p">HTML5是構(gòu)建現(xiàn)代網(wǎng)頁(yè)的關(guān)鍵技術(shù)，提供了許多新元素和功能。 1.HTML5引入了語(yǔ)義化元素如、、等，增強(qiáng)了網(wǎng)頁(yè)結(jié)構(gòu)和SEO。 2.支持多媒體元素和，無(wú)需插件即可嵌入媒體。 3.表單增強(qiáng)了新輸入類型和驗(yàn)證屬性，簡(jiǎn)化了驗(yàn)證過(guò)程。 4.提供了離線和本地存儲(chǔ)功能，提升了網(wǎng)頁(yè)性能和用戶體驗(yàn)。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh-tw/faq/1796799447.html" title="HTML5：現(xiàn)代網(wǎng)絡(luò)的基礎(chǔ)（H5）" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174516510279313.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5：現(xiàn)代網(wǎng)絡(luò)的基礎(chǔ)（H5）" /> </a> <a href="http://www.miracleart.cn/zh-tw/faq/1796799447.html" title="HTML5：現(xiàn)代網(wǎng)絡(luò)的基礎(chǔ)（H5）" class="phphistorical_Version2_mids_title">HTML5：現(xiàn)代網(wǎng)絡(luò)的基礎(chǔ)（H5）</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 21, 2025 am 12:05 AM</span> <p class="Articlelist_txts_p">HTML5是超文本標(biāo)記語(yǔ)言的最新版本，由W3C標(biāo)準(zhǔn)化。 HTML5引入了新的語(yǔ)義化標(biāo)籤、多媒體支持和表單增強(qiáng)，提升了網(wǎng)頁(yè)結(jié)構(gòu)、用戶體驗(yàn)和SEO效果。 HTML5引入了新的語(yǔ)義化標(biāo)籤，如、、、等，使網(wǎng)頁(yè)結(jié)構(gòu)更清晰，SEO效果更好。 HTML5支持多媒體元素和，無(wú)需第三方插件，提升了用戶體驗(yàn)和加載速度。 HTML5增強(qiáng)了表單功能，引入了新的輸入類型如、等，提高了用戶體驗(yàn)和表單驗(yàn)證效率。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh-tw/faq/1796800095.html" title="HTML5和H5：了解常見(jiàn)用法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174525130290661.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5和H5：了解常見(jiàn)用法" /> </a> <a href="http://www.miracleart.cn/zh-tw/faq/1796800095.html" title="HTML5和H5：了解常見(jiàn)用法" class="phphistorical_Version2_mids_title">HTML5和H5：了解常見(jiàn)用法</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 22, 2025 am 12:01 AM</span> <p class="Articlelist_txts_p">HTML5和H5沒(méi)有區(qū)別，H5是HTML5的簡(jiǎn)稱。 1.HTML5是HTML的第五個(gè)版本，增強(qiáng)了網(wǎng)頁(yè)的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動(dòng)網(wǎng)頁(yè)或應(yīng)用，適用於各種移動(dòng)設(shè)備。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh-tw/faq/1796801963.html" title="HTML5：標(biāo)準(zhǔn)及其對(duì)Web開(kāi)發(fā)的影響" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174568396226437.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5：標(biāo)準(zhǔn)及其對(duì)Web開(kāi)發(fā)的影響" /> </a> <a href="http://www.miracleart.cn/zh-tw/faq/1796801963.html" title="HTML5：標(biāo)準(zhǔn)及其對(duì)Web開(kāi)發(fā)的影響" class="phphistorical_Version2_mids_title">HTML5：標(biāo)準(zhǔn)及其對(duì)Web開(kāi)發(fā)的影響</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 27, 2025 am 12:12 AM</span> <p class="Articlelist_txts_p">HTML5的核心特性包括語(yǔ)義化標(biāo)籤、多媒體支持、離線存儲(chǔ)與本地存儲(chǔ)、表單增強(qiáng)。 1.語(yǔ)義化標(biāo)籤如、等，提升代碼可讀性和SEO效果。 2.和標(biāo)籤簡(jiǎn)化多媒體嵌入。 3.離線存儲(chǔ)和本地存儲(chǔ)如ApplicationCache和LocalStorage，支持無(wú)網(wǎng)絡(luò)運(yùn)行和數(shù)據(jù)存儲(chǔ)。 4.表單增強(qiáng)引入新輸入類型和驗(yàn)證屬性，簡(jiǎn)化處理和驗(yàn)證。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh-tw/faq/1796800887.html" title="H5和HTML5之間的連接：相似性和差異" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174542411212625.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="H5和HTML5之間的連接：相似性和差異" /> </a> <a href="http://www.miracleart.cn/zh-tw/faq/1796800887.html" title="H5和HTML5之間的連接：相似性和差異" class="phphistorical_Version2_mids_title">H5和HTML5之間的連接：相似性和差異</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 24, 2025 am 12:01 AM</span> <p class="Articlelist_txts_p">H5和HTML5是不同的概念：HTML5是HTML的一個(gè)版本，包含新元素和API；H5是基於HTML5的移動(dòng)應(yīng)用開(kāi)發(fā)框架。 HTML5通過(guò)瀏覽器解析和渲染代碼，H5應(yīng)用則需要容器運(yùn)行並通過(guò)JavaScript與原生代碼交互。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh-tw/faq/1796806419.html" title="理解H5：含義和意義" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174689398215178.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="理解H5：含義和意義" /> </a> <a href="http://www.miracleart.cn/zh-tw/faq/1796806419.html" title="理解H5：含義和意義" class="phphistorical_Version2_mids_title">理解H5：含義和意義</a> <span id="377j5v51b" class="Articlelist_txts_time">May 11, 2025 am 12:19 AM</span> <p class="Articlelist_txts_p">H5是HTML5，是HTML的第五個(gè)版本。 HTML5提升了網(wǎng)頁(yè)的表現(xiàn)力和交互性，引入了語(yǔ)義化標(biāo)籤、多媒體支持、離線存儲(chǔ)和Canvas繪圖等新特性，推動(dòng)了Web技術(shù)的發(fā)展。</p> </div> </div> <a href="http://www.miracleart.cn/zh-tw/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div id="377j5v51b" class="footer"> <div id="377j5v51b" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>公益線上PHP培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://www.miracleart.cn/zh-tw/about/us.html">關(guān)於我們</a> <a href="http://www.miracleart.cn/zh-tw/about/disclaimer.html">免責(zé)聲明</a> <a href="http://www.miracleart.cn/zh-tw/update/article_0_1.html">Sitemap</a> </div> <div id="377j5v51b" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="y4bbf" class="pl_css_ganrao" style="display: none;"><style id="y4bbf"></style><i id="y4bbf"><legend id="y4bbf"></legend></i><tr id="y4bbf"></tr><option id="y4bbf"></option><nav id="y4bbf"><strong id="y4bbf"></strong></nav><samp id="y4bbf"><tbody id="y4bbf"><meter id="y4bbf"><del id="y4bbf"></del></meter></tbody></samp><pre id="y4bbf"></pre><li id="y4bbf"></li><bdo id="y4bbf"><code id="y4bbf"></code></bdo><em id="y4bbf"><noframes id="y4bbf"><li id="y4bbf"></li></noframes></em><ins id="y4bbf"><output id="y4bbf"></output></ins><legend id="y4bbf"></legend><tbody id="y4bbf"></tbody><del id="y4bbf"><em id="y4bbf"><u id="y4bbf"></u></em></del><th id="y4bbf"><strike id="y4bbf"><td id="y4bbf"></td></strike></th><strike id="y4bbf"><big id="y4bbf"><progress id="y4bbf"></progress></big></strike><div id="y4bbf"></div><optgroup id="y4bbf"><nav id="y4bbf"></nav></optgroup><legend id="y4bbf"><xmp id="y4bbf"><dfn id="y4bbf"><pre id="y4bbf"></pre></dfn></xmp></legend><dfn id="y4bbf"><cite id="y4bbf"></cite></dfn><label id="y4bbf"></label><form id="y4bbf"><track id="y4bbf"><th id="y4bbf"><form id="y4bbf"></form></th></track></form><tbody id="y4bbf"></tbody><legend id="y4bbf"></legend><center id="y4bbf"></center><dfn id="y4bbf"><dd id="y4bbf"><ins id="y4bbf"></ins></dd></dfn><blockquote id="y4bbf"></blockquote><acronym id="y4bbf"><ins id="y4bbf"><ul id="y4bbf"></ul></ins></acronym><tbody id="y4bbf"></tbody><bdo id="y4bbf"></bdo><var id="y4bbf"><strong id="y4bbf"><cite id="y4bbf"><strike id="y4bbf"></strike></cite></strong></var><em id="y4bbf"><noframes id="y4bbf"><nobr id="y4bbf"></nobr></noframes></em><u id="y4bbf"></u><var id="y4bbf"></var><style id="y4bbf"><rt id="y4bbf"><source id="y4bbf"><pre id="y4bbf"></pre></source></rt></style><rp id="y4bbf"><abbr id="y4bbf"><li id="y4bbf"><label id="y4bbf"></label></li></abbr></rp><th id="y4bbf"><tbody id="y4bbf"><pre id="y4bbf"><style id="y4bbf"></style></pre></tbody></th><meter id="y4bbf"></meter><track id="y4bbf"></track><th id="y4bbf"></th><style id="y4bbf"></style><menuitem id="y4bbf"></menuitem><samp id="y4bbf"><delect id="y4bbf"><tt id="y4bbf"><option id="y4bbf"></option></tt></delect></samp><span id="y4bbf"><tr id="y4bbf"><div id="y4bbf"></div></tr></span><style id="y4bbf"></style><ruby id="y4bbf"></ruby><noframes id="y4bbf"></noframes><dfn id="y4bbf"><abbr id="y4bbf"><var id="y4bbf"><strong id="y4bbf"></strong></var></abbr></dfn><th id="y4bbf"><bdo id="y4bbf"></bdo></th></div> </html>

<\/a><\/h2>input表單驗(yàn)證<\/code><\/p><\/blockquote>