探析網(wǎng)頁(yè)前端技術(shù)及其升華

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

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

0.概述

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

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

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

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

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

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

1.2 CSS（層疊樣式表）

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

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

1.3 JavaScript

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

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

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

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

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

2.2減少HTTP請(qǐng)求

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

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

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

2.4禁止拷貝特效

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

3.結(jié)束語(yǔ)

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

【參考文獻(xiàn)】

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