【摘 要】網(wǎng)頁前端技術(shù)主要有HTML、CSS、JavaScript，是一個集美工布局、后臺程序等諸多技術(shù)為一體的技術(shù)。網(wǎng)頁前端的開發(fā)語言各有特色，對代碼質(zhì)量的要求也不同，它們之間有著相輔相成互相互補(bǔ)調(diào)和的關(guān)系。本文從這三種技術(shù)展開討論，論述了網(wǎng)頁制作的方法及其優(yōu)化方式。

【關(guān)鍵詞】網(wǎng)頁制作；HTML；優(yōu)化；CSS

0.概述

隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，越來越多的企業(yè)都擁有自己的網(wǎng)站，有的用來展示他們的產(chǎn)品，有的用來宣傳他們的業(yè)務(wù)。由于網(wǎng)站架起了用戶之間的橋梁，近年來被各大企業(yè)公司所青睞，而且，為了滿足市場用人的需求，各大高職院校也紛紛開設(shè)網(wǎng)頁開發(fā)課程，網(wǎng)頁開發(fā)的人才輩出。

網(wǎng)頁前端技術(shù)是由網(wǎng)頁制作演變而來的，名稱上具有明顯的時代特征。網(wǎng)頁制作是Web 1.0時代的產(chǎn)物，網(wǎng)站以靜態(tài)內(nèi)容顯示，用戶使用網(wǎng)站的行為也以瀏覽為主。2005年以后，互聯(lián)網(wǎng)進(jìn)入Web2.0時代，Ajax帶來無刷新數(shù)據(jù)交互，縮減網(wǎng)頁跳轉(zhuǎn)的次數(shù)。網(wǎng)頁前端技術(shù)應(yīng)用會在減少網(wǎng)頁的跳轉(zhuǎn)方面做更進(jìn)一步的努力，在單個頁面即能完成更多功能，由前端技術(shù)驅(qū)動代替數(shù)據(jù)展現(xiàn)驅(qū)動。

1.網(wǎng)頁制作的主要技術(shù)

1.1 HTML（超文本標(biāo)記語言）

HTML是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對書寫出錯的標(biāo)記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。

HTML之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。所謂超級鏈接，就是一種URL指針，通過激活（點(diǎn)擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。超文本標(biāo)記語言（HTML）5結(jié)構(gòu)上更加清晰和明確，取消了一些過時的標(biāo)記，將內(nèi)容和展示進(jìn)行分離，改進(jìn)相關(guān)結(jié)構(gòu)后，生成的網(wǎng)頁更干凈和易于管理，提升了用戶體驗(yàn)，有利于搜索引擎和屏幕閱讀器進(jìn)行抓取。移動設(shè)備上HTML5將具有更大的優(yōu)勢，因此更適合如Web操作系統(tǒng)一類的RIA應(yīng)用的前端開發(fā)。

1.2 CSS（層疊樣式表）

CSS，中文譯作“層疊樣式表單”（Cascading Style Sheet）是一系列格式規(guī)則，它們控制網(wǎng)頁內(nèi)容的外觀。使用 CSS 樣式可以非常靈活并更好地控制確切的網(wǎng)頁外觀，從精確的布局定位到特定的字體和樣式。

它用于（增強(qiáng)）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。它有以下幾個顯著優(yōu)勢：表現(xiàn)和內(nèi)容相分離；提高頁面瀏覽速度；易于維護(hù)和改版。

1.3 JavaScript

JavaScript是Netscape公司的產(chǎn)品，開發(fā)目的是為了擴(kuò)展Netscape Navigator的功能，是一種介于Java和HTML之間、能嵌入Web頁面中基于對象和事件驅(qū)動的解釋性的編程語言。

JavaScript可以被嵌入到HTML文件中，不需要經(jīng)過Web服務(wù)器就可以對用戶操作作出響應(yīng)，使網(wǎng)頁更好地與用戶交互；在利用客戶端個人電腦性能資源的同時，適當(dāng)減小服務(wù)器端的壓力，并減少用戶等待時間。

2.網(wǎng)頁制作的優(yōu)化方法

2.1網(wǎng)頁的色彩和布局

制作優(yōu)秀網(wǎng)頁須要三項(xiàng)前臺技術(shù)，包括網(wǎng)頁的色彩搭配、網(wǎng)頁素材的制作與積累以及網(wǎng)頁的整體布局。一個優(yōu)秀的網(wǎng)站的配色應(yīng)具備如下特點(diǎn)：色彩鮮艷靚麗，視覺效果強(qiáng)烈，吸人眼球；色彩要精心地設(shè)計(jì)，有獨(dú)特的風(fēng)格，使瀏覽者無千篇一律之感；色彩的使用要契合所在網(wǎng)頁的內(nèi)容和氛圍，通過構(gòu)建色彩更好地體現(xiàn)網(wǎng)頁主題，強(qiáng)化網(wǎng)頁內(nèi)涵。

2.2減少HTTP請求

