摺疊 編輯本段 簡介
HTML標準自1999年12月發佈的HTML4.01後,後繼的HTML5和其它標準被束之高閣,爲了推進Web標準化運動的發展,一些公司聯合起來,成立了一個叫作 Web Hypertext Application Technology Working Group (Web超文本應用技術工做組 -WHATWG) 的組織。WHATWG 致力於 Web 表單和應用程序,而W3C(World Wide Web Consortium,萬維網聯盟) 專一於XHTML2.0。在 2006 年,雙方決定進行合做,來建立一個新版本的 HTML。
HTML5草案的前身名爲 Web Applications 1.0,於2004年被WHATWG提出,於2007年被W3C接納,併成立了新的 HTML 工做團隊。
HTML 5 的第一份正式草案已於2008年1月22日公佈。HTML5 仍處於完善之中。然而,大部分現代瀏覽器已經具有了某些 HTML5 支持。
2012年12月17日,萬維網聯盟(W3C)正式宣佈凝結了大量網絡工做者心血的HTML5規範已經正式定稿。根據W3C的發言稿稱:「HTML5是開放的Web網絡平臺的奠定石。」
2013年5月6日, HTML 5.1 正式草案公佈。該規範定義了第五次重大版本,第一次要修訂萬維網的核心語言:超文本標記語言(HTML)。在這個版本中,新功能不斷推出,以幫助Web應用程序的做者,努力提升新元素互操做性。
本次草案的發佈,從2012年12月27日至今,進行了多達近百項的修改,包括HTML和XHTML的標籤,相關的API、Canvas等,同時HTML5的圖像img標籤及svg也進行了改進,性能獲得進一步提高。
支持Html5的瀏覽器包括Firefox(火狐瀏覽器),IE9及其更高版本,Chrome(谷歌瀏覽器),Safari,Opera等;國內的傲遊瀏覽器(Maxthon),以及基於IE或Chromium(Chrome的工程版或稱實驗版)所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器一樣具有支持HTML5的能力。
摺疊 編輯本段 特性
語義特性(Class:Semantic)
HTML5賦予網頁更好的意義和結構。更加豐富的標籤將隨着對RDFa的,微數據與微格式等方面的支持,構建對程序、對用戶都更有價值的數據驅動的Web。
本地存儲特性(Class: OFFLINE STORAGE)
基於HTML5開發的網頁APP擁有更短的啓動時間,更快的聯網速度,這些全得益於HTML5 APP Cache,以及本地存儲功能。Indexed DB(html5本地存儲最重要的技術之一)和API說明文檔。
設備兼容特性 (Class: DEVICE ACCESS)
從Geolocation功能的API文檔公開以來,HTML5爲網頁應用開發者們提供了更多功能上的優化選擇,帶來了更多體驗功能的優點。HTML5提供了史無前例的數據與應用接入開放接口。使外部應用能夠直接與瀏覽器內部的數據直接相連,例如視頻影音可直接與microphones及攝像頭相聯。
鏈接特性(Class: CONNECTIVITY)
更有效的鏈接工做效率,使得基於頁面的實時聊天,更快速的網頁遊戲體驗,更優化的在線交流獲得了實現。HTML5擁有更有效的服務器推送技術,Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特性可以幫助咱們實現服務器將數據「推送」到客戶端的功能。
網頁多媒體特性(Class: MULTIMEDIA)
支持網頁端的Audio、Video等多媒體功能, 與網站自帶的APPS,攝像頭,影音功能相得益彰。
三維、圖形及特效特性(Class: 3D, Graphics Effects)
基於SVG、Canvas、WebGL及CSS3的3D功能,用戶會驚歎於在瀏覽器中,所呈現的驚人視覺效果。
性能與集成特性(Class: Performance Integration)
沒有用戶會永遠等待你的Loading——HTML5會經過XMLHttpRequest2等技術,幫助您的Web應用和網站在多樣化的環境中更快速的工做。
CSS3特性(Class: CSS3)
在不犧牲性能和語義結構的前提下,CSS3中提供了更多的風格和更強的效果。此外,較之之前的Web排版,Web的開放字體格式(WOFF)也提供了更高的靈活性和控制性。
摺疊 編輯本段 現狀
在移動設備開發HTML5應用只有兩種方法,要不就是全使用HTML5的語法,要不就是僅使用JavaScript引擎。
JavaScript引擎的構建方法讓製做手機網頁遊戲成爲可能。因爲界面層很複雜,已預訂了一個UI工具包去使用。
純HTML5手機應用運行緩慢並錯漏百出,但優化後的效果會好轉。儘管不是不少人願意去作這樣的優化,但依然能夠去嘗試。
HTML5手機應用的最大優點就是能夠在網頁上直接調試和修改。原生應用的開發人員可能須要花費很是大的力氣才能達到HTML5的效果,不斷地重複編碼、調試和運行,這是首先得解決的一個問題。如今html5的應用已經至關普遍,將來移動互聯網都須要用到html5開發應用[2]
HTML5的移植很是簡單,但假設每一個人都會讓這變成一個自動化操做。 若是你想在移動互聯網這一塊有所發展,成爲web前端大神,你能夠來這個羣,前面是四一八,中間是355,後面是五三一。連起來就能夠了。 這裏有不少互聯網大牛教你學習,還有免費的課程。不是想學習的就不要加了。
摺疊 編輯本段 優勢
摺疊 網絡標準
HTML5自己是由W3C推薦出來的,它的開發是經過谷歌、蘋果,諾基亞、中國移動等幾百家公司一塊兒醞釀的技術,這個技術最大的好處在於它是一個公開的技術。換句話說,每個公開的標準均可以根據W3C的資料庫找尋根源。另外一方面,W3C經過的HTML5標準也就意味着每個瀏覽器或每個平臺都會去實現。
摺疊 多設備、跨平臺
用HTML5的優勢主要在於,這個技術能夠進行跨平臺的使用。好比你開發了一款HTML5的遊戲,你能夠很輕易地移植到UC的開放平臺、Opera的遊戲中心、Facebook應用平臺,甚至能夠經過封裝的技術發放到App Store或Google Play上,因此它的跨平臺很是強大,也是大多數人對HTML5有興趣的主要緣由。
自適應網頁設計
很早就有人設想,能不能」一次設計,廣泛適用」,讓同一張網頁自動適應不一樣大小的屏幕,根據屏幕寬度,自動調整佈局(layout)?
2010年,Ethan Marcotte提出了」自適應網頁設計「這個名詞,指能夠自動識別屏幕寬度、並作出相應調整的網頁設計。
這就解決了傳統的一種局面——網站爲不一樣的設備提供不一樣的網頁,好比專門提供一個mobile版本,或者iPhone / iPad版本。這樣作當然保證了效果,可是比較麻煩,同時要維護好幾個版本,並且若是一個網站有多個portal(入口),會大大增長架構設計的複雜度。
摺疊 即時更新
遊戲客戶端每次都要更新,很麻煩。但是更新HTML5遊戲就好像更新頁面同樣,是立刻的、即時的更新。
總結歸納HTML5有如下優勢:
一、提升可用性和改進用戶的友好體驗;
二、有幾個新的標籤,這將有助於開發人員定義重要的內容;
三、能夠給站點帶來更多的多媒體元素(視頻和音頻);
四、能夠很好的替代FLASH和Silverlight;
五、當涉及到網站的抓取和索引的時候,對於SEO很友好;
六、將被大量應用於移動應用程序和遊戲。
摺疊 編輯本段 盈利方案
摺疊 編輯本段 沿革
HTML5提供了一些新的元素和屬性,例如nav(網站導航塊)和footer。這種標籤將有利於搜索引擎的索引整理,同時更好的幫助小屏幕裝置和視障人士使用,除此以外,還爲其餘瀏覽要素提供了新的功能,如audio和video標記。
一、取消了一些過期的HTML4標記
其中包括純粹顯示效果的標記,如font和center,它們已經被CSS取代。
HTML5 吸收了XHTML2 一些建議,包括一些用來改善文檔結構的功能,好比,新的HTML 標籤 header, footer, dialog, aside, figure 等的使用,將使內容創做者更加語義地建立文檔,以前的開發者在實現這些功能時通常都是使用div。
二、將內容和展現分離
b 和 i 標籤依然保留,但它們的意義已經和以前有所不一樣,這些標籤的意義只是爲了將一段文字標識出來,而不是爲了爲它們設置粗體或斜體式樣。u,font,center,strike 這些標籤則被徹底去掉了。
三、一些全新的表單輸入對象
包括日期,URL,Email 地址,其它的對象則增長了對非拉丁字符的支持。HTML5 還引入了微數據,這一使用機器能夠識別的標籤標註內容的方法,使語義Web 的處理更爲簡單。總的來講,這些與結構有關的改進使內容建立者能夠建立更乾淨,更容易管理的網頁,這樣的網頁對搜索引擎,對讀屏軟件等更爲友好。
四、全新的,更合理的Tag
多媒體對象將再也不所有綁定在object或 embed Tag 中,而是視頻有視頻的Tag,音頻有音頻的 Tag。
五、本地數據庫
這個功能將內嵌一個本地的SQL 數據庫,以加速交互式搜索,緩存以及索引功能。同時,那些離線Web 程序也將所以獲益匪淺。不須要插件的豐富動畫。
六、Canvas 對象
將給瀏覽器帶來直接在上面繪製矢量圖的能力,這意味着用戶能夠脫離Flash 和Silverlight,直接在瀏覽器中顯示圖形或動畫。
七、瀏覽器中的真正程序
將提供 API 實現瀏覽器內的編輯,拖放,以及各類圖形用戶界面的能力。內容修飾Tag 將被剔除,而使用CSS。
八、Html5取代Flash在移動設備的地位。
摺疊 重要標記
video標記
定義和用法:
video 標籤訂義視頻,好比電影片斷或其餘視頻流。
audio 標記
定義和用法
audio 標籤訂義聲音,好比音樂或其餘音頻流。
實例:
一段簡單的HTML 5 音頻
audio src=someaudio.mp4
您的瀏覽器不支持 audio 標籤。
/audio
canvas 標記
定義和用法:
canvas 標籤訂義圖形,好比圖表和其餘圖像。
HTML5 的 canvas 元素使用JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域,您能夠控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
實例:
經過 canvas 元素來顯示一個紅色的矩形:
canvas id=myCanvas/canvas
script type=text/javascript
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
fillStyle='#FF0000';
fillRect(0,0,80,100);
/script
摺疊 程序接口
除了原先的DOM接口,HTML5增長了更多API,如:
1. 用於即時2D繪圖的Canvas標籤
2. 定時媒體回放
3. 離線數據庫存儲
4.文檔編輯
5. 拖拽控制
6. 瀏覽歷史管理
摺疊 元素變化
新的解析順序新的元素:section, video, progress, nav, meter, time, aside, canvasinput
元素的新屬性:日期和時間,email, url。
新的通用屬性:ping, charset, async
全域屬性:id, tabindex, repeat。
移除元素:center, font, strike。
摺疊 異常處理
HTML 5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML 5在設計時保證舊的瀏覽器可以安全的忽略掉新的HTML 5代碼。與HTML 4.01相比,HTML 5給出瞭解析的詳細規則,力圖讓不一樣的瀏覽器即便在發生語法錯誤時也能返回相同的結果。
摺疊 編輯本段 控件
就是Html標註的屬性里加上runat=server所構成的控件,至於Html標註和Html控件之間的區別很明顯,Html控件是運行於服務器端,Html標註是運行於客戶端。
基本Html控件有:HtmlTexAreakongjianHtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。
自定義的Html控件是根據本身的需求定義。當自主開發效率低,能夠從技術社區、源碼網站下載須要的控件。好比,須要插入table, image, links 等標籤。沒必要本身開發,可使用:ComponentOne Wijmo Editor等。
免費HTML5圖表庫
領先的.Net圖表控件Chart FX深受你們喜好,相信你們已經很是熟悉了。不過今天慧都從Chart FX的開發商SoftwareFX得到一個激動人心的消息:該公司近日推出一套爲HTML5,jQuery和JavaScript開發者設計的圖表庫——jChartFX,並且jChartFX是免費的!
摺疊 編輯本段 圖表庫
領先的.Net圖表控件Chart FX深受你們喜好,相信你們已經很是熟悉了。Chart FX的開發商SoftwareFX推出的一套爲HTML五、jQuery和JavaScript開發者設計的免費HTML5圖表庫——jChartFX!
jChartFX亮點:
jChartFX充分利用了HTML5,CSS和SVG,讓您可以在瀏覽器提供美觀優越的圖表和更豐富的最終用戶體驗。
jChartFX擁有不少使人振奮的功能,它在無插件純JavaScript的瀏覽器上運行,這意味着在提升了網站安全性和速度的同時,最大程度的減小了網站服務器的負荷。
jChartFX還可以自動整合到jQuery UI ThemeRoller,自動讀取並解釋jQuery的主題和CSS文件,可以快速適應您的頁面佈局和設計,無需一行代碼。
jChartFX支持JSON,JSON可以幫助您實現,任何數據源中的數據均可以展示到圖表中。
jChartFX還支持超過40種的2D、3D圖表類型,免費的圖表控件中支持如此之多的圖表展現類型實屬可貴。
摺疊 編輯本段 爭議
摺疊 編輯本段 規範
HTML5和Canvas 2D規範的制定已經完成,儘管還不能算是W3C標準,可是這些規範已經功能完整,企業和開發人員有了一個穩定的執行和規劃目標。
W3C首席執行官Jeff Jaffe表示:「從今天起,企業用戶能夠清楚地知道,他們可以在將來依賴HTML5。」HTML5是開放Web標準的基石,它是一個完整的編程環境,適用於跨平臺應用程序、視頻和動畫、圖形、風格、排版和其它數字內容發佈工具、普遍的網絡功能等等。
爲了減小瀏覽器碎片、實現於全部HTML工具的應用,W3C從今天開始着手W3C標準化的互操做性和測試。和以前宣佈的規劃同樣,W3C計劃在2014年完成HTML5標準。
HTML工做組還發布了HTML5.一、HTML Canvas 2D Context、Level 2以及主要元素的草案,讓開發人員能提早預覽下一輪標準。
摺疊 編輯本段 發展趨勢
HTML5規範開發完成時,將成爲主流。
據統計2013年全球將有10億手機瀏覽器支持HTML5,同時HTML Web開發者數量將達到200萬。毫無疑問,HTML5將成爲將來5-10年內,移動互聯網領域的主宰者。
據IDC的調查報告統計,截至2012年5月,有79%的移動開發商已經決定要在其應有程序中整 合HTML5技術。
12月,萬維網聯盟宣佈已經完成對HTML5標準以及Canvas 2D性能草案的制定,這就意味着開發人員將會有一個穩定的「計劃和實施」目標。有不少的文章都在號召使用 HTML5,並大力宣傳它的的好處。此前,站長之家曾經作過一期調查,調查顯示只有36.16%的站長正在學習中,另外的63.76%表示正在觀望中。做爲站長,你是否準備開始學習HTML5?
從性能角度來講,HTML5首先是縮減了HTML文檔,使這件事情變得更簡單。第一,從用戶可讀性上說,原先一大堆東西,像初學者第一次看到這些東 西是看不懂的,而HTML5的聲明方式對用戶來講顯然更友好一些。
摺疊 編輯本段 應用須知
它可能會消滅Flash
許多業內人士表示,HTML將會最終代替多媒體框架,如Adobe的Flash,可是短時間看來還不是時候。HTML5估計到2014年才能逐步成熟,並且將現有應用Flash的網絡開發徹底轉向HTML5還須要一段時間。儘管HTML5提出了許多優勢,可是還可能有某些應用更適合於更靈活的框架。一些主流的大公司都逐步轉向使用HTML5,可是這個轉變的過程也不是一蹴而就的。
它新並不表示它安全
網絡應用開發工程師們在學習新技術的同時須要時刻記住網絡安全。HTML5所構建的網頁和其餘語言編寫的網頁同樣容易泄露一些敏感數據。歐洲網絡信息安全機構(European Network and Information Security Agency,ENISA)已經警告說HTML5可能並不夠安全。
它承諾帶來一個無縫的網絡
HTML5會帶來一個統一的網絡,不管是筆記本,臺式機,仍是智能手機都應該很方便的瀏覽基於HTML5的網站。所以在設計網站的時候,開發者須要從新考慮用戶體驗,網站瀏覽,網站結構等因素使得這個網站對任何硬件設備都通用。
它會變成企業的SaaS平臺
一些重量級的企業,如微軟,Salesforce,SAP Sybase正在開發HTML5的開發工具。若是你正在構建企業應用,極可能不久的未來你就要用到HTML5。因此當構建公司的SaaS戰略遷移的時候也不要忘記HTML5。
它將會變得很移動
幾乎全部人都熱衷於開發獨立的移動應用,可是HTML5極可能會是獨立移動應用的終結者。因爲HTML5將應用的功能直接加入其內核,這極可能引導移動技術潮流從新回到瀏覽器時代。HTML5容許開發者在(移動)瀏覽器內開發應用,因此若是你正在制定一項桌面或者移動應用的長期發展策略,你可能須要考慮這一點。
摺疊 編輯本段 漏洞
2013年3月,HTML5編程語言的一個漏洞被發現:它容許網站利用數GB垃圾數據對用戶展開轟炸,甚至會在短期內將硬盤塞滿。多款主流瀏覽器均會受此影響。
一位名叫菲羅斯·阿伯克哈迪傑哈(Feross Aboukhadijeh)的開發者率先發現了這一漏洞,他表示,多數主流網絡瀏覽器均會受到影響,包括蘋果Safari、谷歌Chrome、微軟IE和Opera。惟一可以阻止數據大量加載的是Mozilla的火狐瀏覽器,該產品的數據存儲上限爲5MB。
該問題的根源在於HTML5存儲本地數據的方式。雖然每一個瀏覽器都有不一樣的存儲參數,但不少都支持用戶自定義限制,且至少會在用戶電腦上存儲2.5MB數據。
阿伯克哈迪傑哈發現了一個繞過數據上限的方法,它建立了多個與用戶訪問過的網站連接的臨時網站。因爲多數瀏覽器不會計算這種偶然狀況,因此二級網站也能夠存儲與主網站相同量的數據。經過大批生成這種網站,該漏洞即可向受影響的電腦加載海量數據。
在測試這一漏洞的過程當中,阿伯克哈迪傑哈每16秒便可向他的固態硬盤版MacBook Pro中加載1GB數據。他指出,Chrome等32位瀏覽器可能會在硬盤塞滿前崩潰。「一些採用高明代碼的網站其實已經取消了用戶電腦對數據存儲的限制。」阿伯克哈迪傑哈說。阿伯克哈迪傑哈已經發布一組代碼來利用該漏洞,並建立了一個名爲Filldisk的專用網站來凸顯該漏洞的危害。
摺疊 編輯本段 將來趨勢
一、移動優先
從現在層出不窮的移動應用就知道,在這個智能手機和將平板電腦大爆炸的時代,移動優先已成趨勢,無論是開發什麼,都以移動爲主。
二、遊戲開發者領銜「主演」
許多遊戲開發商都被Facebook或者Zynga推進着發展,而將來的Facebook應用生態系統是基於HTML5的,儘管在HTML 5平臺開發出遊戲很是困難,但遊戲開發商卻都願意那麼作。經過PhoneGap及appmobi的XDK將Web應用遊戲打包整合到原生應用中也是一種方式,Facebook差很少就這麼幹的——基於Web應用及瀏覽器,但卻將之打包整合進原生應用。
摺疊 編輯本段 HTML5優點
HTML5能夠提供:
1.提升可用性和改進用戶的友好體驗;
2.有幾個新的標籤,這將有主(助?)開發人員定義重要的內容;
3.能夠給站點帶來更多的多媒體元素(視頻和音頻);
4.能夠很好的替代FLASH和Silverlight;
5.當涉及到網站的抓取和索引的時候,對於SEO很友好;
6.將被大量應用於移動應用程序和遊戲。
所以,咱們能夠說HTML5有一天將使WEB更加的美好,可是有一天並非如今。咱們不能不提到重要的一點:迄今爲止,並無什麼流行的瀏覽器能夠完 全的支持HTML5規範的全部功能。須要明確的是,今天的主流瀏覽器都將趨於支持HTML5,可是仍存在許多不徹底的支持或兼容。
谷歌和HTML5
2010年5月22日,谷歌建立了一個塗鴉來記念Pac Man的視頻遊戲。這個塗鴉是一個動畫,同時也是一個能夠玩的Pac Man的遊戲。這個塗鴉就是谷歌經過使用HTML5標準制做的,固然谷歌也提供一個FLASH版原本支持不兼容HTML5的瀏覽器。我敢打賭,這是大多數 互聯網網民第一次和HTML5的接觸。對於我的來講,這是一個興奮的消息。以個人觀點,這個塗鴉提供了一個機會能夠窺視將來互聯網、網頁、移動應用軟件和遊戲等發展趨勢。對於搜索引擎優化,他開闢了我更多的想象,它讓我思考HTML5在SEO領域的潛力。網站轉移到HTML5標準對於SEO有什麼優點?
HTML 5開發領域的領軍人物包括Sencha,Adobe,Appcelerator,appMobi及Facebook,亞馬遜,Google三大巨頭。無論你是想開發出新型視頻應用的開發商如Brightcover仍是想開發新型音頻應用的開發商如Soundcloud,不管是桌面應用仍是移動應用,HTML 5都是創新的主旋律。
HTML5與SEO
一:使搜索引擎更加容易抓取和索引
對於一些網站,特別是那些嚴重依賴於FLASH的網站HTML5是一個大福音。若是你有一個都是FLASH的站點,你就必定會看到切換到HTML5的 好處。首先,搜索引擎的蜘蛛將可以抓取你的站點和索引你的內容。全部嵌入到動畫中的內容將所有能夠被搜索引擎讀取。在搜索引擎優化的基本理論中,這一方面將會驅動你的網站得到更多的右擊流量。
二:提供更多的功能,提升用戶的友好體驗
使用HTML5的另外一個好處就是它能夠增長更多的功能。對於HTML5的功能性問題,咱們從全球幾個主流站點對它的青睞就能夠看出。社交網絡大亨Facebook已經推出他們期待已久的基於HTML5的iPad應用平臺,潘多拉最近也推出他們基於HTML5的音樂播放器的新版本。遊戲平臺 Zynga最近也在推出了三款新的在移動設備瀏覽器上運行的基於HTML5的遊戲等等。天天都有不斷的基於HTML5的網站和HTML5特性的網站被推 出。保持站點處於新技術的前沿,也能夠很好的提升用戶的友好體驗。
三:可用性的提升,提升用戶的友好體驗
最後咱們能夠從可用性的角度上看,HTML5能夠更好的促進用戶於網站間的互動狀況。多媒體網站能夠得到更多的改進,特別是在移動平臺上的應用,使用 HTML5能夠提供更多高質量的視頻和音頻流。到目前爲止,事實就是iPhone和iPad將不會支持FLASH,同時ADOBE公司也在近期公開聲明將 中止FLASH基於移動平臺的開發,如今咱們已經能夠這麼說——移動平臺往後視頻音頻是HTML5的天下![1]