TML5究竟有什么優(yōu)勢?
縱觀HTML5的接觸者——開發(fā)者和終端用戶體驗(yàn),HTML5都有其獨(dú)特魅力。
HTML5技術(shù)是在近幾年逐漸興起的技術(shù),是萬維網(wǎng)的核心語言,是對HTML技術(shù)的第五次重大修改,在2014年10月29日正式發(fā)布。短短幾年時間內(nèi)就被互聯(lián)網(wǎng)企業(yè)廣泛采用,并且發(fā)展勢頭依然強(qiáng)勢!對HTML5人才的需求也在不斷的增加。嚴(yán)格來講,HTML5并不屬于一種真正的編程語言,而是一種標(biāo)記語言。相對于編程語言,HTML5更容易學(xué)習(xí)和掌握。市場的需求以及更容易掌握的特點(diǎn),讓很多人選擇學(xué)習(xí)HTML5。HTML5得以迅速發(fā)展,必然有很強(qiáng)的技術(shù)優(yōu)勢。
首先,HTML5具有及時更新的特性,不同于其他的開發(fā)技術(shù),比如iOS,Android等開發(fā)技術(shù),在產(chǎn)品上線或者更新的時候,必然要通過APP store等平臺的審核才能發(fā)布,而HTML5卻不存在這個問題,可以隨時更新,隨時上線,節(jié)省大量的時間。
第二,HTML5具有很好的跨平臺性,使用HTML5開發(fā)程序,可以很好的做到PC端與移動端的同步上線,支持多種平臺。不需要針對不種的平臺做專門的開發(fā),對于一些中小企業(yè)來說這是其最看重的優(yōu)勢,可以節(jié)省大量的資金。
第三,CSS3特性。在不犧牲性能和語義結(jié)構(gòu)的前提下,CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外,較之以前的Web排版,Web的開放字體格式(WOFF)也提供了更高的靈活性和控制性。
第四,本地存儲特性。得益于HTML5的本地儲存特性,使用HTML5開發(fā)的程序具有更短的啟動時間,更快的加載速度。這樣用戶在使用時,能夠更好的感受體驗(yàn)效果。
第五,更簡潔的代碼。你還為雜亂無章的代碼發(fā)愁嗎?HTML5允許你寫出簡單清晰富于描述的代碼。符合語義學(xué)的代碼允許你分開樣式和內(nèi)容,讓你寫的代碼更加直觀,優(yōu)雅。
HTML5具體有哪些應(yīng)用呢?目前,HTML5開發(fā)最主要的應(yīng)用就是網(wǎng)頁制作以及游戲開發(fā)。在HTML5出現(xiàn)之前,網(wǎng)頁制作只是一個簡單的頁面展示,客戶體驗(yàn)效果不佳,而HTML5的引入,賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對RDFa的,微數(shù)據(jù)與微格式等方面的支持,構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。并且,HTML5制作的網(wǎng)頁能夠自適應(yīng)屏幕的大小,根據(jù)屏幕的大小,自動調(diào)節(jié),這就省卻了很多不必要的麻煩。HTML5新增了canvas對象,可以很好的實(shí)現(xiàn)原來的flash功能,而且不用輔助的插件,利用這個功能再引入Java和CSS可以用來開發(fā)HTML5游戲,尤其是移動端的小游戲。
當(dāng)然,HTML5也并不是十全十美的,每種技術(shù)都有一定的缺陷,HTML5也不例外,比如新標(biāo)簽的引入,各瀏覽器之間將缺少一種統(tǒng)一的數(shù)據(jù)描述格式,造成用戶體驗(yàn)不佳。但無論如何,HTML5的時代已經(jīng)到來了,并已經(jīng)在互聯(lián)網(wǎng)行業(yè)中占據(jù)了半壁江山。HTML5是未來的一個發(fā)展趨勢。
1.HTML5網(wǎng)站
經(jīng)過近3年的發(fā)展,html5技術(shù)已經(jīng)取得成功,是未來網(wǎng)頁技術(shù)的標(biāo)準(zhǔn),在國內(nèi)外都有這方面的網(wǎng)站,數(shù)量多不勝數(shù),相比傳統(tǒng)網(wǎng)站,界面和交互效果都比較優(yōu)秀,或許是大家都認(rèn)識到了它的好處,所以才會有這么多的相關(guān)網(wǎng)站應(yīng)用.
2. HTML5視頻
在國外大型社區(qū)網(wǎng)站FACEBOOK、視頻分享網(wǎng)站YOUTUBE、谷歌和微軟等網(wǎng)站,都已經(jīng)使用html5作為默認(rèn)技術(shù),它的優(yōu)點(diǎn)就是省電,流暢和清晰,因?yàn)椴捎昧私y(tǒng)一的國際標(biāo)準(zhǔn)H.264,國內(nèi)已經(jīng)出現(xiàn)手機(jī)html5視頻網(wǎng)站.這方面的應(yīng)用正在發(fā)展,估計要等到2015年之后,html5視頻才會廣泛被應(yīng)用到各類網(wǎng)站之中.
3. HTML5
以three.js,c3dl、glge和webgl為主的幾個開源html5%203d網(wǎng)頁應(yīng)用框架,已經(jīng)被多個網(wǎng)站使用和傳播,它們的發(fā)展將使得網(wǎng)頁3d應(yīng)用進(jìn)入全新的時代,將會推動頁游的可持續(xù)發(fā)展和技術(shù)標(biāo)準(zhǔn)的統(tǒng)一.
4. HTML5游戲
相信大家都或多或少的玩過html5游戲,這類游戲小巧和流暢,畫面質(zhì)量相當(dāng)高,而且操作容易方便,即使在手機(jī)上也能夠像電腦上一樣玩,甚至借助觸摸屏優(yōu)勢,比在PC電腦更具操作性,但統(tǒng)統(tǒng)這些都只是一個開始,相信數(shù)年之后,html5游戲?qū)⒊蔀樽顭衢T的游戲開發(fā)技術(shù).
5.HTML5廣告
以前網(wǎng)頁中漂浮的,滾動和彈出的,幻燈片或頁面廣告,幾乎清一色flash和gif,但到現(xiàn)在,這個狀況已經(jīng)改變,互聯(lián)網(wǎng)的發(fā)展促使傳統(tǒng)廣告開始向新的形式,即html5動畫及廣告演變.
6. HTML5 APIhtml5
有文件api,本地數(shù)據(jù)庫和眾多標(biāo)簽,能夠輕易就實(shí)現(xiàn)一項(xiàng)網(wǎng)頁應(yīng)用,相比過去需要寫很多代碼才能實(shí)現(xiàn)的功能,如今利用html5技術(shù),只要更短的時間便能得到同樣的效果,交互上進(jìn)一步提高,而且支持觸摸屏,可擴(kuò)展性是它最大的特點(diǎn).
特性
1.語意特性,添加<header><header/><nav><nav>
等標(biāo)簽
2.多媒體, 用于媒介回放的 video 和 audio 元素
3.圖像效果,用于繪畫的 canvas 元素,svg元素等
4.離線 & 存儲,對本地離線存儲的更好的支持,local Store,Cookies等
5.設(shè)備兼容特性 ,HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連,
6.連接特性,更有效的連接工作效率,使得基于頁面的實(shí)時聊天,更快速的網(wǎng)頁游戲體驗(yàn),更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù),Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能
7.性能與集成特性,HTML5會通過XMLHttpRequest2等技術(shù),幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作
新增標(biāo)簽
1.多媒體:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表單元素:<datalist> ,<output> , <keygen>
3.新文檔節(jié)段和綱要:<header>頁面頭部、<section>章節(jié)、<aside>邊欄、<article>文檔內(nèi)容、<footer>頁面底部、<section>章節(jié)、<aside>邊欄、<article>文檔內(nèi)容、<footer>頁面底部
等
使用html5shiv可以解決ie低版本不兼容的問題,只需要在head中加上,當(dāng)版本低于IE9時,瀏覽器會加載html5.js腳本,使得支持html5的新功能,也可以將腳本文件下載到本地
<head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--></head>
localStorage.setItem(key,value)
如果key存在時,更新valuelocalStorage.getItem(key)
如果key不存在返回nulllocalStorage.removeItem(key)
一旦刪除,key對應(yīng)的數(shù)據(jù)將會全部刪除localStorage.clear()
使用removeItem逐個刪除太麻煩,可以使用clear,執(zhí)行的后果是會清除所有l(wèi)ocalStorage對象保存的數(shù)據(jù)識HTML5新特性成為一個合格的web前端開發(fā)工程師! HTML5草案的前身名為Web Applications 1.0,是在2004年由WHATWG提出,再于2007年獲W3C接納,并成立了新的html工作團(tuán)隊(duì)。在2008年1月22日,第一份正式草案發(fā)布。 WHATWG表示該規(guī)范是目前仍在進(jìn)行的工作,仍須多年的努力。目前Firefox、Google Chrome、Opera、Safari(版本4以上)、Internet Explorer 9已支援HTML5技術(shù)。
1、讓W(xué)eb再次回歸到客戶端地步,而且更加的獨(dú)立,減少了對第三方插件的依賴。
比如:之前的html4的標(biāo)準(zhǔn)中并沒有對于視頻、音頻以及其他的富客戶端技術(shù)支持的非常好,這就使得Flash和SilverLight變得異 常的成功。而在HTML5新標(biāo)準(zhǔn)中原生的就支持音頻、視頻、畫布等技術(shù)。讓我們的WEB程序擁有更多富客戶端表現(xiàn)的方式,而且讓我們的WEB程序更加獨(dú) 立,更好的適應(yīng)多種形式的客戶端。
2、對本地離線存儲的更好的支持
由于之前想在客戶端保存一些數(shù)據(jù)都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲,因?yàn)樗鼈冇擅總€對服務(wù)器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。
HTML5提供了兩種在客戶端存儲數(shù)據(jù)的新方法:
localStorage - 沒有時間限制的數(shù)據(jù)存儲
sessionStorage - 針對一個 session 的數(shù)據(jù)存儲
在 HTML5中,數(shù)據(jù)不是由每個服務(wù)器請求傳遞的,而是只有在請求時使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。
對于不同的網(wǎng)站,數(shù)據(jù)存儲于不同的區(qū)域,并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。
HTML5使用 Java 來存儲和訪問數(shù)據(jù)。有了本地數(shù)據(jù)庫的支持,讓一些簡單的離線應(yīng)用也成為了可能。
3、新的特殊內(nèi)容元素,更好的支持SEO以及方便視障人士使用
現(xiàn)在所有的站點(diǎn)基本上都是Div+CSS布局,幾乎所有的文章標(biāo)題、內(nèi)容、輔助介紹等都用Div容器來承載。搜索引擎在抓取頁面內(nèi)容時,因?yàn)闆] 有明確的容器的含義只能去猜測這些標(biāo)簽容器承載的是文章標(biāo)題還是文章內(nèi)容等,HTML5新標(biāo)準(zhǔn)中直接添加了擁有具體含義的html標(biāo)簽比 如:article、footer、header、nav、section
4、更加智能的表單標(biāo)簽
之前的表單標(biāo)簽,僅僅是簡單的類型的約束,比如文本框、文本域、下拉列表等,而跟業(yè)務(wù)結(jié)合緊密的表單標(biāo)簽數(shù)據(jù)校驗(yàn)等控制都沒有很好的支持,而是 用這些技術(shù)都基本上都是跟第三方的JS控件進(jìn)行結(jié)合使用,但是這些第三方總會涉及到版本控制、瀏覽器兼容性、非標(biāo)準(zhǔn)等一系列的問題,而在HTML5的標(biāo)準(zhǔn) 中直接添加了智能表單,讓這一切都變得那么的簡單,比如 calendar、date、time、email、url、search。
5、HTML5即時二維繪圖 ,也就是畫布的引入,讓Java子彈飛
畫布的引入使得:Web端生成動畫效果、制作Web游戲、更好的交互體驗(yàn)設(shè)計都增加了無限的變數(shù),當(dāng)社區(qū)充斥著亂七八糟超炫的HTML5的JS 控制的效果的時候,讓人無限的贊嘆。HTML5的canvas 元素使用Java 在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域,您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
6、JS嗑藥了,支持多線程
在不影響UI update 及 瀏覽器與用戶交互的情況下, 前端做大規(guī)模運(yùn)算,只能通過 setTimeout 之類的去模擬多線程 。而新的標(biāo)準(zhǔn)中,JS新增的HTML5 Web Worker對象原生的就支持多線程。
7、WebSockets讓跨域請求、長連接、數(shù)據(jù)推送等一切都變得那么簡單,Web不僅僅是Ajax
WebSockets是在一個(TCP)接口進(jìn)行雙向通信的技術(shù),PUSH技術(shù)類型。WebSocket是HTML5規(guī)范新引入的功能,用于解 決瀏覽器與后臺服務(wù)器雙向通訊的問題,使用WebSocket技術(shù),后臺可以隨時向前端推送消息,以保證前后臺狀態(tài)統(tǒng)一,在傳統(tǒng)的無狀態(tài)HTTP協(xié)議中, 這是“無法做到”的。
8、更好的異常處理
HTML5 (text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML5在設(shè)計時保證舊的瀏覽器能夠安全地忽略掉新的HTML5代碼。與HTML4.01相比,HTML5給出了解析的完整規(guī)則,讓不同的瀏覽器即使在發(fā)生語法錯誤時也能返回完全相同的結(jié)果。
9、文件API讓文件上傳和操縱文件變得那么簡單
由于項(xiàng)目中經(jīng)常遇到用Web應(yīng)用中控制操作本地文件,而之前都是使用一些富客戶端技術(shù)比如flash,ActiveX,Silverlight 等技術(shù),面對文件JS就是個shit,就是個雞肋。在HTML5的新的提供的FHTML5 File API 讓JS可以輕松上陣了。
10、編輯、拖放、微數(shù)據(jù)、瀏覽歷史管理、地理信息接口API、設(shè)備硬件操作API等很多的新功....
HTML5的未來?
當(dāng)然HTML5不是孤立的,Java API的增強(qiáng),讓JS變成異常強(qiáng)大的未來的編程武器。CSS3帶給未來Web應(yīng)用也是極大的新的挑戰(zhàn)。相信由于HTML5標(biāo)準(zhǔn)化的支持,相信未來Web技 術(shù)真正的可以跑在任何的端,也讓我們的Web應(yīng)用更加的獨(dú)立,更加的輕松的融入到各個端中,HTML5就是未來!
總結(jié):
通過上面HTML5的新特點(diǎn),不難總結(jié)出HTML5=Java+HTML+CSS。HTML5的新特性帶給開發(fā)者的是更友好更豐富的本地處理的API,更智能的更優(yōu)雅的html標(biāo)簽,更強(qiáng)的本地處理的功能,通信也進(jìn)一步加強(qiáng)。
Google很早之前就意識到了,客戶只要擁有一個瀏覽器就可以了,相信不久的將來現(xiàn)在的Web的應(yīng)用不在對本地處理那么雞肋,CS形式的客戶端相信也會越來越少。
希望以上對你將要學(xué)習(xí)HTML5或即將從事html的你有所幫助!百通IT學(xué)院HTML5培訓(xùn)機(jī)構(gòu)有著國內(nèi)首家完整的移動web前端開發(fā)課程體系,高度專注移動端。百通IT學(xué)院HTML5培訓(xùn)課程開發(fā)項(xiàng)目全部來自于真實(shí)的企業(yè)項(xiàng)目,單獨(dú)項(xiàng)目代碼量超過 5 萬行。為了讓學(xué)員盡快的進(jìn)入到企業(yè)開發(fā)的項(xiàng)目中,百通IT學(xué)院使用自主開發(fā)的產(chǎn)品和為客戶定制的企業(yè)產(chǎn)品為案例,大批百通IT學(xué)院html5培訓(xùn)班學(xué)員都從中收益。
我們是 一群熱愛IT的年輕人,如果你也愛IT、愛HTML5開發(fā),歡迎前來百通IT學(xué)院HTML5培訓(xùn)機(jī)構(gòu)中心參觀學(xué)習(xí),讓我們共同為夢想發(fā)聲。
百通IT學(xué)院十月份即將有免費(fèi)的公開課了。屆時我就會在這里通知給大家哦,請關(guān)注。
這些課程會比網(wǎng)上的那些錄制的公開課效果更好!!而且全程有互動教學(xué)。。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。