這篇文章主要講解了“新手應(yīng)該如何學(xué)習(xí)HTML5 ”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“新手應(yīng)該如何學(xué)習(xí)HTML5 ”吧！

HTML5的發(fā)展改變了互聯(lián)網(wǎng)技術(shù)趨勢(shì)，前端熱度依舊不減，所以對(duì)于應(yīng)用開(kāi)發(fā)人員前端技術(shù)也成了必備技能之一，本篇文章的目的是為了幫助萌新的入門指導(dǎo)，也同時(shí)希望能為老鳥(niǎo)起到一定查漏補(bǔ)缺的作用，那么讓我們開(kāi)始吧。

什么是HTML5？

廣義上的HTML5是HTML新的修訂版本，由萬(wàn)維網(wǎng)聯(lián)盟（W3C）于2014年10月完成標(biāo)準(zhǔn)制定。目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。

但我們?cè)谌粘Ｖ谐Ｕf(shuō)的HTML5技術(shù)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。

開(kāi)發(fā)人員在開(kāi)發(fā)過(guò)程中為了提高開(kāi)發(fā)效率，常常會(huì)用到各種組件工具例如：jQuery，BootStrap，webpack，或者前端框架，如：VUE等。除了學(xué)習(xí)各種工具框架的使用，HTML5的基礎(chǔ)知識(shí)也是需要了解掌握，這樣有助于更好的理解工具框架的設(shè)計(jì)以及使用。

后面我們將結(jié)合一系列文章，深入淺出的介紹關(guān)于HTML，CSS和JavaScript的常用功能及編程技巧。

那么首先來(lái)了解下HTML5都更新了那些內(nèi)容：

什么樣的網(wǎng)頁(yè)是HTML5網(wǎng)頁(yè)？

只要html頁(yè)面第一行是 瀏覽器就會(huì)按照HTML5標(biāo)準(zhǔn)去解析網(wǎng)頁(yè)，無(wú)論頁(yè)面中是否使用了HTML5新增內(nèi)容

HTML5新增了哪些內(nèi)容？

       • 更好的語(yǔ)義化標(biāo)簽

       結(jié)構(gòu)元素：article、aside、header、hgroup、footer、figure、section、nav。

       其他元素：video、audio、canvas、embed、mark、progress、meter、time、command、details、datagrid、keygen、output、source、menu、ruby、wbr、bdi、dialog。

       一些語(yǔ)義化標(biāo)簽如section、nav在使用時(shí)和傳統(tǒng)div并無(wú)大的區(qū)別，但這種標(biāo)簽更有利于搜索引擎的索引整理，利于智能手機(jī)、Pad等小屏設(shè)備適配，以及方便殘障人士使用。

       同時(shí)也有些標(biāo)簽為瀏覽器增加了新的功能，如audio、video。

       • 應(yīng)用程序接口（API）

             1. Canvas，可以獲取canvas標(biāo)簽元素的上下文對(duì)象，然后使用該上下文對(duì)象中的繪圖功能進(jìn)行繪制。https://www.w3schools.com/html/html5_canvas.asp

　　2. 音頻和視頻，使用audio和video元素，瀏覽器無(wú)需安裝播放插件，同時(shí)提供了播放控制API。

             3. 地理位置，通過(guò)使用navigator相關(guān)API在用戶授權(quán)情況下，可以獲取用戶位置信息。

             4. 新的表單元素，tel、email、url、search、range、number、color、datetime、datetime-local、time、date、week、month。隨著瀏覽器的支持，很多表單控件將成為歷史

             5. 新的表單特性和函數(shù)：placeholder、autocomplete、autofocus、spellcheck、list特性、datalist元素、min和max、step、required

             6. 拖放API：draggable屬性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer對(duì)象

             7. WebSocket，一種瀏覽器與服務(wù)器間進(jìn)行全雙工通訊（full-duplex）的網(wǎng)絡(luò)技術(shù)，可以傳輸基于信息的文本和二進(jìn)制的數(shù)據(jù)

             8. Web Workers，JavaScript單線程，復(fù)制js需算會(huì)導(dǎo)致頁(yè)面出現(xiàn)假死。如果js操作不需要訪問(wèn)頁(yè)面window，那么可以放在web worker中并行處理。

       • 廢除元素

       廢除一些純變現(xiàn)以及兼容性不好的元素如：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

瀏覽器支持

       IE9開(kāi)始支持，IE10后支持較好。

       Chrome，F(xiàn)irefox，Safari，Opera支持較好。

       以上便是一些常用的HTML5新增的一些特性，接下來(lái)，我們一起看一看在HTML5在頁(yè)面布局方面有什么變化吧。

HTML5頁(yè)面布局

常用的頁(yè)面布局方式有很多種，比如

• 最早的靜態(tài)表格布局

• 通過(guò)柵欄劃分頁(yè)面的流式布局

• 根據(jù)屏幕大小自動(dòng)調(diào)整內(nèi)容的自適應(yīng)布局

• 融和流式布局和自適應(yīng)布局的響應(yīng)式布局

以上布局主要通過(guò)使用css中display、position和float屬性相配合來(lái)實(shí)現(xiàn)，在確定位置以及清除浮動(dòng)時(shí)，常常會(huì)遇到棘手問(wèn)題（例如：垂直居中，屏幕適應(yīng)）。

CSS3中提供了一種更簡(jiǎn)單的布局方式Flex布局（彈性布局）。

下面我們通過(guò)一個(gè)例子來(lái)展示Flex布局的易用性，下圖是一個(gè)典型的單頁(yè)應(yīng)用樣式，結(jié)構(gòu)上分為header，aside，footer和main四部分。header和footer自適應(yīng)寬度，aside固定寬度并可收縮，main區(qū)域自動(dòng)根據(jù)剩余空間填充。

我們首先使用自適應(yīng)布局來(lái)實(shí)現(xiàn)上圖的結(jié)構(gòu)

• HTML