精品国产香蕉在线观看_日韩黄色视频手机版_草莓免费在线观看_爽 好多水 快进来免费_2012中文字幕视频完整版_久久精品这里热只有精品_亚洲毛片网站大全_中文字幕在线观看电影_国产18禁黄网站禁片免费观看_麻豆99激情视频在线播放

全國(guó)統(tǒng)一咨詢(xún)熱線：18609840880

常見(jiàn)Web技術(shù)之間的關(guān)系，你了解多少？

2017-10-25 09:56:36

如果你是一個(gè)Web開(kāi)發(fā)初學(xué)者，那么你難免會(huì)在網(wǎng)上搜索HTML, CSS, XML, JS(Javascript), DOM, XSL等等這些詞的意思，然而，隨著學(xué)習(xí)的深入。當(dāng)你把他們攪在一起，你又糊涂了，你會(huì)不停的問(wèn)，HTML是什么?CSS是什么?XML是什么?JS是什么?它們到底有什么用?無(wú)論是網(wǎng)絡(luò)百科，還是一些IT專(zhuān)題網(wǎng)站，又或者一些牛人博客，他們都會(huì)告訴你，某個(gè)單一的東西是什么，這類(lèi)文章很多，但很少有涉及，它們組合起來(lái)是什么，有什么用。我想，我寫(xiě)這篇文章，就是為了說(shuō)明一下這個(gè)他們很少涉及的問(wèn)題。

　　歸納、總結(jié)、提煉能力是我們進(jìn)步的發(fā)動(dòng)機(jī)，這種能力是可以有意識(shí)地培養(yǎng)的，拉卡拉電子支付公司董事長(zhǎng)兼總裁孫陶然提到：在拉卡拉我們要求用三條說(shuō)清楚任何問(wèn)題就是一種能力訓(xùn)練，任何問(wèn)題如果不能用三條說(shuō)清楚說(shuō)明你還沒(méi)想透。

　　在這里，我爭(zhēng)取用根本的語(yǔ)言向大家分別說(shuō)明HTML, CSS, XML, JS到底是什么，有什么用。然后我們?cè)賮?lái)看把他們組合起來(lái)是什么，有什么用。當(dāng)然如果你對(duì)HTML, CSS, XML, JS有足夠了解，可以直接跳過(guò)，看文章的后半部分，那里才是本文核心所在。

先進(jìn)部分

　　1. HTML超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language) ，是用來(lái)描述網(wǎng)頁(yè)的一種標(biāo)記語(yǔ)言。

<html>       <head>           <title>HTML</title>       </head>       <body>           <p id="num1">Hello World! I'm HTML</p>       </body>   </html>

網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記，可以告訴瀏覽器如何顯示其中的內(nèi)容(如：文字如何處理，畫(huà)面如何安排，圖片如何顯示等)。
HTML之所以稱(chēng)為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超鏈接”點(diǎn)。超文本(Hypertext)是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網(wǎng)狀文本。
概括，HTML就是整合網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容顯示的一種語(yǔ)言。

Hello World! I'm HTML

　　瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容。
這段內(nèi)容在瀏覽器上顯示的結(jié)果是：Hello World! I’m HTML
我們看

標(biāo)簽上有一個(gè)id，這是這個(gè)標(biāo)簽的唯一標(biāo)識(shí)，方便別人找到它，對(duì)它進(jìn)行操作。
2. CSS 層疊樣式表單(Cascading StyleSheet)。是將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言 。作為網(wǎng)站開(kāi)發(fā)者，你能夠?yàn)槊總€(gè)HTML元素定義樣式，并將之應(yīng)用于你希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。這樣，即設(shè)計(jì)人員能夠?qū)⒏嗟臅r(shí)間用在設(shè)計(jì)方面，而不是費(fèi)力克服HTML的限制。說(shuō)白了，CSS就是設(shè)置網(wǎng)頁(yè)上HTML元素屬性的語(yǔ)言。
CSS代碼：

#hello{   color:blue;   }

