馮秀玲，張楊娟

（運城職業(yè)技術(shù)大學(xué)，山西 運城 044000）

1 簡 介

隨著時代的發(fā)展，統(tǒng)一互聯(lián)網(wǎng)的通用標(biāo)準(zhǔn)顯得十分重要，HTML5 就是在這樣的情況下發(fā)展起來的。HTML5 是萬維網(wǎng)的核心語言，2014 年10 月由萬維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定，也就是HTML 的最新修訂版本。它的目標(biāo)就是將Web 帶入一個成熟的平臺。在這個平臺上有本地存儲、網(wǎng)頁多媒體、三維圖形及特效、Css3 等很多新特性，將視頻、音頻、動畫、圖像以及與電腦的互聯(lián)標(biāo)準(zhǔn)化，可以提供、提高可用性和改進用戶的友好體驗的功能。HTML5 的設(shè)計目的是為了在移動設(shè)備上支持多媒體，目前很多瀏覽器都具備支持HTML5 的能力。同時HTML5 技術(shù)可以進行跨平臺使用，能夠自行適應(yīng)網(wǎng)頁設(shè)計，及時更新。

1.1 HTML5

HTML5 是超文本標(biāo)記語言（HyperText Markup Language）的第五代修訂版本。它的出現(xiàn)就是要統(tǒng)一各個瀏覽器的標(biāo)準(zhǔn)，給網(wǎng)站開發(fā)人員和瀏覽者提供一個更好的體驗。同時，在原來版本的基礎(chǔ)上新增了很多新的特性，更符合互聯(lián)網(wǎng)新時代人們的使用需求。HTML5 具有不同于以前各種版本的新優(yōu)勢，主要體現(xiàn)在跨瀏覽器瀏覽頁面效果相同，可以實現(xiàn)圖文并茂的多媒體體驗效果，遇到?jīng)_突以用戶為先的原則，將以前煩瑣的操作簡單化。

1.2 Css3

Css3 是Css（層疊樣式表）技術(shù)的升級版本，任何一種文本編輯工具都可用來編寫，在不犧牲性能和語義結(jié)構(gòu)的前提下，Css3 中提供了更多的風(fēng)格和更強的效果，極大地滿足了開發(fā)者的需求。此外，較之以前的Web 排版增加了更多的字體選擇、更方便的演示效果、更絢麗的圖形動畫，提供了更高的靈活性和控制性。

1.3 JavaScript

JavaScript 是適應(yīng)動態(tài)網(wǎng)頁制作的需要而誕生的一種新的編程語言，廣泛應(yīng)用于客戶端，用來給網(wǎng)頁增加動態(tài)效果的，它和Css 一樣是一種網(wǎng)頁嵌入技術(shù)。使用JavaScript 可以開發(fā)動態(tài)交互式的網(wǎng)頁，實現(xiàn)了網(wǎng)頁與用戶之間的實時互動，使得網(wǎng)頁更加活躍、精彩。

2 界面設(shè)計

山西旅游平臺一共包括首頁、山西簡介、特色美食、精美景點、著名人物、高等學(xué)府六個頁面，通過首頁可以鏈接到指定頁面進行瀏覽。在子頁面也可以通過鏈接實現(xiàn)頁面之間的相互跳轉(zhuǎn)。每個頁面都使用header、article、footer 元素進行頁面的劃分。

2.1 首頁

在平臺的首頁主要通過超鏈接來實現(xiàn)對其他子頁面的鏈接效果。通過Css3 對導(dǎo)航樣式進行設(shè)置，合理運用HTML5 頁面元素對網(wǎng)頁結(jié)構(gòu)進行設(shè)置，真正實現(xiàn)頁面結(jié)構(gòu)與表現(xiàn)分離，便于管理與維護。

頁面對應(yīng)的主要內(nèi)容及關(guān)系如圖1 所示。

圖1 頁面內(nèi)容及關(guān)系

2.2 其他頁面的設(shè)計

其他子頁面的設(shè)置，也是通過導(dǎo)航鏈接實現(xiàn)相互轉(zhuǎn)換，頁面底部的版權(quán)信息和頁面頂部的導(dǎo)航與首頁的設(shè)置大體相同，設(shè)計保持一致，風(fēng)格統(tǒng)一。頁面樣式的設(shè)置也是借助Css3 進行布局，網(wǎng)頁上展示的圖片可以使用滾動或放大的形式進行展示。滾動的實現(xiàn)借助于marquee 元素進行設(shè)置，同時對圖片的輪播方式、時間進行設(shè)置，放大顯示的實現(xiàn)可以借助JavaScript代碼來進行。文字可以借助于p 元素和hn 元素進行設(shè)置。

3 功能實現(xiàn)

頁面中部分功能模塊及代碼如圖2 所示。

圖2 主要功能模塊

3.1 導(dǎo)航鏈接

導(dǎo)航鏈接的實現(xiàn)主要通過nav、a、ul、li 元素及其相關(guān)屬性結(jié)合Css3 樣式來進行。主要代碼如下所示：

3.2 用戶注冊

用戶注冊功能的實現(xiàn)使用表單和JavaScript 相結(jié)合的方式進行，要求用戶設(shè)置用戶名和密碼等相關(guān)信息，流程圖如下圖3 所示。

圖3 用戶注冊流程圖

3.3 圖片輪滾與切換

對于圖片展示較多的地方布局，采用圖片輪滾和切換可以展示更多的圖片，也會使得頁面更加豐富活潑，圖片輪滾與切換可以使用marquee 結(jié)合JavaScript 實現(xiàn)，部分JavaScript 代碼如下所示：

3.4 時間顯示

在網(wǎng)頁頁面的固定區(qū)域顯示當(dāng)前時間，可使用時間函數(shù)來獲取服務(wù)器的當(dāng)前時間，再結(jié)合函數(shù)進行計算，將其以需要的方式顯示出來。

3.5 圖片放大

圖片放大功能的實現(xiàn)效果是，當(dāng)鼠標(biāo)移到一個圖片上時，圖片放大顯示；當(dāng)鼠標(biāo)移開時，圖片恢復(fù)原來大小以及位置顯示。該功能的實現(xiàn)也要借助于JavaScript 代碼來進行，通過設(shè)置函數(shù)實現(xiàn)對應(yīng)功能。

4 結(jié)語

通過HTML5 與Css3 以及JavaScript 的有機結(jié)合實現(xiàn)網(wǎng)頁的動態(tài)顯示與交互，使得網(wǎng)頁內(nèi)容更為豐富，形式更加生動活潑，融合了多種媒體元素，真正實現(xiàn)網(wǎng)頁跨平臺播放，給用戶提供了更好的體驗效果。