探析網(wǎng)頁前端技術(shù)及其升華
2015-04-29 00:00:00張趙輝
【摘 要】網(wǎng)頁前端技術(shù)主要有HTML、CSS、JavaScript，是一個集美工布局、后臺程序等諸多技術(shù)為一體的技術(shù)。網(wǎng)頁前端的開發(fā)語言各有特色，對代碼質(zhì)量的要求也不同，它們之間有著相輔相成互相互補調(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)進入Web2.0時代，Ajax帶來無刷新數(shù)據(jù)交互，縮減網(wǎng)頁跳轉(zhuǎn)的次數(shù)。網(wǎng)頁前端技術(shù)應(yīng)用會在減少網(wǎng)頁的跳轉(zhuǎn)方面做更進一步的努力，在單個頁面即能完成更多功能，由前端技術(shù)驅(qū)動代替數(shù)據(jù)展現(xiàn)驅(qū)動。
1.網(wǎng)頁制作的主要技術(shù)
1.1 HTML（超文本標記語言）
HTML是一種規(guī)范，一種標準，它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標記符解釋和顯示其標記的內(nèi)容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。
HTML之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。所謂超級鏈接，就是一種URL指針，通過激活（點擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。超文本標記語言（HTML）5結(jié)構(gòu)上更加清晰和明確，取消了一些過時的標記，將內(nèi)容和展示進行分離，改進相關(guān)結(jié)構(gòu)后，生成的網(wǎng)頁更干凈和易于管理，提升了用戶體驗，有利于搜索引擎和屏幕閱讀器進行抓取。移動設(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)頁外觀，從精確的布局定位到特定的字體和樣式。
它用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。它有以下幾個顯著優(yōu)勢：表現(xiàn)和內(nèi)容相分離；提高頁面瀏覽速度；易于維護和改版。
1.3 JavaScript
JavaScript是Netscape公司的產(chǎn)品，開發(fā)目的是為了擴展Netscape Navigator的功能，是一種介于Java和HTML之間、能嵌入Web頁面中基于對象和事件驅(qū)動的解釋性的編程語言。
JavaScript可以被嵌入到HTML文件中，不需要經(jīng)過Web服務(wù)器就可以對用戶操作作出響應(yīng)，使網(wǎng)頁更好地與用戶交互；在利用客戶端個人電腦性能資源的同時，適當減小服務(wù)器端的壓力，并減少用戶等待時間。
2.網(wǎng)頁制作的優(yōu)化方法
2.1網(wǎng)頁的色彩和布局
制作優(yōu)秀網(wǎng)頁須要三項前臺技術(shù)，包括網(wǎng)頁的色彩搭配、網(wǎng)頁素材的制作與積累以及網(wǎng)頁的整體布局。一個優(yōu)秀的網(wǎng)站的配色應(yīng)具備如下特點：色彩鮮艷靚麗，視覺效果強烈，吸人眼球；色彩要精心地設(shè)計，有獨特的風(fēng)格，使瀏覽者無千篇一律之感；色彩的使用要契合所在網(wǎng)頁的內(nèi)容和氛圍，通過構(gòu)建色彩更好地體現(xiàn)網(wǎng)頁主題，強化網(wǎng)頁內(nèi)涵。
2.2減少HTTP請求
這條策略基本上是最重要最有效的。一個完整的HTTP請求要包含DNS尋址、建立和服務(wù)器的連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個“漫長”而復(fù)雜的過程。用戶需要看到或 “感受”到資源是必須要等待這個過程結(jié)束的，占據(jù)一定的時間成本，因為每個請求都必須攜帶數(shù)據(jù)，所以每個請求都需要占用帶寬資源。而瀏覽器進行并發(fā)請求的請求數(shù)是具有一定上限的，當請求數(shù)超出上限后，瀏覽器需要分批進行請求，用戶的等待時間進一步增加，用戶會有站點速度慢的印象，即使也許用戶可視的第一屏資源都已請求結(jié)束，但瀏覽器的進度條會一直存在。減少請求的方法有：合并文件（將多個CSS文件或JavaScript文件合并成一個）；圖片地圖（在一個圖像上劃分不同區(qū)域映射不同的鏈接）；內(nèi)聯(lián)圖像（讓圖像與文本一起下載和顯示）；CSS Sprites（利用 CSS background 相關(guān)元素進行背景圖絕對定位）等。
2.3使用JSP增強網(wǎng)頁的動態(tài)效果
JSP基本上可以在所有平臺上的任意環(huán)境中開發(fā)，在任意環(huán)境中進行系統(tǒng)部署，在任意環(huán)境中擴展。而且JSP有多樣化和功能強大的開發(fā)工具支持。另外，web應(yīng)用需要強大的服務(wù)器端組件來支持，開發(fā)人員需要利用其他工具設(shè)計實現(xiàn)復(fù)雜功能的組件供web頁面調(diào)用，以增強系統(tǒng)性能。JSP還可以使用成熟的JAVA BEANS組件來實現(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)容全選，然后點擊鼠標右鍵來復(fù)制文章內(nèi)容，或者直接使用快捷鍵ctrl+c復(fù)制下來。那么我們知道是如何復(fù)制的，就完全可以采取方法，屏蔽這種方法復(fù)制。在網(wǎng)頁源代碼中使用一些簡單的語句，就能實現(xiàn)禁止選擇對象、屏蔽右鍵使用、屏蔽復(fù)制快捷鍵等功能特效。如，在標簽中加入onselectstart=”return 1”，該語句的作用是使鼠標不能選擇文本，有了這個命令，試圖復(fù)制文字的人將無法選定內(nèi)容。再如，onload=”look（）”語句，禁止的是ctrl鍵的使用等。還有人在文字結(jié)尾增加干擾碼（與背景顏色相同的字），用以干擾別人復(fù)制。實際上大多的設(shè)計者為保護自己的版權(quán)不被侵犯，通常都采用多種方式組合起來使用，以阻止擅長拷貝的人對其原創(chuàng)文字型網(wǎng)頁內(nèi)容的復(fù)制。
3.結(jié)束語
網(wǎng)頁設(shè)計的一個基本特色便是吸引瀏覽者，一個美觀漂亮的頁面不管內(nèi)容多么空洞，也會有人欣賞，反之一個內(nèi)容充實但頁面簡陋卻往往不會有人去瀏覽。從博客開始到現(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)勢互補、并行發(fā)展，共同構(gòu)成移動互聯(lián)網(wǎng)的應(yīng)用生態(tài)系統(tǒng)。
【參考文獻】
[1]曹劉陽.編寫高質(zhì)量代碼：Web前端開發(fā)修煉之道[M].北京：機械工業(yè)出版社，2010.
