如果你是一個Web開發初學者，那麼你難免會在網上搜尋HTML，CSS，XML，JS(Javascript)，DOM，XSL等等這些詞的意思，然而，随着學習的深入。當你把他們攪在一起，你又糊塗了，你會不停的問，HTML是什麼?CSS是什麼?XML是什麼?JS是什麼?它們到底有什麼用?無論是網絡百科，還是一些IT專題網站，又或者一些牛人部落格，他們都會告訴你，某個單一的東西是什麼，這類文章很多，但很少有涉及，它們組合起來是什麼，有什麼用。我想，我寫這篇文章，就是為了說明一下這個他們很少涉及的問題。
------------------------------------------------------------------------------------------------------------
歸納、總結、提煉能力是我們進步的發動機，這種能力是可以有意識地培養的，拉卡拉電子支付公司董事長兼總裁孫陶然提到：在拉卡拉我們要求用三條說清楚任何問題就是一種能力訓練，任何問題如果不能用三條說清楚說明你還沒想透。
在這裡，我争取用最根本的語言向大家分别說明HTML，CSS，XML，JS到底是什麼，有什麼用。然後我們再來看把他們組合起來是什麼，有什麼用。當然如果你對HTML，CSS，XML，JS有足夠了解，可以直接跳過，看文章的後半部分，那裡才是本文核心所在。
HTML超文本标記語言 (Hyper Text Markup Language) ，是用來描述網頁的一種标記語言。
[html] view plaincopyprint?
<html>
<head>
<title>HTML</title>
</head>
<body>
<p id="num1">Hello World! I'm HTML</p>
</body>
</html>
網頁檔案本身是一種文本檔案，通過在文本檔案中添加标記，可以告訴浏覽器如何顯示其中的内容(如：文字如何處理，畫面如何安排，圖檔如何顯示等)。
HTML之是以稱為超文本标記語言，是因為文本中包含了所謂“超連結”點。超文本(Hypertext)是用超連結的方法，将各種不同空間的文字資訊組織在一起的網狀文本。
概括，HTML就是整合網頁結構和内容顯示的一種語言。
[html] view plaincopyprint?
Hello World! I'm HTML
浏覽器按順序閱讀網頁檔案，然後根據标記符解釋和顯示其标記的内容
這段内容在浏覽器上顯示的結果是：HelloWorld! I'm HTML
我們看
标簽上有一個id，這是這個
标簽的唯一辨別，友善别人找到它，對它進行操作。
CSS 層疊樣式表單(Cascading StyleSheet)。是将樣式資訊與網頁内容分離的一種标記性語言 。作為網站開發者，你能夠為每個HTML元素定義樣式，并将之應用于你希望的任意多的頁面中。如需進行全局的更新，隻需簡單地改變樣式，然後網站中的所有元素均會自動地更新。這樣，即設計人員能夠将更多的時間用在設計方面，而不是費力克服HTML的限制。說白了，CSS就是設定網頁上HTML元素屬性的語言。
CSS代碼：
[css] view plaincopyprint?
#hello{
color:blue;
}
當把這段CSS代碼應用于HTML中，它會找到id為“hello”的HTML标簽，将其中的内容以藍色顯示出來;具體的插入HTML的方法這裡不再贅述(說一句，隻說明是什麼，有什麼用的問題，不關注技術細節，技術細節網上很好找)
Javascript，首先說明JavaScript和Java無關,JavaScript 是屬于網絡的腳本語言!那麼為什麼名字如此相似?這是典型的市場營銷方面的成功,它的推廣成功,也是借了Java的東風。當微軟開始意識到JavaScript在Web開發人員中流行起來時，微軟還是一貫風格，建立了自己的腳本語言，JScript。
JavaScript是一種基于對象(Object)和事件驅動(EventDriven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本标記語言、Java腳本語言(Java小程式)一起實作在一個Web頁面中連結多個對象，與Web客戶互動作用。例如可以設定滑鼠懸停效果，在用戶端驗證表單，建立定制的HTML頁面，顯示警告框，設定cookie等等。
網頁中所有的對資料進行判斷、操作以及向浏覽者回報資訊的本地代碼實作部分均是javascript(當然也有其他的)，這樣既可以使網頁更具互動性，給使用者提供更令人興奮的體驗，同時減輕了伺服器負擔。
JS的代碼如下：
[javascript] view plaincopyprint?
function jsHello(){
alert('Hello World！');
}
當把以上代碼應用于HTML代碼，它會在你的HTML載入時，彈出一個内容為“HelloWorld!”的對話框。同樣，它是通過嵌入或調入在标準的HTML語言中實作的，至于如何嵌入或調入不再贅述，理由上面提到了。
Xml可擴充标記語言 (Extensible MarkupLanguage)，是一套定義語義标記的規則，這些标記将文檔分成許多部件并對這些部件加以辨別。它也是元标記語言，即定義了用于定義其他與特定領域有關的、語義的、結構化的标記語言的句法語言。你可以把XML了解為一種資料庫，例如rss就是xml的一種變體。
XML代碼如下：
<Hello>
<bcd>China</bcd>
<bcd>USA</bcd>
<bcd>UK</bcd>
</Hello>
XML的起因是，使用者受到SGML(後面再說)複雜性的挫傷和HTML的不充分。相對HTML來說，XML更追求嚴謹性，如果說你在HTML代碼中标簽比較混亂，如未關閉等，或許浏覽器會忽略這些錯誤;但同樣的事情發生在XML中會給你帶來大麻煩。
鋪墊終于完了，在進入正題之前，建議大家對比着圖來了解後邊的内容，廢話不多說，開始進入正題。
這裡的DOM指的是HTMLDOM。HTML DOM是W3C的标準，同時它也是HTML的文檔對象模型的縮寫(the Document Object Model forHTML)。HTMLDOM定義了用于HTML的一系列标準的對象，以及通路和處理HTML文檔的标準方法。通過DOM，可以通路所有的HTML元素，連同它們所包含的文本和屬性。其中的内容可以修改和删除，同時也可以建立新的元素。HTMLDOM獨立于平台和程式設計語言。它可被任何程式設計語言諸如Java、JavaScript和VBScript所使用。HTMLDOM就是HTML語言對外界開通的接口，以便其他語言能夠通路或修改HTML内部的元素。
當js需要對html元素進行操作時，DOM是一個很必要的對象。
你便可以通過利用DOM對象構造如下代碼并插入到HTML代碼中的任何位置來實作
<script>
window. hello(){
document.getElementById("hello").innerHTML="Hello China!";
}
</script>
當用CSS去修飾HTML中的元素，這一過程可以稱為聲明HTML元素樣式的過程。
SGML标準通用标記語言(standardgeneralized markup language)。由于SGML的複雜，導緻難以普及。SGML有非常強大的适應性，也正是因為同樣的原因，導緻在小型的應用中難以普及。HTML 和 XML同樣衍生于SGML：XML可以被認為是SGML的一個子集，而HTML是SGML的一個應用。XML的産生就是為了簡化SGML，以便用于更加通用的目的。比如語義Web.它已經應用于大量的場合，比較著名的有XHTML、RSS 、XML-RPC 和SOAP 。
XHTML是可擴充超文本辨別語言(TheExtensible HyperText MarkupLanguage)。HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置智語言，看起來與HTML有些相象，隻有一些小的但重要的差別，XHTML就是一個扮演着類似HTML的角色的XML，是以，本質上說，XHTML是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。
簡單的說，XHTML比HTML要嚴謹些，但又沒像XML那麼嚴重——譬如所有的XHTML标簽以及屬性必須要小寫，屬性性必須要加雙引号(當然如今的浏覽器不管是IE還是FF，對HTML和XHTML采取相容措施，這也是XSS産生的根本原因)，而且也可以像XML一樣自定義部分标簽，是以有了極大的靈活性。
而且進入了XHTML時代，大家倡導的是CSS+DIV，這也是web2.0的基礎。
DHTML隻是一種制作網頁的概念，實際上沒有一個組織或機構推出過所謂的DHTML标準或技術規範之類的。DHTML不是一種技術、标準或規範，DHTML隻是一種将目前已有的網頁技術、語言标準整和運用，制作出能在下載下傳後仍然能實時變換頁面元素效果的網頁的設計概念。DHTML就是動态的html，Dynamic HTML。傳統的html頁面是靜态的，Dhtml就是在html頁面上加入了javascript腳本，使其能根據使用者的動作作出一定的響應，如滑鼠移動到圖檔上，圖檔改變顔色，移動到導航欄，彈出一個動态菜單等等。
一般如：
<img src="pic" is a picture !">
Expression是微軟為了使樣式表能夠在修飾HTML樣式的同時執行javascript腳本而在IE浏覽器中增加的一個功能，這樣你可以做譬如：圖檔的自适應寬度，表格的隔行換色等等。
如：img{max-width:500px;width:expression(document.body.clientWidth> 200 ? "200px": "auto");}
XMLHTTP最通用的定義為：XmlHttp是一套可以在Javascript、VbScript、Jscript等腳本語言中通過http協定傳送或從接收XML及其他資料的一套API。XmlHttp最大的用處是可以更新網頁的部分内容而不需要重新整理整個頁面。
來自MSDN的解釋：XmlHttp提供用戶端同http伺服器通訊的協定。用戶端可以通過XmlHttp對象向http伺服器發送請求并使用微軟XML文檔對象模型Microsoft® XML Document Object Model (DOM)處理回應。
現在的絕對多數浏覽器都增加了對XmlHttp的支援，IE中使用ActiveXObject方式建立XmlHttp對象，其他浏覽器如：Firefox、Opera等通過window.XMLHttpRequest來建立xmlhttp對象。
一個簡單的定義IE的xmlhttp的對象及應用的執行個體如下：
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)最早設計XSLT的用意是幫助XML文檔(document)轉換為其它文檔。但是随着發展，XSLT已不僅僅用于将XML轉換為HTML或其它文本格式，更全面的定義應該是：XSLT是一種用來轉換XML文檔結構的語言。
XSL-FO：XSL在轉換XML文檔時分為明顯的兩個過程，第一轉換文檔結構;其次将文檔格式化輸出。這兩步可以分離開來并單獨處理，是以XSL在發展過程中逐漸分裂為XSLT(結構轉換)和XSL-FO(formattingobjects)(格式化輸出)兩種分支語言，其中XSL-FO的作用就類似CSS在HTML中的作用。
AJAX：異步JavaScript和XML(AsynchronousJavaScript and XML)
最後一個東東，它算得上是web2.0思想的心。AJAX==CSS+HTML+JS+XML+DOM+XSLT+XMLHTTP。是指一種建立互動式網頁應用的網頁開發技術。AJAX不是一種單一的新技術，而是有機地利用了一系列相關的技術。
在 2005年，Google 通過其 Google Suggest 使 AJAX 變得流行起來。
GoogleSuggest 使用 AJAX 創造出動态性極強的 web 界面：當您在谷歌的搜尋框輸入關鍵字時，JavaScript會把這些字元發送到伺服器，然後伺服器會傳回一個搜尋建議的清單。
在AJAX中，xmlhttp用來在不改變頁面的情況下傳輸資料，其中傳輸的資料即是XML，然後通過XSLT将其格式化，利用js通過dom對象将其顯示到HTML中，同時利用CSS确定資料的顯示及位置。
這項技術在網絡上的應用無處不在，如你的微網誌，你的郵箱，你的QQ空間，再如搜尋引擎，電子商務平台，網絡地圖等等。
總結：終于完了，本文主要探讨了Web開發技術之間的關系，以及他們組合起來到底有什麼用的問題。這篇文章總結得挺不容易的，期間參考了不少别人的東西，包括：W3CSchool線上教程，《BeginningXML With DOM and Ajax》，《Javascript基礎教程》，《css2.0中文手冊》，還有一些大牛的部落格，這裡就不一一羅列了。希望對掙紮在Web開發學習前線的朋友有所幫助。如果有什麼不夠準确的地方，請大家斧正。
本文轉自 wws5201985 51CTO部落格，原文連結：http://blog.51cto.com/wws5201985/780246，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)