HTML5新特性總結

2021-05-31 分類：網站建設

HTML5屬于上一代HTML的新迭代語言，設計HTML5最主要的目的是為了在移動設備上支持多媒體！！！

例如： video 標簽和 audio 及 canvas 標記

新特性：

1. 取消了過時的顯示效果標記和等...

2. 新語義標簽的引入

3. 新表單元素引入

4. canvas標簽（圖形設計）

5. 本地數據庫（本地存儲）

6. 一些API

好處：跨平臺

例如：比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺、Opera的游戲中心、Facebook應用平臺，甚至可以通過封裝的技術發(fā)放到App Store或Google Play上，所以它的跨平臺性非常強大，這也是大多數人對HTML5有興趣的主要原因。

缺點：

pc端瀏覽器支持不是特別友好，造成用戶體驗不佳(隨著移動端的發(fā)展不斷擴大和win10（ie10）的大量推廣，這一缺點將被無限縮小)

HTML5新語義標簽

HTML5新標簽的數量在25個左右具體也沒有找到詳細的資料來查看（每個網站顯示的數量都不一樣）

雖然新增的標簽很多但是實際上用到的應該只有十個左右MDN上有一句話“HTML 使用“標記”來注明文本、圖片和其他內容，以便于在 Web 瀏覽器中顯示。HTML 標記包含一些特殊“元素”如，，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等。” 這其中大部分有HTML5以前的標簽也有HTML5的而這些剛好就是我們常用的標簽，不常用的也許不必太過了解布局DIV也可以不是么？ </div><div> 另外推薦大家在使用新語義標簽的時候盡量每個獨立的頁面只使用一個標簽作為包裹，語義化的作用就是seo（具體可百度），就是讓搜索引擎知道網上到底有些什么，如header 、main、footer標簽等等，當然你也可以寫100個！ </div><div> 以下總結出HTML5常用的標簽： </div><div> “header” “nav” “main”“article” “address”“section”“aside” “footer” </div><div> 如果忘記了這些標簽的意思可以訪問 MDN、W3C、或者CSND,當然博客園上搜搜可能會更快 </div><div> 以下為菜鳥教程對html5新標簽的注解 http://www.runoob.com/html/html5-new-element.html </div><div> HTML5的重點標簽之video和audio </div><div> <video></video> 視頻 </div><div> 屬性：controls 顯示控制欄 </div><div> 屬性：autoplay 自動播放 </div><div> 屬性：loop 設置循環(huán)播放 </div><div> <audio></audio> 音頻 </div><div> 屬性：controls 顯示控制欄 </div><div> 屬性：autoplay 自動播放 </div><div> 屬性：loop 設置循環(huán)播放 </div><div> video標簽支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp </div><div> 多媒體標簽在網頁中的兼容效果方式（每個瀏覽器支持的情況不同所以需要做兼容性處理）（以下source屬性只會生效一個即 if = true 之后就不執(zhí)行了） </div><div> <video> </div><div> <source src="code/多媒體標簽/trailer.mp4"> </div><div> <source src="trailer.ogg"> </div><div> <source src="trailer.WebM"> </div><div> </video> </div><div> HTML5中的智能表單控件 </div><div> <input type="email"> </div><div> type值 ={ </div><div> email: 輸入合法的郵箱地址 </div><div> url：輸入合法的網址 </div><div> number：只能輸入數字 </div><div> range：滑塊 </div><div> color：拾色器 </div><div> date：顯示日期 </div><div> month：顯示月份 </div><div> week ：顯示第幾周 </div><div> time：顯示時間 </div><div> } </div><div> （智能表單，會自動對輸入的內容做基本校驗，內容不符合基本校驗則拒絕提交請求 </div><div> 表單屬性 </div><div> ◆form屬性： </div><div> autocomplete=on | off 自動完成 </div><div> novalidate=true | false 是否關閉校驗 </div><div> ◆ input屬性： </div><div> autofocus ：自動獲取焦點 </div><div> <input type="text" list="abc"/> </div><div> <datalist id="abc"> </div><div> <option value="123">12312</option> </div><div> <option value="123">12312</option> </div><div> <option value="123">12312</option> </div><div> <option value="123">12312</option> </div><div> </datalist> </div><br /><div> multiple：實現多選效果 </div><div> placeholder ：占位符（提示信息） </div><div> required：必填項 </div><div> HTML5中新的一些API </div><div> 以前獲取節(jié)點通過 </div><div> document.getElementById("ID名稱")這些還有className，name，tagname等等方式獲取返回當前節(jié)點 </div><div> H5新增的節(jié)點獲取方法只有兩個 </div><div> document.querySelector("選擇器")；返回節(jié)點 </div><div> document.querySelectorAll("選擇器"); 返回數組 </div><div> 可以好的代替以前或者節(jié)點的方式，如果無需兼容ie10以下的話 </div><div> H5中對class的操作 </div><div> classList.add("類名") </div><div> 添加class類名不返回任何值如果你把它賦值給一個變量得到結果是undefined </div><div> classList.remove("類名"); 刪除 </div><div> classList.contains("類名"); </div><div> 檢查has className 是否存在返回布爾值即true and false </div><div> classList.toggle("active"); </div><div> 查詢active 是否存在，存在就刪除，不存在就添加，省去了if判斷！返回布爾值如果執(zhí)行多條即 true false true false. </div><div> 自定義屬性（小案例分析體驗自定義屬性） data-自定義屬性名 </div><div> 獲取自定義屬性 Dom.dataset 返回的是一個對象 </div><div> Dom.dataset.屬性名或者 Dom.dataset[屬性名] </div><div> 注：屬性名無需加data如自定義屬性名 = data-canvas 那么獲取的時候直接dataset.canvas即可設置同理 </div><div> 設置自定義屬性 </div><div> Dom.dataset.自定義屬性名=值或者 Dom.dataset[自定義屬性名]=值； </div><div> 文件讀取 FileReader </div><div> FileReader 接口有3個用來讀取文件方法返回結果在result中 </div><div> readAsBinaryString ---將文件讀取為二進制編碼 </div><div> readAsText ---將文件讀取為文本 </div><div> readAsDataURL ---將文件讀取為DataURL </div><div> FileReader 提供的事件模型 </div><div> onabort 中斷時觸發(fā) </div><div> onerror 出錯時觸發(fā) </div><div> onload 文件讀取成功完成時觸發(fā) </div><div> onloadend 讀取完成觸發(fā)，無論成功或失敗 </div><div> onloadstart 讀取開始時觸發(fā) </div><div> onprogress 讀取中 </div><div> 獲取當前網絡狀態(tài) </div><div> window.navigator.onLine 返回一個布爾值網沒問題返回true否則返回false </div><div> 網絡狀態(tài)事件（大部分為不支持和廢棄狀態(tài)也許移動端用的比較多） </div><div> window.ononline </div><div> window.onoffline </div><div> 獲取地理定位 </div><div> 獲取一次當前位置 </div><div> window.navigator.geolocation.getCurrentPosition(success,error); </div><div> success成功之后獲取位置信息否則拋出錯誤，比如獲取位置信息被拒絕 </div><div> coords.latitude 維度 </div><div> coords.longitude 經度 </div><div> 實時獲取當前位置 </div><div> window.navigator.geolocation.watchPosition(success,error); </div><div> 本地存儲隨著互聯網的快速發(fā)展，基于網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統(tǒng)方式我們以document.cookie來進行存儲的，但是由于其存儲大小只有4k左右，并且解析也相當的復雜，給開發(fā)帶來諸多不便，HTML5規(guī)范則提出解決方案，使用sessionStorage和localStorage存儲數據。 </div><div> localStorage： </div><div> 永久生效 </div><div> 多窗口共享 </div><div> 容量大約為20M </div><div> ◆window.localStorage.setItem(key,value) 設置存儲內容 </div><div> ◆window.localStorage.getItem(key) 獲取內容 </div><div> ◆window.localStorage.removeItem(key) 刪除內容 </div><div> ◆window.localStorage.clear() 清空內容 </div><div> sessionStorage： </div><div> 生命周期為關閉當前瀏覽器窗口 </div><div> 可以在同一個窗口下訪問 </div><div> 數據大小為5M左右 </div><div> ◆window.sessionStorage.setItem(key,value) </div><div> ◆window.sessionStorage.getItem(key) </div><div> ◆window.sessionStorage.removeItem(key) </div><div> ◆window.sessionStorage.clear() </div><div> required如何修改默認提示選項 </div><div> 需要兩個幾個參數 </div><div> placeholder = 默認提示用戶輸入 </div><div> oninvalid事件 = 當用戶輸入不符合規(guī)則的時候提示的內容隨意改setCustomValidity 就是用來修改 requered值的函數 </div><div> oninput事件 = 約等于chuange事件立即執(zhí)行 </div><div> console.log('Hello World') </div> <p> 網頁題目：<a href="http://www.chinadenli.net/news/115808.html">HTML5新特性總結</a> <br> URL鏈接：<a href="http://www.chinadenli.net/news/115808.html">http://www.chinadenli.net/news/115808.html</a> </p> <p> <a href="http://www.chinadenli.net/" target="_blank">成都網站建設公司</a>_<a target="_blank">創(chuàng)新互聯</a>，為您提供<a href="http://www.chinadenli.net/news/wxxcx/">微信小程序</a>、<a href="http://www.chinadenli.net/news/yingxiao/">網站營銷</a>、<a href="http://www.chinadenli.net/news/ruanjiankaifa/">軟件開發(fā)</a>、<a href="http://www.chinadenli.net/news/pinpaisheji/">品牌網站設計</a>、<a href="http://www.chinadenli.net/news/host/">虛擬主機</a>、<a href="http://www.chinadenli.net/news/yidongjianshe/">移動網站建設</a> </p> <p class="adpic"> <a href="http://www.chinadenli.net/service/ad.html" target="_blank" class="ad">廣告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： <a href="http://www.chinadenli.net/" target="_blank">創(chuàng)新互聯</a> </p> </div> <div id="usmmekq" class="newsmorelb"> <p>猜你還喜歡下面的內容</p> <ul> <li> <a href="/news/115804.html">網站怎么樣推廣？</a> <span>2021-05-31</span> </li><li> <a href="/news/115802.html">電商“五大體系”構筑互聯網快車</a> <span>2021-05-31</span> </li><li> <a href="/news/115800.html">互聯網高光時刻正在被“國風”包圍！</a> <span>2021-05-31</span> </li><li> <a href="/news/115798.html">把客戶作為核心的網站你了解的有多少？</a> <span>2021-05-31</span> </li><li> <a href="/news/115796.html">簡述網站LOGO設計的技巧</a> <span>2021-05-31</span> </li><li> <a href="/news/115794.html">線下零售除了拉個微信群，如何適應互聯網？</a> <span>2021-05-31</span> </li><li> <a href="/news/115790.html">外鏈對網站的重要性</a> <span>2021-05-31</span> </li><li> <a href="/news/115788.html">建站方面問題總結</a> <span>2021-05-31</span> </li> </ul> </div> </div> <div id="ogiyqks" class="col-lg-3 noneb"> <a href="http://www.chinadenli.net/paiming/chengdu.html" title="成都seo排名網站優(yōu)化" target="_blank"><img src="/upload/news/paiming.png" alt="成都seo排名網站優(yōu)化" class="img-responsive"></a> <div id="uyyaoaw" class="bkright"> <p><a href="http://www.chinadenli.net/news/jianshe/">網站建設知識</a></p> <ul> <li> <a class="text_overflow" href="/news/115807.html">深圳企業(yè)網站統(tǒng)計分析系統(tǒng)要觀察的指標</a> <span>2021-05-31</span> </li><li> <a class="text_overflow" href="/news/115803.html">互聯網“數據服務”成為下沉市場“新寵”</a> <span>2021-05-31</span> </li><li> <a class="text_overflow" href="/news/115801.html">客戶有網站問題你可以直接說，其實用不著這樣？</a> <span>2021-05-31</span> </li><li> <a class="text_overflow" href="/news/115799.html">APP節(jié)日圖標設計思路</a> <span>2021-05-31</span> </li><li> <a class="text_overflow" href="/news/115793.html">巧妙運用交互打造精致營銷網站</a> <span>2021-05-31</span> </li><li> <a class="text_overflow" href="/news/115791.html">企業(yè)網站做好以后如何推廣，網站推廣需要注意的幾個重點</a> <span>2021-05-31</span> </li> <li> <a class="text_overflow" href="/news/115786.html">建設門戶網站有哪些方面值得關注？</a> <span>2021-05-31</span> </li><li> <a class="text_overflow" href="/news/115785.html">北京黃女士建設網站的經歷</a> <span>2021-05-31</span> </li><li> <a class="text_overflow" href="/news/115779.html">工業(yè)互聯網細分賽道力量正在發(fā)力</a> <span>2021-05-31</span> </li><li> <a class="text_overflow" href="/news/115778.html">網站開發(fā)的過程當中，應該從哪幾個環(huán)節(jié)出發(fā)</a> <span>2021-05-31</span> </li><li> <a class="text_overflow" href="/news/115777.html">電商網站對于企業(yè)品牌宣傳的重要性</a> <span>2021-05-31</span> </li> </ul> </div> <div id="yosskgm" class="bkright tag"> <p><a href="http://www.chinadenli.net/hangye/" target="_blank">行業(yè)建站</a></p> <ul> <li id="mmgwmmc" class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="http://www.chinadenli.net/hangye/jiulousj/" target="_blank">酒樓設計</a> </li><li id="qwickis" class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="http://www.chinadenli.net/hangye/jbgc/" target="_blank">攪拌罐車</a> </li><li id="qqyukyw" class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="http://www.chinadenli.net/hangye/qzgqb/" target="_blank">輕質隔墻板</a> </li><li id="kkoqawo" class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="http://www.chinadenli.net/hangye/putaojia/" target="_blank">葡萄架</a> </li><li id="kqeeysk" class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="http://www.chinadenli.net/hangye/ggsj/" target="_blank">廣告設計</a> </li><li id="aiuawcs" class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="http://www.chinadenli.net/hangye/sclsb/" target="_blank">水處理設備</a> </li><li id="sgseagw" class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="http://www.chinadenli.net/hangye/banjia/" target="_blank">搬家公司</a> </li><li id="yocygki" class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="http://www.chinadenli.net/hangye/fwqtg/" target="_blank">服務器托管</a> </li> </ul> </div> </div> </div> <footer> <div id="qimaeme" class="carousel-inner footjz"> <div id="eeiauue" class="container"> <i class="icon iconfont zbw"></i> 高品質定制 <i class="icon iconfont"></i> 跨終端自動兼容 <i class="icon iconfont"></i> 節(jié)約開發(fā)成本 <i class="icon iconfont"></i> 開發(fā)周期短 <i class="icon iconfont"></i> 一體化服務 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即開始2800定制網站建設</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制網站建設</button> </div> </div> <div id="aggmoqs" class="carousel-inner bqsy"> <div id="uwwuomc" class="container"> <div id="mwwgmkc" class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">網站建設<span>QQ</span>：532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">營銷推廣<span>QQ</span>：631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">網站制作<span>QQ</span>：532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">營銷推廣<span>QQ</span>：631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a> <div id="qkqayas" class="dz">專注： <a target="_blank">定制網站建設</a><a target="_blank">做網站</a><a target="_blank">服務器托管</a><a target="_blank">成都網站制作</a><a target="_blank">廣告設計</a> <address>地址：成都太升南路288號錦天國際A幢10樓</address> </div> </div> <div id="iiacuwk" class="bzdh dz"><img src="../imges/bottom_logo.png" alt="創(chuàng)新互聯"> <p><a href="http://www.chinadenli.net/menu.html" target="_blank">成都創(chuàng)新互聯科技有限公司</a><br> Tel：400-028-6601（7x24h）</p></div> </div> </div> </footer> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://www.chinadenli.net/" title="欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区">欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区</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="uugkm" class="pl_css_ganrao" style="display: none;"><option id="uugkm"></option><td id="uugkm"></td><pre id="uugkm"></pre><menu id="uugkm"><noframes id="uugkm"><td id="uugkm"></td></noframes></menu><tbody id="uugkm"></tbody><rt id="uugkm"></rt><em id="uugkm"></em><bdo id="uugkm"><abbr id="uugkm"><abbr id="uugkm"></abbr></abbr></bdo><cite id="uugkm"><xmp id="uugkm"><em id="uugkm"></em></xmp></cite><tr id="uugkm"><optgroup id="uugkm"><tfoot id="uugkm"></tfoot></optgroup></tr><tfoot id="uugkm"></tfoot><button id="uugkm"><del id="uugkm"><cite id="uugkm"></cite></del></button><option id="uugkm"><code id="uugkm"><li id="uugkm"></li></code></option><table id="uugkm"><li id="uugkm"><small id="uugkm"></small></li></table><center id="uugkm"><xmp id="uugkm"><option id="uugkm"></option></xmp></center><wbr id="uugkm"></wbr><del id="uugkm"></del><optgroup id="uugkm"></optgroup><button id="uugkm"></button><blockquote id="uugkm"><noframes id="uugkm"><td id="uugkm"></td></noframes></blockquote><strike id="uugkm"></strike><tfoot id="uugkm"></tfoot><acronym id="uugkm"></acronym><acronym id="uugkm"></acronym><table id="uugkm"></table><option id="uugkm"></option><small id="uugkm"></small><pre id="uugkm"></pre><noscript id="uugkm"></noscript><table id="uugkm"><strike id="uugkm"><del id="uugkm"></del></strike></table><li id="uugkm"></li><sup id="uugkm"><li id="uugkm"><tr id="uugkm"></tr></li></sup><source id="uugkm"></source><delect id="uugkm"><table id="uugkm"><menu id="uugkm"></menu></table></delect><del id="uugkm"></del><dfn id="uugkm"><nav id="uugkm"><delect id="uugkm"></delect></nav></dfn><samp id="uugkm"></samp><dd id="uugkm"></dd><noframes id="uugkm"></noframes><wbr id="uugkm"></wbr><small id="uugkm"></small><acronym id="uugkm"><option id="uugkm"><wbr id="uugkm"></wbr></option></acronym><strike id="uugkm"></strike><th id="uugkm"></th><fieldset id="uugkm"></fieldset><noframes id="uugkm"></noframes><th id="uugkm"></th><tr id="uugkm"><table id="uugkm"><center id="uugkm"></center></table></tr><tr id="uugkm"><th id="uugkm"><delect id="uugkm"></delect></th></tr><dd id="uugkm"><tbody id="uugkm"><kbd id="uugkm"></kbd></tbody></dd><input id="uugkm"></input><source id="uugkm"></source><sup id="uugkm"></sup><fieldset id="uugkm"><button id="uugkm"><bdo id="uugkm"></bdo></button></fieldset><abbr id="uugkm"></abbr><menu id="uugkm"></menu><blockquote id="uugkm"><rt id="uugkm"><abbr id="uugkm"></abbr></rt></blockquote><sup id="uugkm"></sup><sup id="uugkm"><th id="uugkm"><samp id="uugkm"></samp></th></sup><em id="uugkm"><fieldset id="uugkm"><button id="uugkm"></button></fieldset></em><sup id="uugkm"></sup><tbody id="uugkm"></tbody><s id="uugkm"></s><rt id="uugkm"></rt><center id="uugkm"><button id="uugkm"><dfn id="uugkm"></dfn></button></center><object id="uugkm"><tr id="uugkm"><center id="uugkm"></center></tr></object><source id="uugkm"><center id="uugkm"><small id="uugkm"></small></center></source><nav id="uugkm"></nav><tr id="uugkm"></tr><acronym id="uugkm"></acronym><abbr id="uugkm"></abbr><table id="uugkm"></table><tbody id="uugkm"><source id="uugkm"><center id="uugkm"></center></source></tbody><cite id="uugkm"></cite><menu id="uugkm"></menu><tfoot id="uugkm"></tfoot><em id="uugkm"><strong id="uugkm"><dd id="uugkm"></dd></strong></em><tr id="uugkm"></tr><tr id="uugkm"><input id="uugkm"><dfn id="uugkm"></dfn></input></tr><source id="uugkm"><center id="uugkm"><blockquote id="uugkm"></blockquote></center></source><wbr id="uugkm"></wbr><th id="uugkm"></th><xmp id="uugkm"></xmp><strike id="uugkm"></strike><source id="uugkm"></source><tr id="uugkm"></tr><pre id="uugkm"></pre><sup id="uugkm"></sup><button id="uugkm"><wbr id="uugkm"><nav id="uugkm"></nav></wbr></button><tbody id="uugkm"></tbody><tr id="uugkm"><input id="uugkm"><tbody id="uugkm"></tbody></input></tr><abbr id="uugkm"></abbr><bdo id="uugkm"></bdo><blockquote id="uugkm"><ul id="uugkm"><nav id="uugkm"></nav></ul></blockquote><center id="uugkm"></center><del id="uugkm"></del><tbody id="uugkm"><em id="uugkm"><kbd id="uugkm"></kbd></em></tbody><optgroup id="uugkm"></optgroup><nav id="uugkm"><strike id="uugkm"><noframes id="uugkm"></noframes></strike></nav><noframes id="uugkm"><acronym id="uugkm"><tbody id="uugkm"></tbody></acronym></noframes></div> </html>