HTML5的主要技術組成部分及功能介紹

時間：2022-05-29 18:00:01 | 來源：網(wǎng)絡營銷

時間：2022-05-29 18:00:01 來源：網(wǎng)絡營銷

HTML5的發(fā)展越來越邁向成熟，很多的應用已經(jīng)逐漸出現(xiàn)在你我日常生活中了，不只讓傳統(tǒng)網(wǎng)站上的互動Flash逐漸的被HTML5的技術取代，更重要的是可以透過HTML5的技術來開發(fā)跨平臺的手機軟件，這也讓許多開發(fā)者感到十分的興奮！

當你開始想要學習，或者試圖想要投入相關的開發(fā)時，由于HTML5的技術還在持續(xù)發(fā)展、進化當中，學習的資源也都比較零散，較難有一個整體的方向，在本篇文章中，億企邦將會為大家介紹一些HTML5的主要技術組成，并且提供一些學習資源讓大家參考。

1、HTML5的包含部分

自1999年以后HTML 4.01已經(jīng)改變了很多，今天，在HTML 4.01中的幾個已經(jīng)被廢棄，這些元素在HTML5中已經(jīng)被刪除或重新定義（具體可查看億企邦《HTML5和HTML4的區(qū)別：HTML5新標簽的用法解釋》的相關介紹）。

為了更好地處理今天的互聯(lián)網(wǎng)應用，HTML5添加了很多新元素及功能，比如: 圖形的繪制，多媒體內(nèi)容，更好的頁面結(jié)構(gòu)，更好的形式處理，和幾個api拖放元素，定位，包括網(wǎng)頁應用程序緩存，存儲，網(wǎng)絡工作者等。

一般廣義而言的HTML5則包含了HTML、CSS和JavaScript三個部分，不單單只是HTML部分而已，CSS3和JavaScript也有許多的創(chuàng)新，讓整個網(wǎng)頁程序功能更加繽紛。

2、脫機功能

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

（1）、WebStorage：比Cookies更大、更有彈性的的儲存。

（2）、Web SQL Database：本地端的SQL數(shù)據(jù)庫。

（3）、Indexed DB：Key-value的本地數(shù)據(jù)庫。

（4）、Application Cache：將部分常用的網(wǎng)頁內(nèi)容cache起來。

3、實時通訊

以往網(wǎng)站由于HTTP協(xié)議以及瀏覽器的設計，實時的互動性相當?shù)氖芟?，只能使用一些技巧?ldquo;仿真”實時的通訊效果，但HTML5提供了完善的實時通訊支持。

（1）、WebSocket：實時的socket聯(lián)機。

（2）、Web Workers：以往JavaScript都是single thread，透過Worker可以有多個運算。

（3）、Notifications：原生的提示訊息，類似像OS X的Growl提示。

4、檔案以及硬件支持

不知道大家有沒有發(fā)現(xiàn)，在Gmail等新的網(wǎng)頁程序當中，已經(jīng)可以透過拖拉的方式將檔案作為郵件附件？這就是這部份HTML5檔案的功能中的Dragn Drop和File API。

（1）、Dragn Drop：HTML元素的拖拉。

（2）、File API：讀取用戶本機計算機的內(nèi)容。

（3）、Geolocation：地理定位。

（4）、Device orientation：手持裝置的方向。

（5）、Speech input：語音輸入。

5、語義化

語義化的網(wǎng)絡是可以讓計算機能夠更加理解網(wǎng)頁的內(nèi)容，對于像是搜索引擎的優(yōu)化（SEO）或是推薦系統(tǒng)可以有很大的幫助（對于SEO優(yōu)化的優(yōu)勢，具體可查看億企邦《以SEO的角度來分析HTML5與搜索引擎優(yōu)化的聯(lián)系》的相關介紹）。

（1）、New tags：新的標簽，像是header、section等。

（2）、Application tags：也是新的標簽，像是meter、progress等。

（3）、Microdata：加入語義的數(shù)據(jù)讓搜索引擎等網(wǎng)站可以正確顯示。

（4）、Form type：form可以加入的type便多了，包含email和tel等屬性，瀏覽器會協(xié)助進行數(shù)據(jù)格式的驗證。

6、多媒體

Audio、Video的卷標支持以及Canvas的功能應該是大家對于HTML5最熟悉的部份了，也是許多人認為Flash會被取代的主要原因。

（1）、Audio video：影片和音樂的原生播放支持。

（2）、Canvas：2D的繪圖功能支持。

（3）、Canvas 3D：3D的繪圖功能支持。

（4）、SVG：向量圖支援。

7、CSS 3技術

CSS 3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動畫功能。

（1）、Selector：更有彈性的選擇器。

（2）、Webfonts：嵌入式字體。

（3）、Layout：多樣化的排版選擇。

（4）、Stlying radius gradient shadow：圓角、漸層、陰影。

（5）、Border background：邊框的背景支持。

（6）、Transition：組件的移動效果。

（7）、Transform：組件的變形效果。

（8）、Animation：將移動和變形加入動畫支持。

8、JavaScript技術

HTML5在比較JavaScript的基本面也新增了DOM的API、和瀏覽器上下頁的紀錄修改。

（1）、DOM API：更方便的查詢DOM組件。

（2）、History API：瀏覽器的上下頁內(nèi)容修改，方便AJAX可以保留瀏覽記錄。

截至目前而言，主流的網(wǎng)頁瀏覽器Firefox 5、Chrome 12和Safari 5都已經(jīng)支持了許多的HTML5標準，而且目前最新版的IE 10也支持了許多HTML5標準，隨著使用者陸續(xù)升級到新版的瀏覽器，開發(fā)者應該在現(xiàn)在就可以著手開發(fā)！

而對于舊的瀏覽器兼容性而言，億企邦也曾專門撰文介紹過舊版ie瀏覽器的兼容功能，對此，大家可查看一下億企邦《如何解決IE6/IE7/IE8瀏覽器不兼容HTML5新標簽的問題》的相關介紹。

而Modernizer也是一個相當重要的JavaScript函數(shù)庫，提供開發(fā)者輕松的方式判別目前使用者的瀏覽器是否有支持特定的HTML5功能。

億企邦點評：

從可用性的角度上看，HTML5可以更好的促進用戶于網(wǎng)站間的互動情況，多媒體網(wǎng)站可以獲得更多的改進，特別是在移動平臺上的應用，使用HTML5可以提供更多高質(zhì)量的視頻和音頻流。

到目前為止，事實就是iPhone和iPad將不會支持FLASH，同時ADOBE公司也在近期公開聲明將停止FLASH基于移動平臺的開發(fā)，現(xiàn)在我們已經(jīng)可以這么說：移動平臺日后視頻音頻是HTML5的天下！