Web開發(fā)中HTML5技術(shù)的應(yīng)用探討

唐曉玲 常州科信交通科技有限公司 楊年豐 常州市武進(jìn)第三人民醫(yī)院

1 移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展

1.1 移動(dòng)廣告

移動(dòng)廣告就是在手機(jī)、PSP、平板電腦上訪問(wèn)應(yīng)用或者網(wǎng)頁(yè)的時(shí)候出現(xiàn)的廣告，這些廣告包括圖片、網(wǎng)頁(yè)、動(dòng)畫廣告等。

1.2 移動(dòng)搜索

通過(guò)移動(dòng)設(shè)備，如在手機(jī)、PSP、平板電腦等在互聯(lián)網(wǎng)上進(jìn)行搜索，從而使用戶可以快速高效的獲得需要的信息資源。目前搜索主要有兩種方式：一是WAP 接入搜索 WAP/WEB，另一種是直接搜索WEB內(nèi)容。

1.3 移動(dòng)購(gòu)物

在手機(jī)、平板電腦等上通過(guò)訪問(wèn)互聯(lián)網(wǎng)的形式，在互聯(lián)網(wǎng)上進(jìn)行購(gòu)買商品。

1.4 移動(dòng)社交

用戶在手機(jī)、PSP、平板電腦上通過(guò)訪問(wèn)互聯(lián)網(wǎng)，在社交應(yīng)用（QQ、Facebook、微博等）上進(jìn)行廣泛的交流。

1.5 在多媒體方面

用戶在手機(jī)、PSP、平板電腦上通過(guò)接入互聯(lián)網(wǎng)進(jìn)行觀看動(dòng)畫、影片等。

1.6 移動(dòng)游戲

用戶在手機(jī)、PSP、平板電腦上等移動(dòng)設(shè)備上通過(guò)接入互聯(lián)網(wǎng)享受互聯(lián)網(wǎng)游戲的服務(wù)。

2 Web開發(fā)中HTML5技術(shù)的應(yīng)用

2.1 什么是HTML5

1999年所制定的HTML4.01和XHTML1.0標(biāo)準(zhǔn)已經(jīng)不能滿足社會(huì)發(fā)展的需求。HTML5版本在此基礎(chǔ)上發(fā)展起來(lái)，現(xiàn)在越來(lái)越多的瀏覽器已經(jīng)支持HTML5技術(shù)。HTML5具有強(qiáng)化網(wǎng)頁(yè)和數(shù)據(jù)庫(kù)等Web應(yīng)用的功能。HTML5標(biāo)準(zhǔn)已經(jīng)成為了新的Web技術(shù)的標(biāo)準(zhǔn)，在移動(dòng)瀏覽器中受到了歡迎。

2.2 Web網(wǎng)頁(yè)開發(fā)中的HTML5技術(shù)

由于移動(dòng)設(shè)備與電腦在硬件的配置是不同的，所以移動(dòng)Web瀏覽器的功能受到了限制。在移動(dòng)設(shè)備的屏幕分辨率低，不能很好地將網(wǎng)頁(yè)上的內(nèi)容清楚地顯現(xiàn)出來(lái)，目前階段可以通過(guò)屏幕的縮放來(lái)更好地顯示頁(yè)面，但是還是不能很好地滿足用戶的需求。HTML5技術(shù)很好地優(yōu)化了界面，使Android 和iOS系統(tǒng)很好的支持了Webkit，也使CSS3更好地實(shí)現(xiàn)了UI界面。

HTML5技術(shù)中新產(chǎn)生的元素有header、article、footer 和 nav，這些新元素可以幫助HTML更好實(shí)現(xiàn)結(jié)構(gòu)化和語(yǔ)義化。header通?？梢哉f(shuō)成頭部，包含引導(dǎo)、導(dǎo)航信息、含列表、搜索框和主題相關(guān)的logo。article元素指的是文檔、頁(yè)面，主要作用是顯示文章的內(nèi)容。Footer的功能主要是對(duì)文章末尾的基本信息進(jìn)行說(shuō)明，如作者信息或者版權(quán)信息。nav用來(lái)顯示當(dāng)前頁(yè)面的導(dǎo)航鏈接。

