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