abstrait：前一段時(shí)間很火的 吳亦凡入伍的廣告你看靜態(tài)新聞的時(shí)候，是在加載后面兩個(gè)視頻，加載完成之后，吳亦凡就蹦出來了所以你們看到吳亦凡從畫面里面出來的時(shí)候腦海里的臺(tái)詞是：臥槽，這是怎么做到的！而我的內(nèi)心臺(tái)詞是：臥槽，我知道是怎么做到的，你把流量還給我好么！================================更新一張之前和甲方之間的聊天記錄，在整個(gè)minisite已經(jīng)交付上線以后，甲方突然問了這么

前一段時(shí)間很火的 吳亦凡入伍的廣告
你看靜態(tài)新聞的時(shí)候，是在加載后面兩個(gè)視頻，加載完成之后，吳亦凡就蹦出來了

所以你們看到吳亦凡從畫面里面出來的時(shí)候腦海里的臺(tái)詞是：
臥槽，這是怎么做到的！
而我的內(nèi)心臺(tái)詞是：
臥槽，我知道是怎么做到的，你把流量還給我好么！
================================
更新一張之前和甲方之間的聊天記錄，在整個(gè)minisite已經(jīng)交付上線以后，甲方突然問了這么一句，大家感受一下。

這就是為什么我很反感別人跟我說H5，我特么知道你到底什么意思。。。

===================================================
先科普一下，HTML5并不是一項(xiàng)技術(shù)，而是一個(gè)標(biāo)準(zhǔn)。
標(biāo)準(zhǔn)的意思就是：學(xué)生準(zhǔn)則手冊(cè)。你可以按照準(zhǔn)則做，甚至可以超出準(zhǔn)則更加嚴(yán)格的要求自己，也可以不按照準(zhǔn)則來，但是會(huì)被老師訓(xùn)斥小伙伴討厭，別人都不找你玩，就像IE6一樣。

那HTML5這些標(biāo)準(zhǔn)瀏覽器廠商到底姿持不姿持呢？這要看他們各自的尿性了。像chrome這種不僅在很多標(biāo)準(zhǔn)上支持的非常好，還積極上進(jìn)很多地方超出了標(biāo)準(zhǔn)，支持一些標(biāo)準(zhǔn)中還是草案的部分。

所以其實(shí)要么我們是作為理論派討論HTML5標(biāo)準(zhǔn)，要么是作為實(shí)踐派討論HTML5標(biāo)準(zhǔn)在某瀏覽器的應(yīng)用。但是實(shí)際上我們?cè)谡f到H5的時(shí)候，并不是指標(biāo)準(zhǔn)，也不是指標(biāo)準(zhǔn)的應(yīng)用，而是一個(gè)硬生生造出來的奇怪概念合集，所以我是旗幟鮮明的反對(duì)這個(gè)稱呼的。

最近一年的時(shí)間，我主要靠這個(gè)東西養(yǎng)家（并沒有家）糊口。所以我是懂得甲方打電話過來詢問，“你是不是會(huì)做H5開發(fā)？”的時(shí)候，我知道他們要的是那種可以在朋友圈分享的，看起來很酷炫的小頁面，他們實(shí)際要的東西拆開來看大概包括以下技術(shù)點(diǎn);

1. 頁面素材預(yù)加載技術(shù)，可以使用createJS之中的preloadJS。我沒有看preloadJS的源碼，不過預(yù)加載并不是HTML5標(biāo)準(zhǔn)中更新的方法。
2. 音樂加載播放技術(shù)，createJS中同樣有soundJS可以實(shí)現(xiàn)，而且這部分說起來確實(shí)是HTML5標(biāo)準(zhǔn)支持的內(nèi)容，在上個(gè)時(shí)代并沒有audio這樣的標(biāo)簽。
3.可以滑動(dòng)的頁面，大多數(shù)是用了swiper.js這個(gè)Jquery插件，也有一些是手寫的swipe，比較拙劣的手寫版頁面是不會(huì)跟手滑動(dòng)的，其中touchstart等四個(gè)touch系列的事件是HTML5標(biāo)準(zhǔn)中的事件
4.可以涂抹擦除，多半是canvas疊加層，canvas是HTML5標(biāo)準(zhǔn)里面的標(biāo)簽，是代表了先進(jìn)生產(chǎn)力的標(biāo)簽。
5.有動(dòng)態(tài)的文字和圖片，常見的是使用了css3或者直接使用js動(dòng)畫。很多時(shí)候提到HTML5多半還會(huì)帶上CSS3，而CSS的分級(jí)又是另外的一個(gè)問題了，在不同的項(xiàng)目標(biāo)準(zhǔn)上，CSS會(huì)獨(dú)立定級(jí)，以后應(yīng)該不會(huì)有CSS4這個(gè)東西，所以大家也不用擔(dān)心在H5以后又冒出來了C4（不過真是想用C4炸死那些每天把H5掛在嘴上的人）
6.可以填表報(bào)名，這是最基本的表單，是有網(wǎng)頁以來就有的東西。
7.可以支持分享自定義的文案和圖片，這個(gè)是用到了微信的jssdk，和HTML標(biāo)準(zhǔn)半毛錢關(guān)系都沒有。
8.還有其他我想起來再補(bǔ)充的。

