本文格式為Word版，下載可任意編輯——HTML5新手入門(mén)指南HTML5新手入門(mén)指南

HTML5的進(jìn)展越來(lái)越邁向成熟，好多的應(yīng)用已經(jīng)逐步展現(xiàn)在你我日常生活中了，不只讓傳統(tǒng)網(wǎng)站上的互動(dòng)Flash逐步的被HTML5的技術(shù)取代，更重要的是可以透過(guò)HTML5的技術(shù)來(lái)開(kāi)發(fā)跨平臺(tái)的手機(jī)軟件，讓大量開(kāi)發(fā)者感到特別興奮！

當(dāng)你開(kāi)頭想要學(xué)習(xí)、試圖想要投入相關(guān)的開(kāi)發(fā)時(shí)，由于HTML5的技術(shù)還在持續(xù)進(jìn)展、進(jìn)化當(dāng)中，學(xué)習(xí)的資源也都對(duì)比零散，較難有一個(gè)整體的方向。下面就來(lái)和我一起看看HTML5新手入門(mén)指南吧。

HTML5畢竟是什么？

一般廣義而言的HTML5那么包含了HTML、CSS和JavaScript三個(gè)片面，不單單只是HTML片面而已，CSS3和JavaScript也有大量的創(chuàng)新，讓整個(gè)網(wǎng)頁(yè)程序功能更加繽紛。

HTML5的技術(shù)組成

脫機(jī)功能

HTML5透過(guò)JavaScript供給了數(shù)種不同的脫機(jī)儲(chǔ)存功能，相對(duì)于傳統(tǒng)的Cookie而言有更好的彈性以及架構(gòu)，并且可以?xún)?chǔ)存更多的內(nèi)容。

WebStorage:比Cookies更大、更有彈性的的儲(chǔ)存

WebSQLDatabase:本地端的SQL數(shù)據(jù)庫(kù)

IndexedDB:Key-value的本地?cái)?shù)據(jù)庫(kù)

ApplicationCache:將片面常用的網(wǎng)頁(yè)內(nèi)容cache起來(lái)

實(shí)時(shí)通訊

以往網(wǎng)站由于HTTP協(xié)議以及欣賞器的設(shè)計(jì)，實(shí)時(shí)的互動(dòng)性相當(dāng)?shù)氖芟?，只能使用一些技巧?lái)「仿真」實(shí)時(shí)的通訊效果，但HTML5供給了完善的實(shí)時(shí)通訊支持。

WebSocket:實(shí)時(shí)的socket聯(lián)機(jī)

WebWorkers:以往JavaScript都是singlethread，透過(guò)Worker可以有多個(gè)運(yùn)算

Notifications:原生的提示訊息，類(lèi)似像OSX的Growl提示

檔案以及硬件支持

不知道大家有沒(méi)有察覺(jué)，在Gmail等新的網(wǎng)頁(yè)程序當(dāng)中，已經(jīng)可以透過(guò)拖拉的方式將檔案作為郵件附件？這就是這部份HTML5檔案的功能中的DragnDrop和FileAPI。

DragnDrop:HTML元素的拖拉

FileAPI:讀取用戶(hù)本機(jī)計(jì)算機(jī)的內(nèi)容

Geolocation:地理定位

Deviceorientation:手持裝置的方向

Speechinput:語(yǔ)音輸入

語(yǔ)義化

語(yǔ)義化的網(wǎng)絡(luò)是可以讓計(jì)算機(jī)能夠更加理解網(wǎng)頁(yè)的內(nèi)容，對(duì)于像是探尋引擎的優(yōu)化（SEO）或是推舉系統(tǒng)可以有很大的扶助。

Newtags:新的標(biāo)簽，像是header、section等

Applicationtags:也是新的標(biāo)簽，像是meter、progress等

Microdata:參與語(yǔ)義的數(shù)據(jù)讓探尋引擎等網(wǎng)站可以正確顯示

Formtype:form可以參與的type便多了，包含email和tel等屬性，欣賞器會(huì)輔助舉行數(shù)據(jù)格式的驗(yàn)證

多媒體

Audio、Video的卷標(biāo)支持以及Canvas的功能理應(yīng)是大家對(duì)于HTML5最熟諳的部份了，也是大量人認(rèn)為Flash會(huì)被取代的主要理由。

Audiovideo:影片和音樂(lè)的原生播放支持

Canvas:2D的繪圖功能支持

Canvas3D:3D的繪圖功能支持

SVG:向量圖支援

CSS3

CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的`動(dòng)畫(huà)功能。

Selector:更有彈性的選擇器

Webfonts:嵌入式字體

Layout:多樣化的排版選擇

Stlyingradiusgradientshadow:圓角、漸層、陰影

Borderbackground:邊框的背景支持

Transition:組件的移動(dòng)效果

Transform:組件的變形效果

Animation:將移動(dòng)和變形參與動(dòng)畫(huà)支持

JavaScript

在對(duì)比JavaScript的根本面也新增了DOM的API、和欣賞器上下頁(yè)的紀(jì)錄修改。

DOMAPI:更便當(dāng)?shù)牟樵?xún)DOM組件

HistoryAPI:欣賞器的上下頁(yè)內(nèi)容修改，便當(dāng)AJAX可以留存欣賞記錄

現(xiàn)在就開(kāi)頭用HTML5

截至目前而言，主流的網(wǎng)頁(yè)欣賞器Firefox5、Chrome12和Safari5都已經(jīng)支持了大量的HTML5標(biāo)準(zhǔn)，而且目前最新版的IE9也支持了大量HTML5標(biāo)準(zhǔn)，隨著使用者不斷升級(jí)到新版的欣賞器，開(kāi)發(fā)者理應(yīng)在現(xiàn)在就可以著手開(kāi)發(fā)！

而對(duì)于舊的欣賞器兼容性而言，從前撰文介紹過(guò)的CSS3Pie便是一個(gè)讓