當(dāng)把這段CSS代碼應(yīng)用于HTML中，它會(huì)找到id為“hello”的HTML標(biāo)簽，將其中的內(nèi)容以藍(lán)色顯示出來(lái);具體的插入HTML的方法這里不再贅述(說(shuō)一句，只說(shuō)明是什么，有什么用的問(wèn)題，不關(guān)注技術(shù)細(xì)節(jié)，技術(shù)細(xì)節(jié)網(wǎng)上很好找)。
3. Javascript，首先說(shuō)明JavaScript和Java無(wú)關(guān)，JavaScript 是屬于網(wǎng)絡(luò)的腳本語(yǔ)言!那么為什么名字如此相似?這是典型的市場(chǎng)營(yíng)銷(xiāo)方面的成功，它的推廣成功,也是借了Java的東風(fēng)。當(dāng)微軟開(kāi)始意識(shí)到Javascript在Web開(kāi)發(fā)人員中流行起來(lái)時(shí)，微軟還是一貫風(fēng)格，建立了自己的腳本語(yǔ)言，JScript。
Javascript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語(yǔ)言。使用它的目的是與HTML超文本標(biāo)記語(yǔ)言、Java腳本語(yǔ)言(Java小程序)一起實(shí)現(xiàn)在一個(gè)Web頁(yè)面中鏈接多個(gè)對(duì)象，與Web客戶交互作用。例如可以設(shè)置鼠標(biāo)懸停效果，在客戶端驗(yàn)證表單，創(chuàng)建定制的HTML頁(yè)面，顯示警告框，設(shè)置cookie等等。
網(wǎng)頁(yè)中所有的對(duì)數(shù)據(jù)進(jìn)行判斷、操作以及向?yàn)g覽者反饋信息的本地代碼實(shí)現(xiàn)部分均是Javascript(當(dāng)然也有其他的)，這樣既可以使網(wǎng)頁(yè)更具交互性，給用戶提供更令人興奮的體驗(yàn)，同時(shí)減輕了服務(wù)器負(fù)擔(dān)。
JS的代碼如下：

function jsHello(){          alert('Hello World！');     }

　當(dāng)把以上代碼應(yīng)用于HTML代碼，它會(huì)在你的HTML載入時(shí)，彈出一個(gè)內(nèi)容為“Hello World!”的對(duì)話框。同樣，它是通過(guò)嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語(yǔ)言中實(shí)現(xiàn)的，至于如何嵌入或調(diào)入不再贅述，理由上面提到了。
4. Xml可擴(kuò)展標(biāo)記語(yǔ)言 (Extensible MarkupLanguage)，是一套定義語(yǔ)義標(biāo)記的規(guī)則，這些標(biāo)記將文檔分成許多部件并對(duì)這些部件加以標(biāo)識(shí)。它也是元標(biāo)記語(yǔ)言，即定義了用于定義其他與特定領(lǐng)域有關(guān)的、語(yǔ)義的、結(jié)構(gòu)化的標(biāo)記語(yǔ)言的句法語(yǔ)言。你可以把XML理解為一種數(shù)據(jù)庫(kù)，例如rss就是xml的一種變體。
XML代碼如下：

<Hello>   <bcd>China</bcd>   <bcd>USA</bcd>   <bcd>UK</bcd>   </Hello>

　XML的起因是，用戶受到SGML(后面再說(shuō))復(fù)雜性的挫傷和HTML的不充分。相對(duì)HTML來(lái)說(shuō)，XML更追求嚴(yán)謹(jǐn)性，如果說(shuō)你在HTML代碼中標(biāo)簽比較混亂，如未關(guān)閉等，或許瀏覽器會(huì)忽略這些錯(cuò)誤;但同樣的事情發(fā)生在XML中會(huì)給你帶來(lái)大麻煩。
鋪墊終于完了，在進(jìn)入正題之前，建議大家對(duì)比著圖來(lái)理解后邊的內(nèi)容，廢話不多說(shuō)，開(kāi)始進(jìn)入正題。

第二部分

2.jpg


