tml5是指萬維網(wǎng)的核心語言、 標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用 超文本標(biāo)記語言( HTML)的第五次重大修改,2014年10月29日, 萬維網(wǎng)聯(lián)盟宣布,經(jīng)過接近8年的艱苦努力,該標(biāo)準(zhǔn)規(guī)范終于制定完成。
HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點(diǎn),如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能,可以真正改變用戶與文檔的交互方式,包括新的解析規(guī)則增強(qiáng)了靈活性、新屬性、淘汰過時(shí)的或冗余的屬性等。
HTML5賦予 網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì) RDFa的,微數(shù)據(jù)與 微格式等方面的支持,構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù) 驅(qū)動(dòng)的Web。
本地存儲(chǔ)特性(Class: OFFLINE & STORAGE)
基于HTML5開發(fā)的網(wǎng)頁 APP擁有更短的啟動(dòng)時(shí)間,更快的聯(lián)網(wǎng)速度,這些全得益于HTML5 APP Cache,以及本地存儲(chǔ)功能。Indexed DB(html5本地存儲(chǔ)最重要的技術(shù)之一)和 API說明文檔。
設(shè)備兼容特性 (Class: DEVICE ACCESS)
從 Geolocation功能的API文檔公開以來,HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇,帶來了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與 應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連,例如視頻影音可直接與microphones及攝像頭相聯(lián)。
連接特性(Class: CONNECTIVITY)
更有效的連接工作效率,使得基于頁面的實(shí)時(shí)聊天,更快速的網(wǎng)頁游戲體驗(yàn),更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù),Server-Sent Event和WebSockets就是其中的兩個(gè)特性,這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。
網(wǎng)頁 多媒體 特性(Class: MULTIMEDIA)
支持網(wǎng)頁端的Audio、Video等多媒體功能, 與網(wǎng)站自帶的APPS,攝像頭,影音功能相得益彰。
三維、圖形及特效特性(Class: 3D, Graphics & Effects)
基于SVG、Canvas、WebGL及CSS3的3D功能,用戶會(huì)驚嘆于在瀏覽器中,所呈現(xiàn)的驚人視覺效果。
性能與集成特性(Class: Performance & Integration)
沒有用戶會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過 XMLHttpRequest2等技術(shù),解決以前的跨域等問題,幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。
CSS3特性(Class: CSS3)
在不犧牲性能和語義結(jié)構(gòu)的前提下, CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外,較之以前的Web排版,Web的開放字體格式( WOFF)也提供了更高的靈活性和控制性。
關(guān)于沿革
HTML5提供了一些新的元素和屬性,例如
(網(wǎng)站導(dǎo)航塊)和
。這種標(biāo)簽將有利于搜索引擎的索引整理,同時(shí)更好的幫助小屏幕裝置和視障人士使用,除此之外,還為其他瀏覽要素提供了新的功能,如
1、取消了一些過時(shí)的 HTML4標(biāo)記
其中包括純粹顯示效果的標(biāo)記,如< font>和<center>,它們已經(jīng)被CSS取代。
HTML5 吸取了 XHTML2 一些建議,包括一些用來改善文檔結(jié)構(gòu)的功能,比如,新的HTML 標(biāo)簽 header, footer, dialog, aside, figure 等的使用,將使內(nèi)容創(chuàng)作者更加語義地創(chuàng)建文檔,之前的開發(fā)者在實(shí)現(xiàn)這些功能時(shí)一般都是使用 div。
2、將內(nèi)容和展示分離
b 和 i 標(biāo)簽依然保留,但它們的意義已經(jīng)和之前有所不同,這些標(biāo)簽的意義只是為了將一段文字標(biāo)識(shí)出來,而不是為了為它們?cè)O(shè)置粗體或斜體式樣。u,font,center,strike 這些標(biāo)簽則被完全去掉了。
3、一些全新的表單輸入對(duì)象
包括日期,URL,Email 地址,其它的對(duì)象則增加了對(duì)非拉丁 字符的支持。HTML5 還引入了微數(shù)據(jù),這一使用機(jī)器可以識(shí)別的標(biāo)簽標(biāo)注內(nèi)容的方法,使語義Web 的處理更為簡(jiǎn)單。總的來說,這些與結(jié)構(gòu)有關(guān)的改進(jìn)使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈,更容易管理的網(wǎng)頁,這樣的網(wǎng)頁對(duì)搜索引擎,對(duì)讀屏軟件等更為友好。
4、全新的,更合理的Tag
多媒體對(duì)象將不再全部綁定在 object或 embed Tag 中,而是視頻有視頻的Tag,音頻有音頻的 Tag。
5、本地?cái)?shù)據(jù)庫
這個(gè)功能將內(nèi)嵌一個(gè)本地的SQL 數(shù)據(jù)庫,以加速交互式搜索,緩存以及索引功能。同時(shí),那些離線Web 程序也將因此獲益匪淺。不需要插件的豐富動(dòng)畫。
6、Canvas 對(duì)象
將給瀏覽器帶來直接在上面繪制 矢量圖的能力,這意味著用戶可以脫離Flash 和Silverlight,直接在瀏覽器中顯示圖形或動(dòng)畫。
7、瀏覽器中的真正程序
將提供 API 實(shí)現(xiàn)瀏覽器內(nèi)的編輯,拖放,以及各種 圖形用戶界面的能力。內(nèi)容修飾Tag 將被剔除,而使用CSS。
8、Html5取代Flash在移動(dòng)設(shè)備的地位。
9、其突出的特點(diǎn)就是強(qiáng)化了web頁的表現(xiàn)性,追加了本地?cái)?shù)據(jù)庫,
我還在南方小島上玩兒的時(shí)候,一個(gè)朋友給我發(fā)了條語音信息(早上發(fā)的,我晚上才聽,我讓你發(fā)語音)大概是說,能不能幫忙聯(lián)系一個(gè)會(huì) HTML5 的團(tuán)隊(duì),領(lǐng)導(dǎo)要求做一個(gè) HTML5 的活動(dòng)頁面。
看來 HTML5 的浪潮又要讓我們的廣告客戶渾身濕透了。他們想要華麗的頁面,想要讓用戶覺得他們很酷。事實(shí)上,即使他們只做了一張很廉價(jià)的“活動(dòng)邀請(qǐng)函”頁面,用戶也覺得好棒好厲害。真相是,大部分用戶并不知道其中的奧秘。
HTML5是針對(duì)超文本語言HTML的第五次修訂。具體HTML是什么?我們先籠統(tǒng)地認(rèn)為它是一種用來創(chuàng)建網(wǎng)頁的手段就好。不過你不是科技從業(yè)者,也不是什么都要懂一點(diǎn)的極客。你會(huì)想:什么html、Input type=date、js線程、socket、標(biāo)準(zhǔn)擴(kuò)展embed、css3……這些都是什么鬼我根本不想知道快扔走!
這一切并不在你學(xué)習(xí)的范圍內(nèi)。你只關(guān)心這樣一個(gè)問題:它會(huì)為你的生活帶來怎樣的變化?
? 你手機(jī)里的原生APP會(huì)變少。
原生APP,就是你到應(yīng)用商店里選一個(gè)應(yīng)用、等待下載、確認(rèn)權(quán)限、等待安裝,然后點(diǎn)擊打開的那種移動(dòng)應(yīng)用,它專門針對(duì)某一類移動(dòng)操作系統(tǒng)生成,必須被完整安裝到手機(jī)里。而有一種“假”APP,它們打開后基本利用手機(jī)中的瀏覽器來運(yùn)行,而且不需要下載后安裝,就能立即在手機(jī)界面中生成一個(gè)APP圖標(biāo)——HTML5就是生產(chǎn)這種“假”APP的利器。比如你玩《神經(jīng)貓》就不需要下載一個(gè)APP,而這個(gè)游戲正是用HTML5網(wǎng)頁實(shí)現(xiàn)的。
? 你那個(gè)當(dāng)程序員的男朋友(如果你有)就可以早點(diǎn)下班回家了。
HTML5是唯一一個(gè)通吃PC、Mac、iPhone、iPad、Android、Windows Phone等主流平臺(tái)的跨平臺(tái)語言。因?yàn)檫@種跨平臺(tái)的便利,程序員們只需要為之開發(fā)一種類別的產(chǎn)品——說白了就是一個(gè)萬能的網(wǎng)頁。他再也不需要做一款只能在蘋果手機(jī)上運(yùn)行的APP后,再做一款也可以在三星、小米上使用的APP。
? 你的手機(jī)里沒有Flash了。
如果需要一個(gè)能夠集中展示視頻、音頻等各種媒體形式的插件,那就是Flash。這個(gè)部署在億萬瀏覽器里的商業(yè)插件儼然成為事實(shí)上的網(wǎng)頁標(biāo)準(zhǔn)。但是,HTML5把這個(gè)標(biāo)準(zhǔn)打破了,這些媒體形式不再需要Flash這一插件就能分布在網(wǎng)頁當(dāng)中。HTML5可以讓我們不借助第三方插件實(shí)現(xiàn)多媒體。
? 正因?yàn)槟愕南到y(tǒng)需要運(yùn)行的第三方插件變少,瀏覽器占用的系統(tǒng)資源相對(duì)也會(huì)變少,有可能你會(huì)發(fā)現(xiàn)自己的手機(jī)電量變得更持久了。
? 當(dāng)你使用定位服務(wù)的時(shí)候,不用點(diǎn)“搜索”了,直接點(diǎn)“附近”。
這是因?yàn)镠TML5更好地實(shí)現(xiàn)了基于地理位置的功能,在從前那些使用舊語言編輯的網(wǎng)頁上,LBS(基于位置的服務(wù))沒有獲得很好的支持,所以你需要在網(wǎng)頁上依次選擇全國(guó)、北京、朝陽區(qū)、大望路……
? 網(wǎng)頁更美觀。
對(duì)網(wǎng)頁設(shè)計(jì)師來說,HTML5重新定義了很多設(shè)計(jì)標(biāo)準(zhǔn),這使得他們?cè)诠ぷ鞯臅r(shí)候遵循著更加科學(xué)的方法,再加上HTML5可以讓我們不借助第三方插件實(shí)現(xiàn)多媒體,網(wǎng)頁設(shè)計(jì)師得以發(fā)揮他們的創(chuàng)造力,你會(huì)看到更加酷炫的網(wǎng)頁界面。
視覺,這是最重要的。對(duì)用戶來說,沒有什么比直接的體驗(yàn)更能說明某種技術(shù)為世界帶來的改變。現(xiàn)在我用幾個(gè)騰訊新聞的手機(jī)頁面來舉例,和你在微信朋友圈看到的那些蹩腳的邀請(qǐng)函、抽獎(jiǎng)頁面相比,這些頁面嘗試用一種更有意思、更流暢的方式來講述事件。
APEC期間推出的《服裝秀》,截取的三個(gè)界面。在這個(gè)應(yīng)用中,新聞相關(guān)的人物將會(huì)變成試衣模特。例如你可以選擇奧巴馬當(dāng)你的模特,然后給他換上各種服裝。
上圖《再見2元的風(fēng)景》是針對(duì)北京地鐵票價(jià)調(diào)整制作的新聞專題頁。這個(gè)流傳甚廣的煽情專題,也是一個(gè)HTML5頁面,它提供了一種流暢的圖片瀏覽方式。
HTML5 同樣為網(wǎng)頁提供了更多交互的可能,比如你可以在同一個(gè)頁面中完成一個(gè)網(wǎng)頁調(diào)查,然后直接分享給你的朋友圈好友。
總之,HTML5 可以更有效地組織互聯(lián)網(wǎng)中的信息,并讓視頻、音頻等服務(wù)得到更好的支持;并在減輕開發(fā)者的負(fù)擔(dān)的同時(shí),讓用戶在不同的平臺(tái)上有更一致的體驗(yàn)。
沒有炫耀的意思,這些內(nèi)容出于個(gè)人對(duì)HTML5的好奇,導(dǎo)致我多看了一些材料,并且咨詢了行業(yè)的專家。大致上,我能保證這些內(nèi)容都是可信的,對(duì)普通人而言,這些已經(jīng)足夠:甲方或者乙方們?cè)僖膊粫?huì)輕易騙走你的巨額預(yù)算。
“你知道那你說啊。”
烏云裝扮者包含了世界、黑色趣味和明亮內(nèi)心
微信號(hào)及新浪微博@DACLODS
午外面起風(fēng)了,北方的冬天說來就來,好在小白的辦公室是陽面,還算暖和。處理完手頭工作后,小白找到了老朱,正式開始學(xué)習(xí)。
老朱:“小白,你知道什么是HTML5么?”
小白:“大概了解一些,HTML5就是使用JavaScript+CSS+HTML來做網(wǎng)頁,具體怎么做就不知道了!”
老朱:“恩,原理是這樣!大道理我就不說了,說多了你也記不住,就算記住現(xiàn)在也理解不了。我大概給你說一下網(wǎng)頁制作技術(shù)的變化歷程吧。”
“以前我們做網(wǎng)站的時(shí)候,通常會(huì)說我的網(wǎng)站是asp、jsp、.net、php的。沒有人會(huì)說我的網(wǎng)站是HTML的,你知道,網(wǎng)頁最終的呈現(xiàn)肯定是html格式的,為何他們不說呢?”
小白:“因?yàn)樗麄兙W(wǎng)頁的功能基本都是通過asp、jsp、.net、php實(shí)現(xiàn)的?”
“沒錯(cuò),那個(gè)時(shí)候做網(wǎng)站先是美工設(shè)計(jì)頁面、切圖。程序員按照美工設(shè)計(jì)的頁面通過切圖和表格布局展示出來,通過vb、java、c#、php等代碼把數(shù)據(jù)庫的數(shù)據(jù)提取出來放到對(duì)應(yīng)位置。”
小白:“對(duì),我還知道以前的網(wǎng)頁要更改網(wǎng)頁中某個(gè)位置的數(shù)據(jù)是需要重新加載網(wǎng)頁的。”
“不錯(cuò),確實(shí)是這樣,當(dāng)時(shí)風(fēng)靡一時(shí)的Flash完美的解決了更改頁面數(shù)據(jù)不用刷新頁面的問題,F(xiàn)lash在網(wǎng)頁中可以實(shí)現(xiàn)異步請(qǐng)求,可以通過Flash向服務(wù)器發(fā)送一個(gè)請(qǐng)求,當(dāng)接收到返回?cái)?shù)據(jù)后再對(duì)flash中的內(nèi)容進(jìn)行對(duì)應(yīng)的更改。不過Flash太依賴插件,所以后來就有了ajax,ajax是通過JS來實(shí)現(xiàn)網(wǎng)頁的異步請(qǐng)求處理。”
小白:“不好意思!朱哥,什么是異步請(qǐng)求?”。
“哦!簡(jiǎn)單說就是你發(fā)送一個(gè)post或者get請(qǐng)求,服務(wù)器不是立刻給你返回?cái)?shù)據(jù)的,網(wǎng)速不一樣服務(wù)器處理速度不一樣都會(huì)影響數(shù)據(jù)返回的速度,因此你需要等到數(shù)據(jù)返回以后再對(duì)數(shù)據(jù)進(jìn)行處理。這些你現(xiàn)在不用理解,以后慢慢就知道了。”
老朱接著說:“自從有了ajax,我們對(duì)網(wǎng)頁的處理就靈活很多,因此js開始變得越來越重要,后來就有了著名的jQuery,通過jQuery可以對(duì)網(wǎng)頁標(biāo)簽進(jìn)行各種處理,對(duì)ajax也進(jìn)行了很好的封裝,非常方便!”
“因?yàn)橛辛薺query我們?cè)谧鼍W(wǎng)頁的時(shí)候可以很方便的在一個(gè)頁面完成大量的功能,所以經(jīng)常把前端頁面功能實(shí)現(xiàn)與數(shù)據(jù)處理完全分開,這樣前端通過js控制html標(biāo)簽實(shí)現(xiàn)頁面功能,后臺(tái)人員做數(shù)據(jù)處理,分工很明確,工作效率和網(wǎng)頁功能都得到了很大的提高。”
小白接著問:“前端和后臺(tái)數(shù)據(jù)處理完全分開,前端的數(shù)據(jù)是怎么拿到的呢?”
老朱:“這個(gè)你現(xiàn)在先不用理解,你只需要知道,前端需要數(shù)據(jù)的時(shí)候會(huì)使用ajax向服務(wù)器一個(gè)處理數(shù)據(jù)的頁面發(fā)送一個(gè)請(qǐng)求,這個(gè)頁面會(huì)通過你的請(qǐng)求參數(shù)返回給你不同類型的數(shù)據(jù),拿到數(shù)據(jù)后把數(shù)據(jù)放到頁面對(duì)應(yīng)的標(biāo)簽中或者更改某些標(biāo)簽的狀態(tài)。”
小白:“哦,我大概理解了,不過還得消化消化!”
“沒關(guān)系,這些你只需要了解就可以,在我們真正做的時(shí)候你就慢慢理解了。明天我們繼續(xù)~~~”
想學(xué)H5的朋友可以關(guān)注老爐,您的關(guān)注是我持續(xù)更新《小白H5成長(zhǎng)之路》的動(dòng)力!
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。