陳 庚，朱曉慶，吳元杰，何毅平

（長江工程職業(yè)技術(shù)學院 湖北 武漢 430212）

1 引言

HTML5是Web前端開發(fā)技術(shù)的核心組成部分，HTML5作為標記性語言具有很強的兼容性。Web前端開發(fā)技術(shù)關(guān)系到互聯(lián)網(wǎng)的發(fā)展，HTML5作為Web前端開發(fā)的關(guān)鍵性技術(shù)，對Web前端的發(fā)展有著極大推動作用。當前HTML5已經(jīng)廣泛運用在一些成熟瀏覽器中。

2 HTML5技術(shù)概述

HTML5是網(wǎng)頁制作中常用技術(shù)。進入信息時代以來，互聯(lián)網(wǎng)充斥在人們的生產(chǎn)生活中，網(wǎng)頁制作的重要性逐漸顯現(xiàn)出來。HTML5又被稱之為超文本標記語言，在網(wǎng)頁制作中首選使用HTML5語言。HTML5語言經(jīng)過了多年的發(fā)展，從不完善到完善，逐漸形成了標準規(guī)范的語言。HTML5語言是在HTML不斷改版后形成的最新語言，也是最新版本，在網(wǎng)頁制作中占據(jù)重要地位[1]。

3 HTML5技術(shù)的優(yōu)勢

3.1 低成本開發(fā)

網(wǎng)頁設計開發(fā)中，將視覺體驗放在首位，HTML5與CSS層疊樣式以及JavaScript的配合使用可以保障網(wǎng)頁的動畫效果，保證用戶獲得良好的視覺體驗。HTML5技術(shù)不僅可以運用于互聯(lián)網(wǎng)的網(wǎng)頁制作，還可以有效地運用于移動終端與智能手機，運用的范圍比較廣泛，普適性較強，受到人們的廣泛歡迎。由于可以有效地支持代碼復用，開發(fā)流程能夠得到有效簡化，在短時間內(nèi)不必花費大量的時間去進行基礎(chǔ)代碼開發(fā)，有效地降低了開發(fā)的成本，節(jié)省了大量的資金，在網(wǎng)頁設計時HTML5語言成為眾多網(wǎng)頁開發(fā)人員的首選[2]。

3.2 支持多設備與跨平臺使用

HTML5技術(shù)是HTML技術(shù)的升級版，在HTML技術(shù)升級的過程中，新技能的融合與重組，改進了傳統(tǒng)HTML技術(shù)的不足，完善了HTML的功能，逐漸地適應了互聯(lián)網(wǎng)的發(fā)展。HTML5技術(shù)在瀏覽器中發(fā)揮著至關(guān)重要的作用，由于互聯(lián)網(wǎng)網(wǎng)頁呈現(xiàn)給用戶的信息是海量的，為了保證網(wǎng)頁整體的豐富度，保障用戶的使用體驗，使用HTML5技術(shù)處理之后，可以降低瀏覽器對電腦插件的過度依賴，從而有效地提高瀏覽器的運行速度，滿足用戶的需求。每一位用戶的需求是不相同的，HTML5可以從多個角度滿足不同類型用戶的需求，這是HTML5技術(shù)的優(yōu)勢。HTML5技術(shù)具有極強的兼容性，可以與其他的前端技術(shù)實現(xiàn)比較好的兼容，這是一般技術(shù)無法實現(xiàn)的。HTML5技術(shù)可以完成與用戶的溝通，不需要通過麥克風、攝像頭等外部設備，用戶在觀看視頻時，可以隨時插入麥克風，但是并不會影響視頻的正常播放，用戶不需要重新進入，有效地簡化操作流程，給用戶提供了極大的便利，滿足了用戶的需求[3]。

3.3 支持實時更新

HTML5增加了新的功能，即支持實時更新技術(shù)，這是HTML5技術(shù)的優(yōu)勢，這對于網(wǎng)頁開發(fā)者而言具有重大意義，并且實用價值高。以往HTML技術(shù)沒有比較完備的統(tǒng)一標準，導致手機、電腦等終端設備無法有統(tǒng)一的標準，但是HTML5技術(shù)的應用，使得手機、電腦等終端設備有了統(tǒng)一的標準，可以化簡Web前端設計開發(fā)的流程，網(wǎng)頁制作開發(fā)人員在設計Web前端時將會變得更簡單與輕松。

4 HTML5在Web前端開發(fā)設計中的應用

4.1 Web前端網(wǎng)頁的自適應開發(fā)技術(shù)

隨著互聯(lián)網(wǎng)的發(fā)展，移動設備與人們的生產(chǎn)生活緊密地聯(lián)系在一起，人們利用移動設備獲取外界的信息，擴展自己的知識面，移動設備給社會帶來的改變是巨大的。隨著用戶需求的增加，用戶對移動設備也提出了更高的要求，移動設備的需求越來越高，因此Web前端開發(fā)技術(shù)受到人們廣泛關(guān)注。Web應用程序在開發(fā)時，需要注重網(wǎng)頁的視覺呈現(xiàn)效果，一些綜合類網(wǎng)站為了滿足不同移動設備的應用效果，對不同的移動設備制定了不同的網(wǎng)頁版本，最大程度上確保了網(wǎng)頁在移動設備上的顯示效果，雖然可以滿足用戶的需求，但也有不利的一面，就是加大網(wǎng)頁的維護難度。使用傳統(tǒng)的HTML技術(shù)，無法有效解決這一問題，但是使用HTML5技術(shù)后，可以有效地解決這一難題，HTML5技術(shù)中的自適應網(wǎng)頁設計，可以完美解決網(wǎng)頁頁面結(jié)構(gòu)的問題[4]。

