來了來了，總算來了，新一個系列的連載，是：《HTML5開發(fā)》。想必部分期待reactjs和nodejs的同學(xué)會失望，但是，前端君怎么舍得讓你難過。這次選擇HTML5，只是順序的問題。熱門的知識，我們一個都不會落下，都把它們學(xué)了。

跟其他地方的教程一樣，第一節(jié)一般都是講HTML5的簡介。但跟其他教程不一樣的是，我們不用文縐縐的專業(yè)詞匯來介紹，那樣會毫無趣味。前端君會用著幾年來HTML5使用感受和對互聯(lián)網(wǎng)的觀察來跟童鞋們聊聊HTML5。（接下來的學(xué)習(xí)，前端君默認(rèn)大家已經(jīng)了解了什么是HTML以及相關(guān)的概念）

HTML5的誕生背景

在HTML5誕生之前，我們使用的是HTML4.01，在此之前，還有更早的HTML3.2，HTML2.0等等，在往上追溯，有的同學(xué)可能會發(fā)現(xiàn)HTML的年齡比我們還大。

HTML每推出一個新版本，都是為了順應(yīng)互聯(lián)網(wǎng)的發(fā)展趨勢，更好地滿足用戶的使用行為。以前利用網(wǎng)絡(luò)最多的就是看新聞，發(fā)郵件，還有網(wǎng)頁3G QQ。（看到下圖，滿滿的回憶）

( ?玩過3G QQ的舉手 )

再看看現(xiàn)在，用戶用手機網(wǎng)頁看視頻、聽音樂、玩游戲、看web前端教程公眾號（這廣告打得，是不是有點措手不及），早已不是什么新鮮事，也早已習(xí)慣朋友圈滿屏各種的酷炫的、搞笑的、溫馨的、逗逼的H5廣告。

?

隨著網(wǎng)絡(luò)的普及和設(shè)備性能的增強，僅僅幾年時間，用戶的上網(wǎng)行為早已天翻地覆，與之伴隨的則是技術(shù)的更新和進(jìn)步，HTML5在這樣的趨勢下應(yīng)運而生，它的出現(xiàn)把互聯(lián)網(wǎng)技術(shù)的發(fā)展推進(jìn)了一個新的時代。

?

HTML5的現(xiàn)狀

2014年10月底，HTML5規(guī)范正式定稿的時候，當(dāng)時鋪天蓋地的文章都在說HTML5將要顛覆APP開發(fā)，HTML5的優(yōu)勢被無限放大，更有人預(yù)計說要取代原生開發(fā)模式，然而，兩年過去了，這..............并沒有發(fā)生，并沒有，沒有。

就目前來看，HTML5的適用場景更多的是：

1.???手機移動官網(wǎng)（如：淘寶手機網(wǎng)站等）

2.????與原生app開發(fā)結(jié)合（如：嵌在微信里的京東商城，還有你現(xiàn)在看的公眾號文章）

3.????營銷應(yīng)用（如：企業(yè)的H5招聘廣告）

4.????HTML5游戲（如：神經(jīng)貓游戲）

所以，不要再吹噓什么HTML5取代原生app開發(fā)了，至少現(xiàn)在看來是不可能，或者說兩者并不是完全對立關(guān)系，它們是可以共存的、互補的。

至于HTML5未來我們沒必要去預(yù)測，至少現(xiàn)在HTML5開發(fā)已經(jīng)成為每一個web前端開發(fā)者必備的技能，甚至也有企業(yè)把HTML5開發(fā)獨立成一個崗位進(jìn)行招聘，可見它的重要性和火熱程度。

HTML5的新特性

竟然HTML5這么火熱，這么受歡迎，肯定有它受歡迎的地方，我們來看看它都有哪些有趣的新特性，也是我們在后面章節(jié)要好好學(xué)習(xí)的知識點：

1.????canvas繪畫元素

2.????播放視頻的video元素

3.????播放音樂的audio元素

4.????Web SQL DB本地數(shù)據(jù)庫

5.????IndexedDB本地儲存

6. ? History 不刷新也可以跳轉(zhuǎn)頁面

7. ? 全新的表單控件data，week，time等

還有更多很好玩、很實用的特性，我們不急著一一列舉，后面的章節(jié)會學(xué)習(xí)。

?

?好玩的CSS3?

CSS 是用于控制網(wǎng)頁的樣式和布局。既然講到HTML5，就少不了CSS3，它們經(jīng)常會被結(jié)合使用來實現(xiàn)想要的效果。

以前要實現(xiàn)一個動畫效果，我們可能會采取JavaScript的輔助，編寫大量的代碼?，F(xiàn)在，有了CSS3的出現(xiàn)，我們實現(xiàn)動畫效果，3D效果變得更加簡單。

前端君利用CSS3來實現(xiàn)一個簡單的3D動畫效果：

（此圖是gif動畫圖，加載需要點時間）

以上的效果，僅僅需要幾行簡單的CSS3代碼即可實現(xiàn)，是不是有點小激動，掌握了CSS3的知識，你也可以根據(jù)自己想法，來實現(xiàn)各種炫酷效果。是不是很想學(xué)？那就對了，跟著前端君的這次《HTML5開發(fā)》系列連載，包你學(xué)會！

本節(jié)小結(jié)?

總結(jié)：HTML5的誕生是順應(yīng)了技術(shù)進(jìn)步的發(fā)展，更好地滿足如今用戶的上網(wǎng)行為。在如今的互聯(lián)網(wǎng)有著很廣泛的使用，與原生APP開發(fā)模式并存互補。它給開發(fā)者帶來很多有趣的新特性，CSS3為實現(xiàn)各種網(wǎng)頁效果提供了更簡便的方式。

總結(jié)

以上是生活随笔為你收集整理的第一节：别出心裁的HTML5简介的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。