基于HTML5的Web前端開發

李小遐

摘要：HTML是互聯網底層的標記語言，它把世界上幾乎所有的網站都連接在一起。隨著網頁技術突飛猛進的發展，人們對網頁功能的要求越來越高，HTML5以代碼更加干凈和更加容易編寫等優勢，將成為Web前端開發的基本標準，因此也是網頁設計師們必備的一項技能。

關鍵詞：Web前端 網頁設計 HTML HTML5

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-5349（2017）23-0198-01

一、什么是HTML

HTML即超文本標記語言。超文本是一種文本，點擊它后便可以從一個文件跳到另一個文件，也就是指網頁之間相互連接的功能。標記是一種標記符，對普通文檔進行布局及按常規格式設置，從字面上解釋就是被標上標記符的普通文檔。語言是指HTML，實際上是一種可以編程的語言。如今HTML多用于Web前臺開發，它是網頁構成的基礎，我們見到的所有網頁都離不開HTML。通常一個網頁要對應多個HTML文檔，其后綴名為HTML或HTM。HTML以文字為基礎的語言，不需要特定的開發環境，可以直接在Windows自帶的記事本中編寫，HTML程序也不需要什么特定的運行環境，可以使用Windows自帶的IE或者其他瀏覽器運行。

二、關于HTML5

不同版本的HTML總體來說相同之處多于不同之處，但是它們對一些類型的內容會使用不同的標記符。隨著網頁技術的發展，腳本標記語言經歷了HTML4、XHTML和HTML5。HTML4是一種穩定并被廣泛接受的代碼集，如果比較看重瀏覽器的兼容性，HTML4則是一種比較理想的選擇。XHTML是一種非常嚴謹并用XML創建的符合HTML4標準的語言，它與所有支持HTML4的瀏覽器兼容。HTML5是在HTML4的基礎上增加了一些新功能的代碼集，尤其是在應用程序的處理和多媒體方面有了巨大的改進，在網頁的性能表現及網頁結構的優化上，從整體布局到細節處理更加簡便與靈活，它使腳本代碼更加干凈也更容易編寫。

從廣義上來說，HTML5包含了HTML5、CSS和JavaScript三個部分。網頁設計師通過HTML5語言把想要用戶瀏覽的文本、圖片或者音視頻等內容呈現到頁面。CSS是一種用來為HTML文檔添加樣式的計算機語言，其作用是用來布局和美化頁面的外觀，比如可以設置網頁文本的字體、間距、邊距和頁面背景等屬性，可以幫助各個頁面保持整體格式的統一，因此當要開發有很多網頁的網站時，CSS會為開發者帶來很大的便利。JavaScript是一種腳本編程語言，但與Java沒有任何關系，其主要功能是為網頁或者應用程序提供特效功能，用戶瀏覽網頁時看到的自動更換的圖片或者新聞標題，再或者鼠標滑過頁面時背景顏色的更換等效果，通常都是JavaScript編程語言的功勞。

三、基于HTML5的網頁設計與實現

Web前臺設計主要是用戶瀏覽頁面部分的設計，比如所瀏覽頁面的整體風格、顏色、頁面布局等，應該說Web前臺設計是網站設計的一種直觀的表現形式，其設計過程可從以下四個方面考慮。

（1）網頁展示內容設計，即頁面要表現的主題和需要實現的功能。首先需要弄清楚客戶的需求，其次是在滿足客戶需求的基礎上要考慮站點的類型和性質，比如，站點是屬于資訊類的還是形象類的，資訊類網站一般提供的瀏覽信息量大，包含的頁面數量眾多，制作前必須考慮到頁面分配、頁面之間的結構合理性以及界面親和度等方面的設計，但是對展示中小企業形象類的網站，所需的容量相對較小，需要實現的頁面功能也較為簡單，因此頁面設計主要就是通過美工來突出企業形象。

（2）弄清楚頁面設計的任務后，接下來就是如何實現，即制作網頁。首先需要對站點進行規劃，可以在紙上繪制草圖來完成版面布局，將文字、圖片甚至動畫排放在頁面指定的位置上，確定出頁面的大體輪廓，然后在計算機上編制HTML5腳本代碼將設計藍圖變為現實，當然也可以借助可視化的開發工具，如Dreamweaver、Fireworks等，但是可視化開發工具自身會產生大量不必要的HTML代碼，這樣會為以后的頁面維護埋下隱患，因此一個優秀的網頁設計者應該在掌握HTML語言的基礎上，進一步熟練使用可視化開發工具，從而達到快速制作網頁和優化網頁的目的。

（3）網頁的整體效果至關重要。在設計中要注意各個頁面構成元素的搭配效果，頁面上的元素必須通過點、線、面的組合與搭配來構造整個頁面，遵循統一、連貫、分割、對比及和諧五大原則設計，如果將各個元素孤立、分散進行設計，會使頁面呈現出凌亂的畫面效果，上述原則具體實現就需要使用CSS技術。除此之外，色彩的運用也非常關鍵，設計者可以先確定一種主題色，當然要選擇能最佳表現頁面主題的色調，之后再根據綜合考慮頁面的其他元素，采用相似色或反差色來完成整個頁面的配色方案。

（4）頁面的優化。網頁優化是網頁制作后期重要環節，它把握的好壞會影響到瀏覽速度和網頁的用戶體驗度，決定著用戶對網站的直接印象。例如，一般來說文字和圖片是網頁中最大的構成元素，那么使用CSS樣式表指定文字的樣式就顯得非常必要。至于圖片的優化，要在保證瀏覽質量的前提下，將圖片的大小降到最低，可以成倍地提高網頁的下載速度，也可以利用圖像處理軟件將大圖切成若干個小塊，分別進行優化，其文件類型可以是GIF或者JPEG。

四、結語

優秀的網頁其實可以看成是一種藝術品，頁面所產生的視覺效果與人的感受能達成共鳴，從而提升網頁的用戶體驗。當然，除去網頁制作的技術手段，更多的還需要依靠設計師的靈感和創新，這也是網頁設計能否成功的關鍵。

責任編輯：孫 瑤