這條策略基本上是最重要最有效的。一個完整的HTTP請求要包含DNS尋址、建立和服務(wù)器的連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個“漫長”而復(fù)雜的過程。用戶需要看到或 “感受”到資源是必須要等待這個過程結(jié)束的，占據(jù)一定的時間成本，因?yàn)槊總€請求都必須攜帶數(shù)據(jù)，所以每個請求都需要占用帶寬資源。而瀏覽器進(jìn)行并發(fā)請求的請求數(shù)是具有一定上限的，當(dāng)請求數(shù)超出上限后，瀏覽器需要分批進(jìn)行請求，用戶的等待時間進(jìn)一步增加，用戶會有站點(diǎn)速度慢的印象，即使也許用戶可視的第一屏資源都已請求結(jié)束，但瀏覽器的進(jìn)度條會一直存在。減少請求的方法有：合并文件（將多個CSS文件或JavaScript文件合并成一個）；圖片地圖（在一個圖像上劃分不同區(qū)域映射不同的鏈接）；內(nèi)聯(lián)圖像（讓圖像與文本一起下載和顯示）；CSS Sprites（利用 CSS background 相關(guān)元素進(jìn)行背景圖絕對定位）等。

2.3使用JSP增強(qiáng)網(wǎng)頁的動態(tài)效果

JSP基本上可以在所有平臺上的任意環(huán)境中開發(fā)，在任意環(huán)境中進(jìn)行系統(tǒng)部署，在任意環(huán)境中擴(kuò)展。而且JSP有多樣化和功能強(qiáng)大的開發(fā)工具支持。另外，web應(yīng)用需要強(qiáng)大的服務(wù)器端組件來支持，開發(fā)人員需要利用其他工具設(shè)計(jì)實(shí)現(xiàn)復(fù)雜功能的組件供web頁面調(diào)用，以增強(qiáng)系統(tǒng)性能。JSP還可以使用成熟的JAVA BEANS組件來實(shí)現(xiàn)復(fù)雜商務(wù)功能，增加網(wǎng)頁與用戶的完美交互。

2.4禁止拷貝特效

為了避免網(wǎng)頁作品出現(xiàn)版權(quán)方面的糾紛，在網(wǎng)頁制作中增加防網(wǎng)頁抄襲技術(shù)是非常必要的，這樣才能使更多的好作品出現(xiàn)在網(wǎng)絡(luò)。 我們知道，通常復(fù)制內(nèi)容是在別人網(wǎng)頁上把要復(fù)制的內(nèi)容全選，然后點(diǎn)擊鼠標(biāo)右鍵來復(fù)制文章內(nèi)容，或者直接使用快捷鍵ctrl+c復(fù)制下來。那么我們知道是如何復(fù)制的，就完全可以采取方法，屏蔽這種方法復(fù)制。在網(wǎng)頁源代碼中使用一些簡單的語句，就能實(shí)現(xiàn)禁止選擇對象、屏蔽右鍵使用、屏蔽復(fù)制快捷鍵等功能特效。如，在標(biāo)簽中加入onselectstart=”return 1”，該語句的作用是使鼠標(biāo)不能選擇文本，有了這個命令，試圖復(fù)制文字的人將無法選定內(nèi)容。再如，onload=”look（）”語句，禁止的是ctrl鍵的使用等。還有人在文字結(jié)尾增加干擾碼（與背景顏色相同的字），用以干擾別人復(fù)制。實(shí)際上大多的設(shè)計(jì)者為保護(hù)自己的版權(quán)不被侵犯，通常都采用多種方式組合起來使用，以阻止擅長拷貝的人對其原創(chuàng)文字型網(wǎng)頁內(nèi)容的復(fù)制。

3.結(jié)束語

網(wǎng)頁設(shè)計(jì)的一個基本特色便是吸引瀏覽者，一個美觀漂亮的頁面不管內(nèi)容多么空洞，也會有人欣賞，反之一個內(nèi)容充實(shí)但頁面簡陋卻往往不會有人去瀏覽。從博客開始到現(xiàn)在的各種前端技術(shù)的開發(fā)與應(yīng)用都離不開Web本身，近來以HTML5為代表的新一代移動Web技術(shù)是Web前端技術(shù)的重大發(fā)展創(chuàng)新，將大幅提升Web應(yīng)用在交互、系統(tǒng)能力調(diào)用、富媒體、語義化等方面的能力，使用戶無需安裝紛繁的插件而獲得更為豐富的Web應(yīng)用。在不久的將來，Web應(yīng)用將與原生應(yīng)用優(yōu)勢互補(bǔ)、并行發(fā)展，共同構(gòu)成移動互聯(lián)網(wǎng)的應(yīng)用生態(tài)系統(tǒng)。

【參考文獻(xiàn)】

[1]曹劉陽.編寫高質(zhì)量代碼：Web前端開發(fā)修煉之道[M].北京：機(jī)械工業(yè)出版社，2010.