Web開發中HTML5技術的應用探討

唐曉玲 常州科信交通科技有限公司 楊年豐 常州市武進第三人民醫院

1 移動互聯網技術的發展

1.1 移動廣告

移動廣告就是在手機、PSP、平板電腦上訪問應用或者網頁的時候出現的廣告，這些廣告包括圖片、網頁、動畫廣告等。

1.2 移動搜索

通過移動設備，如在手機、PSP、平板電腦等在互聯網上進行搜索，從而使用戶可以快速高效的獲得需要的信息資源。目前搜索主要有兩種方式：一是WAP 接入搜索 WAP/WEB，另一種是直接搜索WEB內容。

1.3 移動購物

在手機、平板電腦等上通過訪問互聯網的形式，在互聯網上進行購買商品。

1.4 移動社交

用戶在手機、PSP、平板電腦上通過訪問互聯網，在社交應用（QQ、Facebook、微博等）上進行廣泛的交流。

1.5 在多媒體方面

用戶在手機、PSP、平板電腦上通過接入互聯網進行觀看動畫、影片等。

1.6 移動游戲

用戶在手機、PSP、平板電腦上等移動設備上通過接入互聯網享受互聯網游戲的服務。

2 Web開發中HTML5技術的應用

2.1 什么是HTML5

1999年所制定的HTML4.01和XHTML1.0標準已經不能滿足社會發展的需求。HTML5版本在此基礎上發展起來，現在越來越多的瀏覽器已經支持HTML5技術。HTML5具有強化網頁和數據庫等Web應用的功能。HTML5標準已經成為了新的Web技術的標準，在移動瀏覽器中受到了歡迎。

2.2 Web網頁開發中的HTML5技術

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

HTML5技術中新產生的元素有header、article、footer 和 nav，這些新元素可以幫助HTML更好實現結構化和語義化。header通常可以說成頭部，包含引導、導航信息、含列表、搜索框和主題相關的logo。article元素指的是文檔、頁面，主要作用是顯示文章的內容。Footer的功能主要是對文章末尾的基本信息進行說明，如作者信息或者版權信息。nav用來顯示當前頁面的導航鏈接。

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

3 Web應用開發中的HTML5技術

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

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

Web技術 HTML、JS 和 CSS在 創建跨平臺的移動應用時,需要PhoneGap移動框架的支持。PhoneGap 程序包含config.xml文件和通過 PhoneGap的API調用設備兩個部分。config.xml控制應用中的行為，對Cordova 的API功能、要啟動的插件和一些平臺相關的設置進行控制。

4 結束語

隨著社會的進步，經濟的發展，Html5技術順應時代的潮流發展起來。Web 開發過去在安全和設備訪問等方面存在很大的缺陷，Web開發中的HTML5技術可以方便的構建移動端的網頁APP，可以對磁盤系統和攝像頭等敏感設備進行訪問。Html5技術可以很好地支持定位、觸摸和傳感器等功能。可以說，以往Web開發過程中的限制都被Html5技術很好地解決了，而且進一步促進了Web開發的發展。本文主要就Web網頁開發中和Web應用中HTML5技術進行探討研究，豐富了手機、PSP、平板電腦等移動設備的web應用。