常见Web技术之间的关系,你了解多少?
??????? ------------------------------------------------------------------------------------------------------------
如果你是一個(gè)Web開發(fā)初學(xué)者,那么你難免會(huì)在網(wǎng)上搜索HTML,CSS,XML,JS(Javascript),DOM,XSL等等這些詞的意思,然而,隨著學(xué)習(xí)的深入。當(dāng)你把他們攪在一起,你又糊涂了,你會(huì)不停的問,HTML是什么?CSS是什么?XML是什么?JS是什么?它們到底有什么用?無論是網(wǎng)絡(luò)百科,還是一些IT專題網(wǎng)站,又或者一些牛人博客,他們都會(huì)告訴你,某個(gè)單一的東西是什么,這類文章很多,但很少有涉及,它們組合起來是什么,有什么用。我想,我寫這篇文章,就是為了說明一下這個(gè)他們很少涉及的問題。
------------------------------------------------------------------------------------------------------------
歸納、總結(jié)、提煉能力是我們進(jìn)步的發(fā)動(dòng)機(jī),這種能力是可以有意識(shí)地培養(yǎng)的,拉卡拉電子支付公司董事長兼總裁孫陶然提到:在拉卡拉我們要求用三條說清楚任何問題就是一種能力訓(xùn)練,任何問題如果不能用三條說清楚說明你還沒想透。
在這里,我爭取用最根本的語言向大家分別說明HTML,CSS,XML,JS到底是什么,有什么用。然后我們?cè)賮砜窗阉麄兘M合起來是什么,有什么用。當(dāng)然如果你對(duì)HTML,CSS,XML,JS有足夠了解,可以直接跳過,看文章的后半部分,那里才是本文核心所在。
?
HTML超文本標(biāo)記語言 (Hyper Text Markup Language) ,是用來描述網(wǎng)頁的一種標(biāo)記語言。
網(wǎng)頁文件本身是一種文本文件,通過在文本文件中添加標(biāo)記,可以告訴瀏覽器如何顯示其中的內(nèi)容(如:文字如何處理,畫面如何安排,圖片如何顯示等)。
HTML之所以稱為超文本標(biāo)記語言,是因?yàn)槲谋局邪怂^“超鏈接”點(diǎn)。超文本(Hypertext)是用超鏈接的方法,將各種不同空間的文字信息組織在一起的網(wǎng)狀文本。
?概括,HTML就是整合網(wǎng)頁結(jié)構(gòu)和內(nèi)容顯示的一種語言。
[html] view plaincopyprint?瀏覽器按順序閱讀網(wǎng)頁文件,然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容
這段內(nèi)容在瀏覽器上顯示的結(jié)果是:HelloWorld! I'm HTML
我們看<p>標(biāo)簽上有一個(gè)id,這是這個(gè)<p>標(biāo)簽的唯一標(biāo)識(shí),方便別人找到它,對(duì)它進(jìn)行操作。
?
CSS 層疊樣式表單(Cascading StyleSheet)。是將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言 。作為網(wǎng)站開發(fā)者,你能夠?yàn)槊總€(gè)HTML元素定義樣式,并將之應(yīng)用于你希望的任意多的頁面中。如需進(jìn)行全局的更新,只需簡單地改變樣式,然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。這樣,即設(shè)計(jì)人員能夠?qū)⒏嗟臅r(shí)間用在設(shè)計(jì)方面,而不是費(fèi)力克服HTML的限制。說白了,CSS就是設(shè)置網(wǎng)頁上HTML元素屬性的語言。
?
CSS代碼:
[css] view plaincopyprint?
當(dāng)把這段CSS代碼應(yīng)用于HTML中,它會(huì)找到id為“hello”的HTML標(biāo)簽,將其中的內(nèi)容以藍(lán)色顯示出來;具體的插入HTML的方法這里不再贅述(說一句,只說明是什么,有什么用的問題,不關(guān)注技術(shù)細(xì)節(jié),技術(shù)細(xì)節(jié)網(wǎng)上很好找)
?
Javascript,首先說明JavaScript和Java無關(guān),JavaScript 是屬于網(wǎng)絡(luò)的腳本語言!那么為什么名字如此相似?這是典型的市場營銷方面的成功,它的推廣成功,也是借了Java的東風(fēng)。當(dāng)微軟開始意識(shí)到JavaScript在Web開發(fā)人員中流行起來時(shí),微軟還是一貫風(fēng)格,建立了自己的腳本語言,JScript。
JavaScript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(EventDriven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言、Java腳本語言(Java小程序)一起實(shí)現(xiàn)在一個(gè)Web頁面中鏈接多個(gè)對(duì)象,與Web客戶交互作用。例如可以設(shè)置鼠標(biāo)懸停效果,在客戶端驗(yàn)證表單,創(chuàng)建定制的HTML頁面,顯示警告框,設(shè)置cookie等等。
網(wǎng)頁中所有的對(duì)數(shù)據(jù)進(jìn)行判斷、操作以及向?yàn)g覽者反饋信息的本地代碼實(shí)現(xiàn)部分均是javascript(當(dāng)然也有其他的),這樣既可以使網(wǎng)頁更具交互性,給用戶提供更令人興奮的體驗(yàn),同時(shí)減輕了服務(wù)器負(fù)擔(dān)。
?
JS的代碼如下:
[javascript] view plaincopyprint?當(dāng)把以上代碼應(yīng)用于HTML代碼,它會(huì)在你的HTML載入時(shí),彈出一個(gè)內(nèi)容為“HelloWorld!”的對(duì)話框。同樣,它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的,至于如何嵌入或調(diào)入不再贅述,理由上面提到了。
?
Xml可擴(kuò)展標(biāo)記語言 (Extensible MarkupLanguage),是一套定義語義標(biāo)記的規(guī)則,這些標(biāo)記將文檔分成許多部件并對(duì)這些部件加以標(biāo)識(shí)。它也是元標(biāo)記語言,即定義了用于定義其他與特定領(lǐng)域有關(guān)的、語義的、結(jié)構(gòu)化的標(biāo)記語言的句法語言。你可以把XML理解為一種數(shù)據(jù)庫,例如rss就是xml的一種變體。
?
XML代碼如下:
[html] view plaincopyprint?XML的起因是,用戶受到SGML(后面再說)復(fù)雜性的挫傷和HTML的不充分。相對(duì)HTML來說,XML更追求嚴(yán)謹(jǐn)性,如果說你在HTML代碼中標(biāo)簽比較混亂,如未關(guān)閉等,或許瀏覽器會(huì)忽略這些錯(cuò)誤;但同樣的事情發(fā)生在XML中會(huì)給你帶來大麻煩。
?
鋪墊終于完了,在進(jìn)入正題之前,建議大家對(duì)比著圖來理解后邊的內(nèi)容,廢話不多說,開始進(jìn)入正題。
這里的DOM指的是HTMLDOM。HTML DOM是W3C的標(biāo)準(zhǔn),同時(shí)它也是HTML的文檔對(duì)象模型的縮寫(the Document Object Model forHTML)。HTMLDOM定義了用于HTML的一系列標(biāo)準(zhǔn)的對(duì)象,以及訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。通過DOM,可以訪問所有的HTML元素,連同它們所包含的文本和屬性。其中的內(nèi)容可以修改和刪除,同時(shí)也可以創(chuàng)建新的元素。HTMLDOM獨(dú)立于平臺(tái)和編程語言。它可被任何編程語言諸如Java、JavaScript和VBScript所使用。HTMLDOM就是HTML語言對(duì)外界開通的接口,以便其他語言能夠訪問或修改HTML內(nèi)部的元素。
?
當(dāng)js需要對(duì)html元素進(jìn)行操作時(shí),DOM是一個(gè)很必要的對(duì)象。
你便可以通過利用DOM對(duì)象構(gòu)造如下代碼并插入到HTML代碼中的任何位置來實(shí)現(xiàn)
[javascript] view plaincopyprint?當(dāng)用CSS去修飾HTML中的元素,這一過程可以稱為聲明HTML元素樣式的過程。
SGML標(biāo)準(zhǔn)通用標(biāo)記語言(standardgeneralized markup language)。由于SGML的復(fù)雜,導(dǎo)致難以普及。SGML有非常強(qiáng)大的適應(yīng)性,也正是因?yàn)橥瑯拥脑?#xff0c;導(dǎo)致在小型的應(yīng)用中難以普及。HTML 和 XML同樣衍生于SGML:XML可以被認(rèn)為是SGML的一個(gè)子集,而HTML是SGML的一個(gè)應(yīng)用。XML的產(chǎn)生就是為了簡化SGML,以便用于更加通用的目的。比如語義Web.它已經(jīng)應(yīng)用于大量的場合,比較著名的有XHTML、RSS 、XML-RPC 和SOAP 。
XHTML是可擴(kuò)展超文本標(biāo)識(shí)語言(TheExtensible HyperText MarkupLanguage)。HTML是一種基本的WEB網(wǎng)頁設(shè)計(jì)語言,XHTML是一個(gè)基于XML的置標(biāo)語言,看起來與HTML有些相象,只有一些小的但重要的區(qū)別,XHTML就是一個(gè)扮演著類似HTML的角色的XML,所以,本質(zhì)上說,XHTML是一個(gè)過渡技術(shù),結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡單特性。
簡單的說,XHTML比HTML要嚴(yán)謹(jǐn)些,但又沒像XML那么嚴(yán)重——譬如所有的XHTML標(biāo)簽以及屬性必須要小寫,屬性性必須要加雙引號(hào)(當(dāng)然如今的瀏覽器不管是IE還是FF,對(duì)HTML和XHTML采取兼容措施,這也是XSS產(chǎn)生的根本原因),而且也可以像XML一樣自定義部分標(biāo)簽,因此有了極大的靈活性。
?
而且進(jìn)入了XHTML時(shí)代,大家倡導(dǎo)的是CSS+DIV,這也是web2.0的基礎(chǔ)。?
DHTML只是一種制作網(wǎng)頁的概念,實(shí)際上沒有一個(gè)組織或機(jī)構(gòu)推出過所謂的DHTML標(biāo)準(zhǔn)或技術(shù)規(guī)范之類的。DHTML不是一種技術(shù)、標(biāo)準(zhǔn)或規(guī)范,DHTML只是一種將目前已有的網(wǎng)頁技術(shù)、語言標(biāo)準(zhǔn)整和運(yùn)用,制作出能在下載后仍然能實(shí)時(shí)變換頁面元素效果的網(wǎng)頁的設(shè)計(jì)概念。DHTML就是動(dòng)態(tài)的html,Dynamic HTML。傳統(tǒng)的html頁面是靜態(tài)的,Dhtml就是在html頁面上加入了javascript腳本,使其能根據(jù)用戶的動(dòng)作作出一定的響應(yīng),如鼠標(biāo)移動(dòng)到圖片上,圖片改變顏色,移動(dòng)到導(dǎo)航欄,彈出一個(gè)動(dòng)態(tài)菜單等等。
一般如:<img src="pic" οnmοuseοver="it is a picture !">
Expression是微軟為了使樣式表能夠在修飾HTML樣式的同時(shí)執(zhí)行javascript腳本而在IE瀏覽器中增加的一個(gè)功能,這樣你可以做譬如:圖片的自適應(yīng)寬度,表格的隔行換色等等。
如:img{max-width:500px;width:expression(document.body.clientWidth> 200 ? "200px": "auto");}
XMLHTTP最通用的定義為:XmlHttp是一套可以在Javascript、VbScript、Jscript等腳本語言中通過http協(xié)議傳送或從接收XML及其他數(shù)據(jù)的一套API。XmlHttp最大的用處是可以更新網(wǎng)頁的部分內(nèi)容而不需要刷新整個(gè)頁面。
來自MSDN的解釋:XmlHttp提供客戶端同http服務(wù)器通訊的協(xié)議。客戶端可以通過XmlHttp對(duì)象向http服務(wù)器發(fā)送請(qǐng)求并使用微軟XML文檔對(duì)象模型Microsoft? XML Document Object Model (DOM)處理回應(yīng)。
現(xiàn)在的絕對(duì)多數(shù)瀏覽器都增加了對(duì)XmlHttp的支持,IE中使用ActiveXObject方式創(chuàng)建XmlHttp對(duì)象,其他瀏覽器如:Firefox、Opera等通過window.XMLHttpRequest來創(chuàng)建xmlhttp對(duì)象。
?
一個(gè)簡單的定義IE的xmlhttp的對(duì)象及應(yīng)用的實(shí)例如下:
[javascript] view plaincopyprint?XSLT(eXtensibleStylesheet LanguageTransformation)最早設(shè)計(jì)XSLT的用意是幫助XML文檔(document)轉(zhuǎn)換為其它文檔。但是隨著發(fā)展,XSLT已不僅僅用于將XML轉(zhuǎn)換為HTML或其它文本格式,更全面的定義應(yīng)該是:XSLT是一種用來轉(zhuǎn)換XML文檔結(jié)構(gòu)的語言。
XSL-FO:XSL在轉(zhuǎn)換XML文檔時(shí)分為明顯的兩個(gè)過程,第一轉(zhuǎn)換文檔結(jié)構(gòu);其次將文檔格式化輸出。這兩步可以分離開來并單獨(dú)處理,因此XSL在發(fā)展過程中逐漸分裂為XSLT(結(jié)構(gòu)轉(zhuǎn)換)和XSL-FO(formattingobjects)(格式化輸出)兩種分支語言,其中XSL-FO的作用就類似CSS在HTML中的作用。
AJAX:異步JavaScript和XML(AsynchronousJavaScript and XML)
最后一個(gè)東東,它算得上是web2.0思想的心。AJAX==CSS+HTML+JS+XML+DOM+XSLT+XMLHTTP。是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。AJAX不是一種單一的新技術(shù),而是有機(jī)地利用了一系列相關(guān)的技術(shù)。
?
在 2005年,Google 通過其 Google Suggest 使 AJAX 變得流行起來。
GoogleSuggest 使用 AJAX 創(chuàng)造出動(dòng)態(tài)性極強(qiáng)的 web 界面:當(dāng)您在谷歌的搜索框輸入關(guān)鍵字時(shí),JavaScript會(huì)把這些字符發(fā)送到服務(wù)器,然后服務(wù)器會(huì)返回一個(gè)搜索建議的列表。
?
在AJAX中,xmlhttp用來在不改變頁面的情況下傳輸數(shù)據(jù),其中傳輸?shù)臄?shù)據(jù)即是XML,然后通過XSLT將其格式化,利用js通過dom對(duì)象將其顯示到HTML中,同時(shí)利用CSS確定數(shù)據(jù)的顯示及位置。
?
這項(xiàng)技術(shù)在網(wǎng)絡(luò)上的應(yīng)用無處不在,如你的微博,你的郵箱,你的QQ空間,再如搜索引擎,電子商務(wù)平臺(tái),網(wǎng)絡(luò)地圖等等。
?
總結(jié):終于完了,本文主要探討了Web開發(fā)技術(shù)之間的關(guān)系,以及他們組合起來到底有什么用的問題。這篇文章總結(jié)得挺不容易的,期間參考了不少別人的東西,包括:W3CSchool在線教程,《BeginningXML With DOM and Ajax》,《Javascript基礎(chǔ)教程》,《css2.0中文手冊(cè)》,還有一些大牛的博客,這里就不一一羅列了。希望對(duì)掙扎在Web開發(fā)學(xué)習(xí)前線的朋友有所幫助。如果有什么不夠準(zhǔn)確的地方,請(qǐng)大家斧正。
總結(jié)
以上是生活随笔為你收集整理的常见Web技术之间的关系,你了解多少?的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 移动大爆炸
- 下一篇: 何股票投资者十有九不赢?