這里的DOM指的是HTML DOM。HTML DOM是W3C的標(biāo)準(zhǔn)，同時(shí)它也是HTML的文檔對(duì)象模型的縮寫(xiě)(the Document Object Model for HTML)。HTML DOM定義了用于HTML的一系列標(biāo)準(zhǔn)的對(duì)象，以及訪問(wèn)和處理HTML文檔的標(biāo)準(zhǔn)方法。通過(guò)DOM，可以訪問(wèn)所有的HTML元素，連同它們所包含的文本和屬性。其中的內(nèi)容可以修改和刪除，同時(shí)也可以創(chuàng)建新的元素。HTML DOM獨(dú)立于平臺(tái)和編程語(yǔ)言。它可被任何編程語(yǔ)言諸如Java、Javascript和VBScript所使用。HTML DOM就是HTML語(yǔ)言對(duì)外界開(kāi)通的接口，以便其他語(yǔ)言能夠訪問(wèn)或修改HTML內(nèi)部的元素。
當(dāng)js需要對(duì)html元素進(jìn)行操作時(shí)，DOM是一個(gè)很必要的對(duì)象。
你便可以通過(guò)利用DOM對(duì)象構(gòu)造如下代碼并插入到HTML代碼中的任何位置來(lái)實(shí)現(xiàn)。

<script> window.onload=function hello(){ document.getElementById("hello").innerHTML="Hello China!"; } </script>

 

3.jpg

當(dāng)用CSS去修飾HTML中的元素，這一過(guò)程可以稱(chēng)為聲明HTML元素樣式的過(guò)程。

5.jpg

 

SGML標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言(standardgeneralized markup language)。由于SGML的復(fù)雜，導(dǎo)致難以普及。SGML有非常強(qiáng)大的適應(yīng)性，也正是因?yàn)橥瑯拥脑?，?dǎo)致在小型的應(yīng)用中難以普及。HTML 和 XML同樣衍生于SGML：XML可以被認(rèn)為是SGML的一個(gè)子集，而HTML是SGML的一個(gè)應(yīng)用。XML的產(chǎn)生就是為了簡(jiǎn)化SGML，以便用于更加通用的目的。比如語(yǔ)義Web，它已經(jīng)應(yīng)用于大量的場(chǎng)合，比較著名的有XHTML、RSS 、XML-RPC 和SOAP 。
XHTML是可擴(kuò)展超文本標(biāo)識(shí)語(yǔ)言(TheExtensible HyperText MarkupLanguage)。HTML是一種基本的Web網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言，看起來(lái)與HTML有些相象，只有一些小的但重要的區(qū)別，XHTML就是一個(gè)扮演著類(lèi)似HTML的角色的XML，所以，本質(zhì)上說(shuō)，XHTML是一個(gè)過(guò)渡技術(shù)，結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡(jiǎn)單特性。
簡(jiǎn)單的說(shuō)，XHTML比HTML要嚴(yán)謹(jǐn)些，但又沒(méi)像XML那么嚴(yán)重——譬如所有的XHTML標(biāo)簽以及屬性必須要小寫(xiě)，屬性性必須要加雙引號(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)頁(yè)的概念，實(shí)際上沒(méi)有一個(gè)組織或機(jī)構(gòu)推出過(guò)所謂的DHTML標(biāo)準(zhǔn)或技術(shù)規(guī)范之類(lèi)的。DHTML不是一種技術(shù)、標(biāo)準(zhǔn)或規(guī)范，DHTML只是一種將目前已有的網(wǎng)頁(yè)技術(shù)、語(yǔ)言標(biāo)準(zhǔn)整和運(yùn)用，制作出能在下載后仍然能實(shí)時(shí)變換頁(yè)面元素效果的網(wǎng)頁(yè)的設(shè)計(jì)概念。DHTML就是動(dòng)態(tài)的html，Dynamic HTML。傳統(tǒng)的html頁(yè)面是靜態(tài)的，Dhtml就是在html頁(yè)面上加入了javascript腳本，使其能根據(jù)用戶的動(dòng)作作出一定的響應(yīng)，如鼠標(biāo)移動(dòng)到圖片上，圖片改變顏色，移動(dòng)到導(dǎo)航欄，彈出一個(gè)動(dòng)態(tài)菜單等等。
一般如：![](pic)

