H5和HTML5有區(qū)別嗎？

 

　　H5 ≠HTML5

 

　　Part  one

 

　　H5，第一反應(yīng)就是：“我的天，啥是H5？好洋氣啊！是不是個(gè)很高端的什么新玩意兒？??？

 

　　實(shí)際上，這個(gè)說(shuō)法只在中國(guó)大陸地區(qū)的工程師中使用，臺(tái)灣、印度和美國(guó)等地區(qū)并沒(méi)有這個(gè)簡(jiǎn)稱。

 

　　嚴(yán)格的說(shuō)， H5 ≠HTML5。

 

　　H5 是一個(gè)產(chǎn)品名詞。

 

　　HTML5是一個(gè)技術(shù)名詞。

 

　　2 打個(gè)比方

 

　　Part two

 

　　打個(gè)比方，如果有個(gè)人跟你說(shuō)：“我要做個(gè)網(wǎng)站，H5的”，或者問(wèn)：“你是不是會(huì)做H5開(kāi)發(fā)？”

 

　　可能他要的只是在微信等移動(dòng)端，看上去酷炫能夠提升公司格調(diào)，也能被廣泛轉(zhuǎn)發(fā)分享的一種東西。

 

　　拆開(kāi)來(lái)看，大概包括以下技術(shù)點(diǎn)：

 

　　1、頁(yè)面素材預(yù)加載技術(shù)，可以使用createJS之中的preloadJS。我沒(méi)有看preloadJS的源碼，不過(guò)預(yù)加載并不是HTML5標(biāo)準(zhǔn)中更新的方法。

 

　　2、音樂(lè)加載播放技術(shù)，createJS中同樣有soundJS可以實(shí)現(xiàn)，而且這部分說(shuō)起來(lái)確實(shí)是HTML5標(biāo)準(zhǔn)支持的內(nèi)容，在上個(gè)時(shí)代并沒(méi)有audio這樣的標(biāo)簽。

 

　　3、可以滑動(dòng)的頁(yè)面，大多數(shù)是用了swiper.js這個(gè)Jquery插件，也有一些是手寫(xiě)的swipe，比較拙劣的手寫(xiě)版頁(yè)面是不會(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)的文字和圖片，常見(jiàn)的是使用了css3或者直接使用js動(dòng)畫(huà)。

 

　　很多時(shí)候提到HTML5多半還會(huì)帶上CSS3，而CSS的分級(jí)又是另外的一個(gè)問(wèn)題了，在不同的項(xiàng)目標(biāo)準(zhǔn)上，CSS會(huì)獨(dú)立定級(jí)，以后應(yīng)該不會(huì)有CSS4這個(gè)東西，所以大家也不用擔(dān)心在H5以后又冒出來(lái)了C4（不過(guò)真是想用C4炸死那些每天把H5掛在嘴上的人）。

 

　　6、可以填表報(bào)名，這是最基本的表單，是有網(wǎng)頁(yè)以來(lái)就有的東西。

 

　　所以，談?wù)揌5的時(shí)候，實(shí)際上是一個(gè)解決方案。

 

　　這個(gè)解決方案不僅包含了HTML5新增的audio標(biāo)簽，canvas，拖拽特性，本地存儲(chǔ)，websocket通信，同時(shí)也包括了盒模型，包括絕對(duì)定位，包括一切前端的基本知識(shí)。

 

　　3 HTML5并不是一項(xiàng)技術(shù)，而是一個(gè)標(biāo)準(zhǔn)

 

　　Part three

 

　　再次科普，HTML5并不是一項(xiàng)技術(shù)，而是一個(gè)標(biāo)準(zhǔn)。

 

　　標(biāo)準(zhǔn)的意思就是：學(xué)生準(zhǔn)則手冊(cè)。

 

　　HTML5就是HTML最新標(biāo)準(zhǔn)。

 

　　4  什么是HTML5

 

　　Part four

 

　　HTML5就是HTML最新標(biāo)準(zhǔn)，是現(xiàn)在Web程序開(kāi)發(fā)的核心、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用HTML的第五次重大修改，這是一項(xiàng)推薦標(biāo)準(zhǔn)。

 

　　雖然 CSS3和HTML5是兩個(gè)語(yǔ)言，但通常說(shuō)HTML5也都泛指包括CSS3，因?yàn)樗鼈儍蓚€(gè)常在一起配合使用的。

 

　　當(dāng)然還不指這些，從技術(shù)本身分析來(lái)看，現(xiàn)在完成一些頁(yè)面制作、WebAPP、微網(wǎng)站開(kāi)發(fā)以及網(wǎng)頁(yè)游戲等，現(xiàn)在都是使用HTML5標(biāo)準(zhǔn)完成的。

 

　　雖然開(kāi)發(fā)這類的應(yīng)用其實(shí)是以JS為主，但因?yàn)镠TML5 這個(gè)概念很流行，所以微網(wǎng)站開(kāi)發(fā)、WebAPP或是微網(wǎng)站等應(yīng)用，很多人都會(huì)說(shuō)使用HTML5開(kāi)發(fā)。

 

　　5   前端開(kāi)發(fā)學(xué)什么

 

　　Part five

 

　　那么前端開(kāi)發(fā)學(xué)習(xí)什么？

 

　　要學(xué)習(xí)HTML、CSS和DIV+CSS技術(shù)用來(lái)制作Web頁(yè)面；學(xué)習(xí)Java、DOM、BOM等用建立開(kāi)發(fā)基礎(chǔ)；學(xué)習(xí) photoshop和Axure等軟件應(yīng)用，完成頁(yè)面UI設(shè)計(jì)；

 

　　也要認(rèn)識(shí)一下NodeJS和PHP加上數(shù)據(jù)庫(kù)等這樣的后端語(yǔ)言，方便前后端開(kāi)發(fā)配合；學(xué)習(xí) HTML5、CSS3、響應(yīng)式頁(yè)面布局、微網(wǎng)站制作等開(kāi)發(fā)移動(dòng)互聯(lián)網(wǎng)的應(yīng)用；像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端開(kāi)發(fā)必學(xué)的高級(jí)技術(shù)；

 

　　HTML5地理位置應(yīng)用、離線應(yīng)用、webworker多線程實(shí)現(xiàn)、websocket、跨平臺(tái)開(kāi)發(fā)技術(shù)和webAPP開(kāi)發(fā)等，這些企業(yè)級(jí)應(yīng)用技術(shù)也是現(xiàn)在開(kāi)發(fā)的主流；

 

　　現(xiàn)在前端開(kāi)發(fā)最熱門(mén)、要人最多，就是使用canvas開(kāi)發(fā)網(wǎng)頁(yè)游戲動(dòng)畫(huà)，以及會(huì)用 Cocos2d-js制作游戲等開(kāi)發(fā)。

 

　　6  結(jié)尾

 

　　Part six

 

　　到這里，大家對(duì)前端有了一個(gè)基本的認(rèn)識(shí)了吧！

 

　　如果你是了解過(guò)Web前端的人，那么你就有一顆想轉(zhuǎn)行的心，因?yàn)橄啾扔谄渌袠I(yè)，web前端相對(duì)容易。

 

　　只要你有過(guò)硬的技術(shù)，有足夠的項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)，很容易就拿到高薪！