在移動(dòng)設(shè)備的屏幕分辨與電腦分辨率存在差異，在移動(dòng)設(shè)備屏幕上不能正常的顯示網(wǎng)站信息，但是Html5技術(shù)Viewport窗口和MediaQueries樣式模塊就可以讓網(wǎng)頁(yè)很好地適應(yīng)移動(dòng)端設(shè)備的屏幕。為了解決移動(dòng)設(shè)備屏幕分辨率的問(wèn)題，Html5提供了Viewport窗口，開發(fā)者就可以創(chuàng)建一個(gè)縮放和自定義大小的窗口。MediaQueries樣式模塊的主要作用是改變傳統(tǒng)的頁(yè)面布局。但MediaQueries樣式模塊需要在HTML頁(yè)面內(nèi)引入一個(gè) CSS 樣式表文件后才能直接使用，同時(shí)，還需要在CSS樣式文件中定義一個(gè)media樣式。

3 Web應(yīng)用開發(fā)中的HTML5技術(shù)

UI 框架、mvc 框架和工具庫(kù)都是開發(fā)一個(gè)完整的Web 應(yīng)用涉及到的前端技術(shù)，雖然有很多的前端框架（YUI、closure Library 和 Dojo等）都包含了上述的前端技術(shù)，但是在移動(dòng)端，這些重量級(jí)的前端框架不能滿足人們的需求，需要我們?cè)谶@方面進(jìn)行完善創(chuàng)新。目前階段，可以選擇很多輕量級(jí)的框架，這些框架具有完整的移動(dòng)設(shè)備UI式樣，如按鈕、列表、文本框、日歷選擇器、Slider 、工具欄、Bootstrap、jquery mobile和 Foundation等組件。

在進(jìn)行大中型應(yīng)用的開發(fā)過(guò)程中，需要大量的DOM操作和服務(wù)器之間的數(shù)據(jù)交互，這不僅僅是一個(gè)簡(jiǎn)單的開發(fā)過(guò)程，還需要MVC 框架的支持。單頁(yè)應(yīng)用正值會(huì)對(duì)MVC 框架造成很嚴(yán)重的影響，當(dāng)單頁(yè)應(yīng)用正值太多時(shí)就會(huì)導(dǎo)致MVC 框架癱瘓。在應(yīng)用開發(fā)過(guò)程中，還需要對(duì)特定的任務(wù)進(jìn)行開發(fā)，如為了減小應(yīng)用的大小可以使用ZEPTO 自帶的jquery工具，為了節(jié)省流量的使用，需要用UNDERscoreCch 處理列表數(shù)組。在移動(dòng)應(yīng)用界還存在非常重要的重量級(jí)的框架，如Sencha。Html5技術(shù)在開發(fā)頁(yè)面的時(shí)候，還需要訪問(wèn)移動(dòng)操作系統(tǒng)沒(méi)有開放的信息，就需要應(yīng)用些平臺(tái)兼容層的工具將 javascript代碼編譯成Objective-C或者Java代碼，最終生成iOS 或者Android 應(yīng)用。Html相關(guān)的技術(shù)幾乎都是開源的，一定要合理的選擇合適的技術(shù)。

Web技術(shù) HTML、JS 和 CSS在 創(chuàng)建跨平臺(tái)的移動(dòng)應(yīng)用時(shí),需要PhoneGap移動(dòng)框架的支持。PhoneGap 程序包含config.xml文件和通過(guò) PhoneGap的API調(diào)用設(shè)備兩個(gè)部分。config.xml控制應(yīng)用中的行為，對(duì)Cordova 的API功能、要啟動(dòng)的插件和一些平臺(tái)相關(guān)的設(shè)置進(jìn)行控制。

4 結(jié)束語(yǔ)

隨著社會(huì)的進(jìn)步，經(jīng)濟(jì)的發(fā)展，Html5技術(shù)順應(yīng)時(shí)代的潮流發(fā)展起來(lái)。Web 開發(fā)過(guò)去在安全和設(shè)備訪問(wèn)等方面存在很大的缺陷，Web開發(fā)中的HTML5技術(shù)可以方便的構(gòu)建移動(dòng)端的網(wǎng)頁(yè)APP，可以對(duì)磁盤系統(tǒng)和攝像頭等敏感設(shè)備進(jìn)行訪問(wèn)。Html5技術(shù)可以很好地支持定位、觸摸和傳感器等功能?？梢哉f(shuō)，以往Web開發(fā)過(guò)程中的限制都被Html5技術(shù)很好地解決了，而且進(jìn)一步促進(jìn)了Web開發(fā)的發(fā)展。本文主要就Web網(wǎng)頁(yè)開發(fā)中和Web應(yīng)用中HTML5技術(shù)進(jìn)行探討研究，豐富了手機(jī)、PSP、平板電腦等移動(dòng)設(shè)備的web應(yīng)用。