6.jpg

 

Expression是微軟為了使樣式表能夠在修飾HTML樣式的同時(shí)執(zhí)行javascript腳本而在IE瀏覽器中增加的一個(gè)功能，這樣你可以做譬如：圖片的自適應(yīng)寬度，表格的隔行換色等等。
如：img{max-width:500px;width:expression(document.body.clientWidth> 200 ? “200px”: “auto”);}

7.jpg

XMLHTTP通用的定義為：XmlHttp是一套可以在Javascript、VbScript、Jscript等腳本語(yǔ)言中通過(guò)http協(xié)議傳送或從接收XML及其他數(shù)據(jù)的一套API。XmlHttp大的用處是可以更新網(wǎng)頁(yè)的部分內(nèi)容而不需要刷新整個(gè)頁(yè)面。
來(lái)自MSDN的解釋?zhuān)篨mlHttp提供客戶端同http服務(wù)器通訊的協(xié)議?？蛻舳丝梢酝ㄟ^(guò)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等通過(guò)window.XMLHttpRequest來(lái)創(chuàng)建XmlHttp對(duì)象。
一個(gè)簡(jiǎn)單的定義IE的XmlHttp的對(duì)象及應(yīng)用的實(shí)例如下：

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); } }

8.jpg

XSLT(eXtensibleStylesheet LanguageTransformation)早設(shè)計(jì)XSLT的用意是幫助XML文檔(document)轉(zhuǎn)換為其它文檔。但是隨著發(fā)展，XSLT已不僅僅用于將XML轉(zhuǎn)換為HTML或其它文本格式，更全面的定義應(yīng)該是：XSLT是一種用來(lái)轉(zhuǎn)換XML文檔結(jié)構(gòu)的語(yǔ)言。
XSL-FO：XSL在轉(zhuǎn)換XML文檔時(shí)分為明顯的兩個(gè)過(guò)程，先進(jìn)轉(zhuǎn)換文檔結(jié)構(gòu);其次將文檔格式化輸出。這兩步可以分離開(kāi)來(lái)并單獨(dú)處理，因此XSL在發(fā)展過(guò)程中逐漸分裂為XSLT(結(jié)構(gòu)轉(zhuǎn)換)和XSL-FO(formattingobjects)(格式化輸出)兩種分支語(yǔ)言，其中XSL-FO的作用就類(lèi)似CSS在HTML中的作用。

9.jpg

AJAX：異步JavaScript和XML(AsynchronousJavaScript and XML)。
后一個(gè)東東，它算得上是web2.0思想的心。AJAX=CSS+HTML+JS+XML+DOM+XSLT+XMLHTTP。是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。AJAX不是一種單一的新技術(shù)，而是有機(jī)地利用了一系列相關(guān)的技術(shù)。
在 2005年，Google 通過(guò)其 Google Suggest 使 AJAX 變得流行起來(lái)。
Google Suggest 使用 AJAX 創(chuàng)造出動(dòng)態(tài)性極強(qiáng)的 web 界面：當(dāng)您在谷歌的搜索框輸入關(guān)鍵字時(shí)，Javascript會(huì)把這些字符發(fā)送到服務(wù)器，然后服務(wù)器會(huì)返回一個(gè)搜索建議的列表。
在AJAX中，XmlHttp用來(lái)在不改變頁(yè)面的情況下傳輸數(shù)據(jù)，其中傳輸?shù)臄?shù)據(jù)即是XML，然后通過(guò)XSLT將其格式化，利用js通過(guò)dom對(duì)象將其顯示到HTML中，同時(shí)利用CSS確定數(shù)據(jù)的顯示及位置。
這項(xiàng)技術(shù)在網(wǎng)絡(luò)上的應(yīng)用無(wú)處不在，如你的微博，你的郵箱，你的QQ空間，再如搜索引擎，電子商務(wù)平臺(tái)，網(wǎng)絡(luò)地圖等等。