HTML最新標準HTML5總結(必看)

2020-03-22 19:23:15

字體：大中小

來源：轉載

供稿：網友

HTML5出來已經很久了，然而由于本人不是搞前端的，只知道有這個東西，具體概念有點模糊（其實就是一系列標準規范啦）；因此去年，專門對HTML5做了個簡單的小結，今天正好看到，整理一下放到我的博客，以免丟失。有錯誤請指正，我是前端菜鳥。先來個目錄，如下：什么是HTML5 HTML5發展歷史 HTML5詳細介紹視頻/音頻、畫布 SVG 、可編輯內容拖放、Web存儲、Web Worker 、服務器發送事件、表單增強功能、語義化標記、更多HTML5標準 HTML5實例分析飛翔的小鳥柱狀圖 HTML5發展展望參考資源什么是HTML5 簡單地說，HTML5就是一系列用來制定現代富Web內容的相關技術的總稱。HTML5 HTML5核心規范 + CSS 3 + JavaScript；其中HTML5和CSS主要負責界面，JavaScript負責邏輯處理；目的：減少互聯網富應用（RIA )對Flash、Silverpght、Java Applet等的依賴，并且提供更多能有效增強網絡應用的API。如下圖為典型的RIA（Rich Internet Apppcations）網頁，包含一些圖表，視頻，游戲等： HTML5發展歷史 2004年，WHATWG（網頁超文本技術工作小組）提出草案Web Apppcations 1.0，即HTML5的前身； 2007年，W3C同意采納HTML5作為標準，并成立了新的HTML工作團隊； 2014年10月28日，W3C正式發布HTML5.0推薦標準； 2016年底前，計劃發布HTML 5.1；未來，待HTML5.1公布后，工作組會重復HTML5.1步驟再搞一個新的HTML5.2，繼續完善、豐富功能。如下表格為HTML 5標準演進歷程：
Q：什么是WHATWG？A：Mozilla基金會與Opera軟件公司于2004年6月向W3C提交了一份立場文件遭否決， Mozilla、Opera和Apple便自立門戶成立了WHATWG（網頁超文本技術工作小組），同時也提出Web Apppcations 1.0。Q：HTML5.0與HTML5.1的區別？A：5.1是5.0的超集，5.0中只包含了穩定特性，5.1中包含了5.0中省略掉的不穩定特性和其他新特性；目的：為了盡快及時完成HTML5，W3C舍棄一些不穩定、有爭議的元素，等到后續的5.1版本再考慮。
HTML5詳細介紹HTML5 視頻音頻直到現在，仍然不存在一項旨在網頁上顯示視頻、音頻的標準，大多數通過插件（比如 Flash）來顯示的；但是，有了HTML5，我們可以不依賴任何插件，簡單的使用video和audio標簽來實現音視頻的播放，如下代碼：XML/HTML Code復制內容到剪貼板 videowidth= 320 height= 240 controls= controls sourcesrc= /i/movie.ogg type= video/ogg sourcesrc= /i/movie.mp4 type= video/mp4 Yourbrowserdoesnotsupportthevideotag. /video XML/HTML Code復制內容到剪貼板 audiocontrols= controls sourcesrc= /i/song.ogg type= audio/ogg sourcesrc= /i/song.mp3 type= audio/mpeg Yourbrowserdoesnotsupporttheaudioelement. /audio 如下，為視頻和音頻的效果圖: Tips：
1、HTML5 video 、 audio 元素擁有方法、屬性和事件。可以用js動態控制視頻音頻播放暫停等動作；
2、Video 、audio元素允許多個 source 元素。source 元素可以鏈接不同的文件。瀏覽器將使用第一個可識別的格式PS：YouTube默認就是使用HTML5播放器，可以登錄其網址www.youtube.com查看源碼，如下:HTML5 Canvas SVG 畫布Canvas HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。XML/HTML Code復制內容到剪貼板 canvasid= myCanvas width= 200 height= 100 > Yourbrowserdoesnotsupportthecanvaselement. /canvas scripttype= text/javascript varc=document.getElementById( myCanvas varccxt=c.getContext( 2d cxt.moveTo(10,10); cxt.pneTo(150,50); cxt.pneTo(10,50); cxt.stroke(); /script 如下，為效果圖：可伸縮矢量圖形 (Scalable Vector Graphics)XML/HTML Code復制內容到剪貼板 svgxmlns= http://www.w3.org/2000/svg version= 1.1 height= 190 polygonpoints= 100,1040,180190,6010,60160,180 > /svg Canvas SVG 的常見應用使用canvas和SVG可以實現很多小應用，特別是canvas，如下圖例子：HTML5 可編輯內容拖放 Contenteditable全局屬性Contenteditable可用于實現網頁編輯器，當前很多網頁編輯器都用這個屬性實現，如下圖：Drag 和 dropHTML5 的拖放將會把與用戶交互帶向另一個等級，并將會對如何設計用戶交互產生重大影響。主要的事件函數：Ondragstart()、Ondragover()、Ondrop()；如下為一個代碼示例，將一個p拖放到另一個p里：JavaScript Code復制內容到剪貼板 scripttype= text/javascript functionallowDrop(ev) { ev.preventDefault(); } functiondrag(ev) { ev.dataTransfer.setData( Text ,ev.target.id); } functiondrop(ev) { ev.preventDefault(); vardata=ev.dataTransfer.getData( Text ); ev.target.appendChild(document.getElementById(data)); } /script /head body pid= p1 ondrop= drop(event) ondragover= allowDrop(event) imgsrc= /i/w3school_logo_black.gif draggable= true ondragstart= drag(event) id= drag1 / /p pid= p2 ondrop= drop(event) ondragover= allowDrop(event) /p HTML5 Web存儲在講HTML5 的Web存儲之前，先來說說cookie劣勢，主要有以下三點：html' target='_blank'>Cookie會被附加在每個HTTP請求中，無形中增加了流量。由于在HTTP請求中的Cookie是明文傳遞的，所以安全性成問題。（除非用HTTPS） Cookie的大小限制在4KB左右。對于復雜的存儲需求來說是不夠用的。再來看看HTML5 Web存儲的優勢：沒有額外的的請求頭部數據豐富的方法去設置、讀取、移除數據默認5MB存儲限制在HTML5中，Web存儲有兩種形式：localStorag、sessionStorage，如下：localStorage 存儲的數據沒有時間限制；JavaScript Code復制內容到剪貼板 scripttype= text/javascript localStorage.lastname= Smith ; document.write( Lastname: +localStorage.lastname); /script sessionStorage當用戶關閉瀏覽器窗口后，數據會被刪除JavaScript Code復制內容到剪貼板 scripttype= text/javascript sessionStorage.lastname= Smith ; document.write(sessionStorage.lastname); /script Tips:
Cookie是不可或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在，而Web Storage僅僅是為了在本地存儲數據而生。HTML5 Web Workers web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能（JS多線程工作解決方案）。Web Worker的基本原理就是在當前javascript的主線程中，使用Worker類加載一個javascript文件來開辟一個新的線程，起到互不阻塞執行的效果，并且提供主線程和新線程之間數據交換的接口：postMessage，onmessage。優勢：異步執行復雜計算，不影響頁面的展示如下為一個求和的代碼示例：JavaScript Code復制內容到剪貼板 script varw; functionstartWorker(){ if(typeof(Worker)!== undefined ){ if(typeof(w)== undefined ){ w=newWorker( rs/demo_workers.js ); } w.onmessage=function(event){ document.getElementById( result ).innerHTML=event.data; }; }else{ document.getElementById( result ).innerHTML= Sorry,yourbrowserdoesnotsupportWebWorkers... ; } } functionstopWorker(){ w.terminate(); } /script demo_workers.js文件，其中的postMessage()方法，用于向 HTML 頁面傳回一段消息。JavaScript Code復制內容到剪貼板 vari=0; functiontimedCount() { i=i+1; postMessage(i); setTimeout( timedCount() ,500); } timedCount();Tips:1.不能跨域加載JS2.worker內代碼不能訪問DOMHTML 5 服務器發送事件傳統的網頁都是瀏覽器向服務器查詢數據，但是很多場合，最有效的方式是服務器向瀏覽器發送數據。比如，每當收到新的電子郵件，服務器就向瀏覽器發送一個通知，這要比瀏覽器按時向服務器查詢（polpng）更有效率。HTML5 服務器發送事件（server-sent event）允許網頁獲得來自服務器的更新；舉個例子，如下，其中服務器端使用Java的Struts 2框架，會向瀏覽器發送服務器最新的時間數據：服務端代碼：JavaScript Code復制內容到剪貼板 pubpcclassSSEextendsActionSupport{ privateInputStreamsseStream; pubpcInputStreamgetSseStream(){ returnsseStream; } pubpcStringhandleSSE(){ System.out.println( InsidehandleSSE() ); Stringresult= data: +newDate().toString()+ /n/n ; sseStream=newByteArrayInputStream(result.getBytes()); System.out.println( ExitinghandleSSE() ); returnSUCCESS; } }JavaScript Code復制內容到剪貼板 actionname= handleSSE > resultname= success type= stream paramname= contentType text/event-stream /param paramname= inputName sseStream /param /result /action 客戶端代碼：JavaScript Code復制內容到剪貼板 p outputid= result OUTPUTVALUE /output /p script (function(global,window,document){ 'usestrict'; functionmain(){ window.addEventpstener('DOMContentLoaded',contentLoaded); } functioncontentLoaded(){ varresult=document.getElementById('result'); varstream=newEventSource('handleSSE.action'); stream.onmessage=function(event){ vardata=event.data+ byonmessage ; result.value=data; } } main(); })(this,window,window.document); /script HTML 5 表單增強功能新的 Input 類型 email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color下圖為各個input元素的效果圖：下圖為各個input元素的效果圖：HTML5 的新的表單元素 datapst keygen output下圖為datapst的示例：HTML5 的新的表單屬性新的 form 屬性： autocomplete Novapdate 新的 input 屬性： autocomplete autofocus form height 和 width pst min, max 和 step multiple pattern (regexp) placeholder Required form overrides (formaction, formenctype, formmethod, formnovapdate, formtarget)下表為各個瀏覽器對表單屬性的支持情況：
HTML5語義化標記 HTML5 可以使用語義化的標簽代替大量的無意義的p標簽。這種語義化的特性不僅提升了網頁的質量和語義，并且減少了以前用于CSS或JS調用的class和id屬性。更多HTML 5標準 HTML5推薦標準（W3C網址推薦標準） http://www.w3.org/TR/html5/或者參考w3schoolHTML5 完整的新標簽 http://www.w3school.com.cn/tags/index.aspHTML 全局屬性 http://www.w3school.com.cn/tags/html_ref_standardattributes.asp全局事件屬性 http://www.w3school.com.cn/tags/html_ref_eventattributes.aspHTML5實例分析飛翔的小鳥基于Phaser（開源的HTML5 2D游戲開發框架），主要需要編寫以下三個函數：Preload函數（執行一次）：加載資源（背景、圖片等資源）Create函數（執行一次）：給鳥一個向下的重力，不受控制的時候自動下落添加鍵盤空格事件，按下空格時改變小鳥坐標創建墻壁事件，每隔1.5s，出現一排墻壁往左移動（中間隨機隔3塊）Update函數（每幀執行）：判斷是否飛出邊界判斷是否碰到墻壁效果圖如下：柱狀圖表主要步驟：利用canvas畫出圖形定義鼠標點擊事件（獲取鼠標坐標來區分點擊的目標），$(canvas).on( cpck ,mouseCpck); 定義鼠標hover事件（獲取鼠標坐標來區分hover的目標），$(canvas).on( mousemove ,mouseMove);效果圖：HTML5發展展望當前各大瀏覽器對HTML5支持情況(滿分是555分)，http://html5test.com/一句話，無論是桌面還是手機瀏覽器，谷歌對HTML5的支持最全面。各大公司行動谷歌，宣布自動轉換Flash廣告為HTML5版本；chrome瀏覽器 Youtube ，使用HTML 5的播放器； Amazon，宣布停用所有Flash廣告；騰訊，微信朋友圈小游戲、賀卡或邀請函； QQ空間H5游戲 helpp; 百度，直達號；阿里，UC瀏覽器，手機淘寶H5游戲 helpp;以上這篇HTML最新標準HTML5總結(必看)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/chenpi/archive/2016/06/12/5578011.htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：淺談html中input只讀屬性readonly和disable的區別

下一篇：HTML標題標簽元素怎么修改