所以我們?cè)谡務(wù)揌5的時(shí)候，實(shí)際上是一個(gè)解決方案，一個(gè)看起來酷炫的移動(dòng)端onepage網(wǎng)站的解決方案。而這個(gè)解決方案不僅包含了HTML5新增的audio標(biāo)簽，canvas，拖拽特性，本地存儲(chǔ)，websocket通信，同時(shí)也包括了盒模型，包括絕對(duì)定位，包括一切前端的基本知識(shí)。

有學(xué)弟來問我說，學(xué)長(zhǎng)我想學(xué)H5，應(yīng)該從哪里開始？
我說HTML5新增特性在W3C上都可以查得到的。
學(xué)弟說，不，我想學(xué)的是H5，想做H5的頁面。
于是我猜測(cè)他所指的就是上面論述的這種酷炫小頁面，我就說，那你要先學(xué)習(xí)HTML，包括HTML5的新標(biāo)準(zhǔn)和之前的全部標(biāo)準(zhǔn)，然后學(xué)CSS以及CSS3，了解它們?cè)跒g覽器的實(shí)現(xiàn)情況，原生JS了解一點(diǎn)就可以，大多的操作可以用Jquery，了解常用的幾個(gè)Jquery插件的用法，應(yīng)該就差不多了。如果想要做更酷炫的的，學(xué)一下egret或者cocos2d更好。如果要優(yōu)化加載速度，還要學(xué)一下grunt一類的自動(dòng)化工具。微信的sdk有很多坑，至少nodejs或者php一類的后端語言要會(huì)一點(diǎn)。

學(xué)弟說，那這不就是前端了么？我只是想學(xué)H5啊。

所以你看，當(dāng)我們對(duì)一個(gè)概念的內(nèi)涵無法統(tǒng)一的時(shí)候，我們根本不知道彼此之間在談?wù)摰氖鞘裁础?br/>
”H5“本應(yīng)是一個(gè)技術(shù)合集，卻被意會(huì)成了一項(xiàng)技術(shù)，變成可以在質(zhì)上而不是量上描述的概念。

對(duì)于營(yíng)銷來說，我們只要講我們可以做H5或者不能做，這種定性的描述就夠了。但是對(duì)于技術(shù)上，這是定量的事情，只能在具體某個(gè)技術(shù)項(xiàng)上是否，無法對(duì)這個(gè)本不存在的概念說是否。

就比如我遇到過有甲方說，我們之前找了一個(gè)人做H5，做的還不錯(cuò)，但是這個(gè)case他又說做不了，我也搞不懂H5和H5之間也有那么大差別嗎？我只能笑笑和他說，世界這么大，各種各樣的H5都是有的。

這就是為什么我反對(duì)H5，因?yàn)檫@個(gè)名詞和它表示的內(nèi)涵是嚴(yán)重不符的，這讓我們難以溝通，讓營(yíng)銷人和技術(shù)人之間產(chǎn)生誤解，讓渾水摸魚的培訓(xùn)師們賺的盆滿缽滿，讓技術(shù)新人不踏踏實(shí)實(shí)的學(xué)習(xí)技術(shù)。

每當(dāng)有人問我，”你是不是做H5的？“
我的內(nèi)心都很想咆哮一句，”你才是做H5的，你全家都是做H5的“