Web的前端網(wǎng)頁進行自適應開發(fā)時，借助的是HTML5技術(shù)中的viewport指令實現(xiàn)的。Viewpoint是HTML5技術(shù)的重要組成部分，其是網(wǎng)頁寬度和高度的默認值，viewpoint可以廣泛運用在所有的瀏覽器中，并沒有其他的限制，將viewpoint指令的寬度數(shù)值調(diào)至移動設備屏幕相同即可。使用自適應技術(shù)可以保證各元素能夠在表格屏幕中，以免元素溢出現(xiàn)象的發(fā)生。

4.2 離線緩存

隨著Web網(wǎng)頁的APP發(fā)展越來越快，影響到人們生活的方方面面，這種背景下，移動終端APP使用HTML5開發(fā)也越來越普及，HTML5技術(shù)成為網(wǎng)頁開發(fā)時開發(fā)人員的首選[5]。隨著用戶需求的增多，HTML5技術(shù)也在不斷發(fā)展與完善，新增了很多新的元素與應用功能，離線緩存便是新增功能之一。移動設備離不開信號，一旦離開信號的覆蓋，移動設備便不能正常使用，這也為用戶帶來了極大的不便，離線緩存功能的出現(xiàn)可以有效地解決這一問題，在沒有信號的情況下，用戶可以在離線情況下瀏覽完整的網(wǎng)頁。

在乘坐地鐵與火車等交通工具時，信號并不強烈，用戶無法正常使用手機等移動終端瀏覽網(wǎng)頁，嚴重影響用戶的使用[6]。HTML5技術(shù)的離線緩存功能的效果就顯示出來了，Web離線程序開發(fā)技術(shù)，將網(wǎng)絡資源進行離線緩存，當信號較弱的情況下，用戶可以通過另一種方式對網(wǎng)絡信息進行瀏覽，滿足用戶的需求。在長途路途中，很多用戶只能借助移動設備消磨自己的時間，但是無信號卻嚴重地影響用戶設備的使用，離線緩存功能的出現(xiàn)，可以事先將網(wǎng)頁信息緩存在移動設備上，即使沒有信號，用戶仍可以滿足自己的需求。HTML5技術(shù)在當前是使用比較多的開發(fā)技術(shù)，但是并不意味著HTML5技術(shù)是穩(wěn)定的，在用戶的需求發(fā)生變化后，HTML5技術(shù)無法滿足用戶新的技術(shù)時，HTML5技術(shù)便會再次改進。

4.3 音視頻自由嵌入

HTML5的Web前端開發(fā)技術(shù)中，音視頻自由嵌入，這對多媒體形式的發(fā)展有著極大幫助，可以增強多媒體呈現(xiàn)形式的靈活性[7]。但是音視頻的自由嵌入并不是簡單的事情，以往的HTML技術(shù)無法實現(xiàn)，而HTML5技術(shù)中的多媒體標簽embed、audio和video元素可以幫助音視頻的嵌入。以往用戶在使用Web網(wǎng)頁播放音視頻的時候，需要額外安裝其他的播放插件，但是網(wǎng)頁開發(fā)時使用HTML5技術(shù)，可以避免這些情況，用戶在播放音視頻的時候，不需要安裝額外的插件，也不需要下載額外的APP，可以有效減少占用移動設備的存儲空間。

4.4 圖形動畫的制作技術(shù)

HTML5技術(shù)中存有一個重要的功能，即canvas繪圖功能，這是HTML5技術(shù)中一個極為重要的功能，使用canvas繪圖功能，可以有效提升移動平臺的繪圖能力[8]。Canvas元素本身是一個畫布，是不具備繪圖功能的，但是canvas可以說是進行繪圖的一個基礎(chǔ)，所有的圖形繪制工作需要借助JavaScript完成。3D動畫是當前人們追求的一種畫面呈現(xiàn)方式，在制作3D動畫時，與傳統(tǒng)的動畫制作有不同之處，但也有相似之處，首先制作大量的靜態(tài)圖片，將靜態(tài)圖片放置在canvas畫布上，利用HTML5技術(shù)，在HTML5技術(shù)中設置定時器，合理地設置每一張圖片的播放時間與間隔時間，如此便完成了3D動畫的制作。隨著人們生活水平的提升，人們對生活的質(zhì)量要求逐漸提升，3D動畫也是未來動畫制作的趨勢，因此HTML5技術(shù)的發(fā)展與運用可以有效促進其發(fā)展，可以使得3D動畫的整個頁面變得豐富多彩，提升用戶的觀看體驗。

4.5 地理定位

地理定位是HTML5技術(shù)中的一個極為重要的特性，在人們的生活中發(fā)揮著重要作用，使用地理定位技術(shù)可以獲取用戶的地理位置。對于使用移動端的用戶來說，GPS定位系統(tǒng)是必不可少的插件，在獲取用戶地理信息的時候，GPS定位系統(tǒng)是首選，并且其精準度極高，受到廣大用戶的支持。但是GPS也有一定的弊端，具有區(qū)域局限性，不能在所有的場合都適用，在室內(nèi)使用電腦端的用戶的地理位置便不能通過GPS實行精準定位。

5 結(jié)語

HTML5技術(shù)在Web前端開發(fā)中極為常見，隨著移動設備的重要性提高，網(wǎng)頁制作的重要性受到了人們的重視。HTML5技術(shù)運用的目的是為了移動設備能夠支持多媒體的正常使用。HTML5技術(shù)的發(fā)展也有多年的歷史，對移動設備的發(fā)展有著極大幫助，在網(wǎng)頁制作中成為首選技術(shù)。將HTML5技術(shù)運用到Web前端開發(fā)設計工作的效率能夠得到極大提升，本文對HTML5技術(shù)進行了簡要的探究，希望對互聯(lián)網(wǎng)的發(fā)展有所幫助。