成人免费无码大片a毛片软件,非洲黑人最猛性xxxx交,884aa四虎影成人精品

\r\n \r\n

\r\n 測試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><\/ul>

$\"關(guān)于HTML5中input標(biāo)簽（type屬性）的詳細(xì)介紹\"$ <\/p>

input新type屬性.png<\/p>

新type屬性的注意要點<\/h3>
* 點擊不同type的input標(biāo)簽會有不一樣的彈出內(nèi)容\r\n* 如果發(fā)現(xiàn)w3cschool內(nèi)容不全,建議去MDN搜索\r\n* 并不是每一個新type屬性,在PC端都有不同的顯示\r\n* color, date, number 這些效果較為明顯<\/pre>
兼容性問題<\/strong><\/p><\/li>
由于ie的兼容性的問題,在不同的瀏覽器中顯示效果不盡相同<\/p><\/li>
但是在移動設(shè)備上的支持效果較好,可以將該頁面發(fā)送到手機(jī)進(jìn)行測試<\/p><\/li>
實際開發(fā)中可以按照需求選用<\/p><\/li><\/ul><\/ul>
input表單驗證<\/a><\/h2>
用戶在輸入內(nèi)容的時候不可能做到全部正確,比如email地址``電話長度<\/code>等等都有可能出現(xiàn)輸入錯誤,試想一下,當(dāng)用戶辛辛苦苦的輸入了10多個表單內(nèi)容,點擊提交由于輸入錯誤,內(nèi)容被清空了<\/p><\/blockquote>
w3cSchool 查閱位置<\/h3>下面把api<\/a>文檔的查閱位置添加如下<\/p><\/blockquote> [w3cSchool_事件<\/a>屬性]w3School<\/p><\/li> [w3cSchool_input標(biāo)簽]w3cSchool<\/p><\/li><\/ul> email標(biāo)簽<\/h3>在H5<\/code>中的input<\/code>的新type<\/code>屬性email<\/code>自帶格式驗證<\/p><\/blockquote>示例代碼:<\/strong><\/p><\/li>當(dāng)我們點擊提交按鈕<\/a><\/code>時,如果輸入的email<\/code>格式不正確,會彈出提示信息<\/p><\/li> email<\/code>標(biāo)簽并不會驗證內(nèi)容是否為空，這個需要注意<\/p><\/li><\/ul><\/ul> <\/p> email自帶提示.png<\/p> \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><h3><a href=\"http:\/\/www.miracleart.cn\/wiki\/136.html\" target=\"_blank\">require<\/a>d屬性<\/h3><blockquote><p>對于沒有自帶驗證效果的標(biāo)簽,就需要手動添加屬性增加驗證了<\/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>只需要添加<code>required<\/code>屬性即可,不需要賦值<\/p><\/li><\/ul><li><p><strong>示例代碼:<\/strong><\/p><\/li><ul class=\" list-paddingleft-2\" style=\"list-style-type: square;\"><li><p>當(dāng)<a href=\"http:\/\/www.miracleart.cn\/js\/js-jspopular-guide-widget.html\" target=\"_blank\">控件<\/a>沒有輸入任何內(nèi)容直接點擊提交時,會彈出提示<\/p><\/li><\/ul><\/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\">required屬性.png<\/p><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><h3>pattern 自定義<a href=\"http:\/\/www.miracleart.cn\/php\/php-tp-validatieregel.html\" target=\"_blank\">驗證規(guī)則<\/a><\/h3><blockquote><p>使用<code>required<\/code>標(biāo)簽只能夠驗證內(nèi)容是否為空,如果想要驗證的更為準(zhǔn)確就需要自定義驗證規(guī)則了<\/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>在需要添加自定義驗證規(guī)則的元素中添加<code>required<\/code>標(biāo)簽<\/p><\/li><li><p>使用<a href=\"http:\/\/www.miracleart.cn\/wiki\/588.html\" target=\"_blank\">正則表達(dá)式<\/a>編寫驗證規(guī)則<\/p><\/li><\/ul><li><p><strong>示例代碼:<\/strong><\/p><\/li><ul class=\" list-paddingleft-2\" style=\"list-style-type: square;\"><li><p>當(dāng)我們輸入的內(nèi)容跟驗證條件不符時,就會彈出對應(yīng)的提示<\/p><\/li><\/ul><\/ul><p class=\"image-package\"><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ì)介紹\" ><br\/><\/p><p class=\"image-caption\">自定義驗證.png<\/p><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>自定義驗證信息<\/h3><blockquote><p>系統(tǒng)的提示消息只能夠提示格式錯誤,如果想要更為詳細(xì)的就需要我們通過js來自定義了<\/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>注冊事件:<code>oninput:輸入時<\/code>,<code>oninvalid驗證失敗<\/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>輸入時,會彈出<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>驗證失敗時,會彈出<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\">驗證失敗.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/" 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="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a> <a href="http://www.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a> <a href="http://www.miracleart.cn/zh/wenda.html" title="問答" class="languagechoosea">問答</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/course.html" title="課程" class="languagechoosea on">課程</a> <a href="http://www.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/zh/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a> <a href="http://www.miracleart.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a> <a href="http://www.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫" class="languagechoosea">PHP 庫</a> <a href="http://www.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a> <a href="http://www.miracleart.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a> <a href="http://www.miracleart.cn/zh/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/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/game" title="游戲下載" class="languagechoosea on">游戲下載</a> <a href="http://www.miracleart.cn/zh/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')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="搜索" onclick="searchs('zh')"><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:;" title="簡體中文" class="languagechoosea">簡體中文</a> <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a> <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a> <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</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="#新type屬性的注意要點" title="新type屬性的注意要點" >新type屬性的注意要點</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#input-a-href-http-www-php-cn-code-html-target-blank-表單驗證-a" title="input<a href="http://www.miracleart.cn/code/81.html" target="_blank">表單驗證</a>" >input<a href="http://www.miracleart.cn/code/81.html" target="_blank">表單驗證</a></a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#w-cSchool-查閱位置" title="w3cSchool 查閱位置" >w3cSchool 查閱位置</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#email標(biāo)簽" title="email標(biāo)簽" >email標(biāo)簽</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#a-href-http-www-php-cn-wiki-html-target-blank-require-a-d屬性" title="<a href="http://www.miracleart.cn/wiki/136.html" target="_blank">require</a>d屬性" ><a href="http://www.miracleart.cn/wiki/136.html" target="_blank">require</a>d屬性</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#pattern-自定義-a-href-http-www-php-cn-php-php-tp-validatieregel-html-target-blank-驗證規(guī)則-a" title="pattern 自定義<a href="http://www.miracleart.cn/php/php-tp-validatieregel.html" target="_blank">驗證規(guī)則</a>" >pattern 自定義<a href="http://www.miracleart.cn/php/php-tp-validatieregel.html" target="_blank">驗證規(guī)則</a></a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#自定義驗證信息" title="自定義驗證信息" >自定義驗證信息</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/" title="首頁" class="phpgenera_Details_mainL1a">首頁</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/zh/web-designer.html" class="phpgenera_Details_mainL1a">web前端</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/zh/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/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/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>首先讓我們來看一張表</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>測試代碼:</strong></p></li></ul><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>測試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><ul class=" list-paddingleft-2"><li><p><strong>運行效果</strong></p></li></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">input新type屬性.png</p><h3 id="新type屬性的注意要點">新type屬性的注意要點</h3><pre class="brush:php;toolbar:false">* 點擊不同type的input標(biāo)簽會有不一樣的彈出內(nèi)容 * 如果發(fā)現(xiàn)w3cschool內(nèi)容不全,建議去MDN搜索 * 并不是每一個新type屬性,在PC端都有不同的顯示 * color, date, number 這些效果較為明顯</pre><ul class=" list-paddingleft-2"><li><p><strong>兼容性問題</strong></p></li><ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p>由于ie的兼容性的問題,在不同的瀏覽器中顯示效果不盡相同</p></li><li><p>但是在移動設(shè)備上的支持效果較好,可以將該頁面發(fā)送到手機(jī)進(jìn)行測試</p></li><li><p>實際開發(fā)中可以按照需求選用</p></li></ul></ul><h2 id="input-a-href-http-www-php-cn-code-html-target-blank-表單驗證-a">input<a href="http://www.miracleart.cn/code/81.html" target="_blank">表單驗證</a></h2><blockquote><p>用戶在輸入內(nèi)容的時候不可能做到全部正確,比如<code>email地址``電話長度</code>等等都有可能出現(xiàn)輸入錯誤,試想一下,當(dāng)用戶辛辛苦苦的輸入了10多個表單內(nèi)容,點擊提交由于輸入錯誤,內(nèi)容被清空了</p></blockquote><h3 id="w-cSchool-查閱位置">w3cSchool 查閱位置</h3><blockquote><p>下面把<a href="http://www.miracleart.cn/js/js-weixinapp-api.html" target="_blank">api</a>文檔的查閱位置添加如下</p></blockquote><ul class=" list-paddingleft-2"><li><p>[w3cSchool_<a href="http://www.miracleart.cn/js/js-jspopular-guide-event.html" target="_blank">事件</a>屬性]w3School</p></li><li><p>[w3cSchool_input標(biāo)簽]w3cSchool</p></li></ul><h3 id="email標(biāo)簽">email標(biāo)簽</h3><blockquote><p>在<code>H5</code>中的<code>input</code>的新<code>type</code>屬性<code>email</code>自帶格式驗證</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>當(dāng)我們點擊<code>提交<a href="http://www.miracleart.cn/code/5991.html" target="_blank">按鈕</a></code>時,如果輸入的<code>email</code>格式不正確,會彈出提示信息</p></li><li><p><code>email</code>標(biāo)簽并不會驗證內(nèi)容是否為空，這個需要注意</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ì)介紹" ><br/></p><p class="image-caption">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><h3 id="a-href-http-www-php-cn-wiki-html-target-blank-require-a-d屬性"><a href="http://www.miracleart.cn/wiki/136.html" target="_blank">require</a>d屬性</h3><blockquote><p>對于沒有自帶驗證效果的標(biāo)簽,就需要手動添加屬性增加驗證了</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>只需要添加<code>required</code>屬性即可,不需要賦值</p></li></ul><li><p><strong>示例代碼:</strong></p></li><ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p>當(dāng)<a href="http://www.miracleart.cn/js/js-jspopular-guide-widget.html" target="_blank">控件</a>沒有輸入任何內(nèi)容直接點擊提交時,會彈出提示</p></li></ul></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">required屬性.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/> tel:<input type="tel" required> <br/> <input type="submit"> </form> </body> </html></pre><h3 id="pattern-自定義-a-href-http-www-php-cn-php-php-tp-validatieregel-html-target-blank-驗證規(guī)則-a">pattern 自定義<a href="http://www.miracleart.cn/php/php-tp-validatieregel.html" target="_blank">驗證規(guī)則</a></h3><blockquote><p>使用<code>required</code>標(biāo)簽只能夠驗證內(nèi)容是否為空,如果想要驗證的更為準(zhǔn)確就需要自定義驗證規(guī)則了</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>在需要添加自定義驗證規(guī)則的元素中添加<code>required</code>標(biāo)簽</p></li><li><p>使用<a href="http://www.miracleart.cn/wiki/588.html" target="_blank">正則表達(dá)式</a>編寫驗證規(guī)則</p></li></ul><li><p><strong>示例代碼:</strong></p></li><ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p>當(dāng)我們輸入的內(nèi)容跟驗證條件不符時,就會彈出對應(yīng)的提示</p></li></ul></ul><p class="image-package"><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ì)介紹" ><br/></p><p class="image-caption">自定義驗證.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/> tel:<input type="tel" required pattern="[0-9]{3}"> <br/> <input type="submit"> </form> </body> </html></pre><h3 id="自定義驗證信息">自定義驗證信息</h3><blockquote><p>系統(tǒng)的提示消息只能夠提示格式錯誤,如果想要更為詳細(xì)的就需要我們通過js來自定義了</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>注冊事件:<code>oninput:輸入時</code>,<code>oninvalid驗證失敗</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>輸入時,會彈出<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>驗證失敗時,會彈出<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">驗證失敗.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"); // 正在輸入時 telInput.oninput=function () { this.setCustomValidity("請正確輸入哦"); } // 驗證失敗時 telInput.oninvalid=function(){ this.setCustomValidity("請不要輸入火星的手機(jī)號好嗎？"); }; </script></pre><h3 id="總結(jié)">總結(jié)</h3> <ul class=" list-paddingleft-2"> <li><p><strong>優(yōu)點:</strong></p></li> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li><p>html5自帶的驗證使用便捷</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>缺點:</strong></p></li> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li><p>兼容性問題</p></li> <li><p>如果想要兼容所有瀏覽器,建議使用<code>js驗證框架</code></p></li> </ul> <p>【相關(guān)推薦】</p> <p>1.?<a href="http://www.miracleart.cn/course/list/13.html" target="_self">免費h5在線視頻教程</a></p> <p>2.?<a href="http://www.miracleart.cn/course/34.html" target="_self">HTML5 完整版手冊</a></p> <p>3.?<a href="http://www.miracleart.cn/course/372.html" target="_self">php.cn原創(chuàng)html5視頻教程</a></p> </ul><p>以上是關(guān)于HTML5中input標(biāo)簽（type屬性）的詳細(xì)介紹的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">本站聲明</div> <div>本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請聯(lián)系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/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/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免費脫衣服圖片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/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/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/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脫衣機(jī)</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh/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>熱門文章</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/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/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/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/faq/1796821436.html" title="沙丘：覺醒 - 高級行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘：覺醒 - 高級行星學(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/faq/1796821278.html" title="約會一切：德克和哈珀關(guān)系指南" class="phpgenera_Details_mainR4_bottom_title">約會一切：德克和哈珀關(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/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/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/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>記事本++7.3.1</h3> </a> <p>好用且免費的代碼編輯器</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/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/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/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禪工作室 13.0.1</h3> </a> <p>功能強(qiáng)大的PHP集成開發(fā)環(huán)境</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>視覺化網(wǎng)頁開發(fā)工具</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/zh/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/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神級代碼編輯軟件(SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/zh/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>熱門話題</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/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/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">Java教程</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/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/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/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/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/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/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的簡稱，它代表了一個更廣泛的現(xiàn)代網(wǎng)頁開發(fā)技術(shù)生態(tài)：1.H5包括HTML5、CSS3、JavaScript及相關(guān)API和技術(shù)；2.它提供更豐富、互動、流暢的用戶體驗，能在多設(shè)備上無縫運行；3.使用H5技術(shù)棧可以創(chuàng)建響應(yīng)式網(wǎng)頁和復(fù)雜交互功能。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796795169.html" title="H5和HTML5：網(wǎng)絡(luò)開發(fā)中常用的術(shù)語" 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ò)開發(fā)中常用的術(shù)語" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796795169.html" title="H5和HTML5：網(wǎng)絡(luò)開發(fā)中常用的術(shù)語" class="phphistorical_Version2_mids_title">H5和HTML5：網(wǎng)絡(luò)開發(fā)中常用的術(shù)語</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 13, 2025 am 12:01 AM</span> <p class="Articlelist_txts_p">H5與HTML5指的是同一個東西，即HTML5。HTML5是HTML的第五個版本，帶來了語義化標(biāo)簽、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網(wǎng)頁的表現(xiàn)力和交互性。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/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/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)頁的關(guān)鍵技術(shù)，提供了許多新元素和功能。1.HTML5引入了語義化元素如、、等，增強(qiáng)了網(wǎng)頁結(jié)構(gòu)和SEO。2.支持多媒體元素和，無需插件即可嵌入媒體。3.表單增強(qiáng)了新輸入類型和驗證屬性，簡化了驗證過程。4.提供了離線和本地存儲功能，提升了網(wǎng)頁性能和用戶體驗。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/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/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)記語言的最新版本，由W3C標(biāo)準(zhǔn)化。HTML5引入了新的語義化標(biāo)簽、多媒體支持和表單增強(qiáng)，提升了網(wǎng)頁結(jié)構(gòu)、用戶體驗和SEO效果。HTML5引入了新的語義化標(biāo)簽，如、、、等，使網(wǎng)頁結(jié)構(gòu)更清晰，SEO效果更好。HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。HTML5增強(qiáng)了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796800095.html" title="HTML5和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/174525130290661.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5和H5：了解常見用法" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796800095.html" title="HTML5和H5：了解常見用法" class="phphistorical_Version2_mids_title">HTML5和H5：了解常見用法</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 22, 2025 am 12:01 AM</span> <p class="Articlelist_txts_p">HTML5和H5沒有區(qū)別，H5是HTML5的簡稱。1.HTML5是HTML的第五個版本，增強(qiáng)了網(wǎng)頁的多媒體和交互功能。2.H5常用于指代基于HTML5的移動網(wǎng)頁或應(yīng)用，適用于各種移動設(shè)備。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/faq/1796801963.html" title="HTML5：標(biāo)準(zhǔn)及其對Web開發(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)及其對Web開發(fā)的影響" /> </a> <a href="http://www.miracleart.cn/zh/faq/1796801963.html" title="HTML5：標(biāo)準(zhǔn)及其對Web開發(fā)的影響" class="phphistorical_Version2_mids_title">HTML5：標(biāo)準(zhǔn)及其對Web開發(fā)的影響</a> <span id="377j5v51b" class="Articlelist_txts_time">Apr 27, 2025 am 12:12 AM</span> <p class="Articlelist_txts_p">HTML5的核心特性包括語義化標(biāo)簽、多媒體支持、離線存儲與本地存儲、表單增強(qiáng)。1.語義化標(biāo)簽如、等，提升代碼可讀性和SEO效果。2.和標(biāo)簽簡化多媒體嵌入。3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網(wǎng)絡(luò)運行和數(shù)據(jù)存儲。4.表單增強(qiáng)引入新輸入類型和驗證屬性，簡化處理和驗證。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/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/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的一個版本，包含新元素和API；H5是基于HTML5的移動應(yīng)用開發(fā)框架。HTML5通過瀏覽器解析和渲染代碼，H5應(yīng)用則需要容器運行并通過JavaScript與原生代碼交互。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/zh/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/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的第五個版本。HTML5提升了網(wǎng)頁的表現(xiàn)力和交互性，引入了語義化標(biāo)簽、多媒體支持、離線存儲和Canvas繪圖等新特性，推動了Web技術(shù)的發(fā)展。</p> </div> </div> <a href="http://www.miracleart.cn/zh/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í)者快速成長！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://www.miracleart.cn/zh/about/us.html">關(guān)于我們</a> <a href="http://www.miracleart.cn/zh/about/disclaimer.html">免責(zé)聲明</a> <a href="http://www.miracleart.cn/zh/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="6okm6" class="pl_css_ganrao" style="display: none;"><dfn id="6okm6"></dfn><tbody id="6okm6"></tbody><tbody id="6okm6"><object id="6okm6"><strike id="6okm6"></strike></object></tbody><source id="6okm6"></source><tr id="6okm6"></tr><tbody id="6okm6"></tbody><li id="6okm6"></li><tr id="6okm6"></tr><fieldset id="6okm6"></fieldset><dfn id="6okm6"></dfn><table id="6okm6"></table><em id="6okm6"><xmp id="6okm6"><dfn id="6okm6"></dfn></xmp></em><center id="6okm6"></center><wbr id="6okm6"><tr id="6okm6"><rt id="6okm6"></rt></tr></wbr><strong id="6okm6"></strong><table id="6okm6"><tbody id="6okm6"><button id="6okm6"></button></tbody></table><acronym id="6okm6"></acronym><tbody id="6okm6"><xmp id="6okm6"><tr id="6okm6"></tr></xmp></tbody><tbody id="6okm6"><abbr id="6okm6"><kbd id="6okm6"></kbd></abbr></tbody><cite id="6okm6"><rt id="6okm6"><code id="6okm6"></code></rt></cite><tfoot id="6okm6"></tfoot><menu id="6okm6"></menu><menu id="6okm6"><fieldset id="6okm6"><optgroup id="6okm6"></optgroup></fieldset></menu><optgroup id="6okm6"></optgroup><table id="6okm6"></table><delect id="6okm6"></delect><xmp id="6okm6"></xmp><th id="6okm6"></th><th id="6okm6"></th><dl id="6okm6"></dl><table id="6okm6"></table><acronym id="6okm6"><dd id="6okm6"><dfn id="6okm6"></dfn></dd></acronym><del id="6okm6"><pre id="6okm6"><samp id="6okm6"></samp></pre></del><ul id="6okm6"><tbody id="6okm6"><xmp id="6okm6"></xmp></tbody></ul><small id="6okm6"></small><tbody id="6okm6"></tbody><abbr id="6okm6"><ul id="6okm6"><em id="6okm6"></em></ul></abbr><acronym id="6okm6"><xmp id="6okm6"><pre id="6okm6"></pre></xmp></acronym><pre id="6okm6"></pre><nav id="6okm6"></nav><strike id="6okm6"><td id="6okm6"><fieldset id="6okm6"></fieldset></td></strike><dfn id="6okm6"><rt id="6okm6"><tfoot id="6okm6"></tfoot></rt></dfn><option id="6okm6"></option><sup id="6okm6"></sup><del id="6okm6"></del><dfn id="6okm6"></dfn><dl id="6okm6"><source id="6okm6"><cite id="6okm6"></cite></source></dl><dd id="6okm6"></dd><acronym id="6okm6"><tr id="6okm6"><dfn id="6okm6"></dfn></tr></acronym><td id="6okm6"></td><fieldset id="6okm6"></fieldset><dfn id="6okm6"></dfn><tfoot id="6okm6"></tfoot><tr id="6okm6"></tr><optgroup id="6okm6"></optgroup><delect id="6okm6"></delect><abbr id="6okm6"></abbr><s id="6okm6"></s><nav id="6okm6"></nav><s id="6okm6"><dl id="6okm6"><input id="6okm6"></input></dl></s><kbd id="6okm6"></kbd><bdo id="6okm6"></bdo><option id="6okm6"></option><cite id="6okm6"><rt id="6okm6"><code id="6okm6"></code></rt></cite><blockquote id="6okm6"></blockquote><xmp id="6okm6"></xmp><source id="6okm6"><small id="6okm6"><menu id="6okm6"></menu></small></source><rt id="6okm6"><code id="6okm6"><input id="6okm6"></input></code></rt><small id="6okm6"></small><nav id="6okm6"></nav><tr id="6okm6"></tr><optgroup id="6okm6"></optgroup><em id="6okm6"><tbody id="6okm6"><button id="6okm6"></button></tbody></em><li id="6okm6"></li><acronym id="6okm6"><dd id="6okm6"><sup id="6okm6"></sup></dd></acronym><center id="6okm6"></center><optgroup id="6okm6"></optgroup><tbody id="6okm6"><button id="6okm6"><kbd id="6okm6"></kbd></button></tbody><blockquote id="6okm6"></blockquote><tbody id="6okm6"><abbr id="6okm6"><li id="6okm6"></li></abbr></tbody><center id="6okm6"></center><center id="6okm6"><fieldset id="6okm6"><source id="6okm6"></source></fieldset></center><option id="6okm6"></option><kbd id="6okm6"></kbd><li id="6okm6"></li><kbd id="6okm6"></kbd><pre id="6okm6"></pre><source id="6okm6"></source><abbr id="6okm6"><bdo id="6okm6"><em id="6okm6"></em></bdo></abbr><bdo id="6okm6"></bdo><dfn id="6okm6"></dfn><abbr id="6okm6"></abbr><dd id="6okm6"></dd><table id="6okm6"></table><menu id="6okm6"></menu><object id="6okm6"><small id="6okm6"><s id="6okm6"></s></small></object></div> </html>