monyer教你玩电脑——CSS、HTML、JS、XML的关系

浏览数：26 / 时间：2015年06月09日

首先Monyer还是有必要提一句：这是一篇低中等难度的文章。如果你是高手或被认为是高手，那么请pass掉这篇文章；如果你是新手，甚至不知道什么是css（譬如百度模版）等，那么请pass掉这篇文章。谢谢合作！

在网上有告诉你CSS是什么、HTML是什么、JS是什么、XML是什么之类的文章，并且多如牛毛。但是他们一般都没有具体告诉你，它们之中的任意一个或几个结合起来用会是什么或什么效果（请注意：我所指的是它们具体说是以一种什么样的方式结合，并不一定是结合的新产物新名词）。所以出于这种目的，Monyer手写了这篇文章，虽然我参考并综合了诸多文献资料，但仍免不了由于个人偏见及学术问题所引起的诸多谬误，所以如果您有任何问题欢迎批评指教，以便Monyer对文章进行及时更正，以免混淆视听。谢谢！

在文章开始，我认为有必要先分别说说这四项技术都是什么，都能干什么。

HTML是什么：HTML是Hypertext Markup Language的缩写，即超文本标记语言。它是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建Web页面。HTML文件是带有格式标识符和超文本链接的内嵌代码的ASCII 文本文件。用Monyer的话说，HTML就是做网页结构及内容实现的一门语言。

下面这段代码是HTML的基本结构，在“<>”中的为HTML标记，一般一个“<xxx>”标记出现，则必需要一个相应的“</xxx>”对其标示范围进行结束；除非该标记为自关闭标记，一般以“<xxx/>”的形式出现。

<html>
<head>
<title>Monyer‘s Example</title>
</head>
<body>
<div id="first">Hello World !</div>
<div id="second">Hello Monyer !</div>
</body>
</html>

代码一

如果把网页（<html>...</html>）看成是人的话，那么<head>...</head>是他的头，但这部分内容通常不会在网页正文中显示；<body>...</body>是他的身体，也是一个网页内容显示部分。所以将以下代码保存为*.html后并双击在网页浏览器中运行，显示的仅仅是：

Hello World ！

Hello Monyer ！

但所有的HTML标记均是被浏览器执行的对象，并不会显示出来。需要注意的是，在上段代码中承载“Hello World ！”和“Hello Monyer ！”的两个“<div/>”容器内部均有一个id标识，id中的内容是可以随便定制的，但请务必保证id中内容的唯一性——因为它是使别人找到它所在的门牌号。

CSS是什么：CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言（节选自《css2.0中文手册》）。如果用|\/|0|\|YE|2的话说，CSS就是定制一个网页上HTML元素属性的语言。

CSS的大概模样如下：

#first{
       color:red;
}
#second{
       color:green;
       font-size:50px;
}

代码二

当把以上代码放进HTML中，它会去尝试找ID（门牌号）为“first”的HTML标签，如果找到，就把该标签内的文字以红色在浏览器中显示出来；当它继续寻找ID为“second”的标签，并找到后，它会把该标签内部的文字以绿色在浏览器中显示出来，但同时该段文字的大小为50像素。具体的插入HTML的方法后文会提到。

JS是什么：JS是Javascript的缩写。JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。用|\/|0|\|YE|2的话说，网页中所有的对数据进行判断、操作以及向浏览者反馈信息的本地代码实现部分均是javascript（当然，由于我们仅仅局限于目前的这四种语言，所以在狭义的角度上，我们不考虑vbs或Java Applet等脚本语言。请不要总是钻别人的牛角尖哦！呵呵）

JS的大概样子如下：

function a(){
alert(‘example‘);
}
a();

代码三

当把以上代码放进HTML代码中，它会在你的HTML载入时，弹出一个内容为“example”的对话框。同样，具体的插入方法会在后文给出。

XML是什么：XML 代表Extensible Markup Language（eXtensible Markup Language的缩写，意为可扩展的标记语言）。XML是一套定义语义标记的规则，这些标记将文档分成许多部件并对这些部件加以标识。它也是元标记语言，即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。Monyer的小提示：rss就是xml的一种特殊形式，你也可以理解xml就是数据库。

XML的大概样子如下：

代码四

从以上代码你可以看出它跟HTML很像，但是区别在于它的标签名称是可以随意定制的，这意味着对于同一段数据，不同的程序员会编出不同的XML代码。也因此在rss的xml应用中，标签被固定下来以适合信息交互。相对HTML来说，XML更追求严谨性，如果说你在HTML代码中没有对标签进行一一对应或是封闭，但是却蒙混过关的话；那么同样的事情发生在XML中就很可能会使你的数据崩溃。

好了，以上便是对这四种语言的简要介绍，下来来看幅图，提前声明的是语言连线所产生的部分并不一定代表是另外一门语言或是新技术，它仅仅代表两种或多种语言会以一种什么样的方式相结合，它们结合后的关系如何（汗！没办法，现在没事挑刺的人特多，所以我还是认为提前声明一下比较保准！嘿嘿）——这也正是本文所要讨论的重点。

DOM是什么：这里的DOM指的是HTML DOM。HTML DOM是W3C的标准，同时它也是HTML的文档对象模型的缩写(the Document Object Model for HTML)。HTML DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性。其中的内容可以修改和删除，同时也可以创建新的元素。HTML DOM独立于平台和编程语言。它可被任何编程语言诸如Java、JavaScript和VBScript所使用。用Monyer的话说，HTML DOM就是HTML语言对外界开通的接口，以便其他语言能够访问或修改HTML内部的元素。

当js需要对html元素进行操作时，DOM是一个很必要的对象。

js一般会以三种方式插入到HTML当中：

方法1：<script>js code</script>

方法2：<script language="javascript" src="js source.js"></script>

方法3：<body onload="simple js code">...</body>

当然，看过我的XSS的相关文章的朋友知道其实插入js的方式不仅仅这些，但是这些其实才是最基本的。

而譬如你要在“代码一”刚一载入时，就改变其中的元素，使ID为“first”的DIV中的内容也为“Hello Monyer ！”

你便可以通过利用DOM对象构造如下代码并插入到HTML代码中的任何位置来实现

代码五

STYLE（样式）：当用CSS去修饰HTML中的元素，这一过程可以称为声明HTML元素样式的过程。同js一样，CSS插入HTML也有与之类似的三种方法：

方法一：<style>css code</style>

方法二：<link rel="stylesheet" type="text/css" href="css source.css" />

方法三：<div style="css code">...</div>

XHTML是什么：XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。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只是一种将目前已有的网页技术、语言标准整和运用，制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。DHTML 就是动态的html，Dynamic HTML 。传统的html页面是静态的，Dhtml就是在html页面上加入了javascript脚本，使其能根据用户的动作作出一定的响应，如鼠标移动到图片上，图片改变颜色，移动到导航栏，弹出一个动态菜单等等。

一般如：<img src="pic source" onmouseover="this is a picture !">

Expression是什么：Expression是微软为了使样式表能够在修饰HTML样式的同时执行javascript脚本而在IE浏览器中增加的一个功能（在加入该功能不久，FF也增加了该功能，不过仅仅支持很简单的js表达式），这样你可以做譬如：图片的自适应宽度，表格的隔行换色等等。

譬如：img{max-width:500px;width:expression(document.body.clientWidth > 500 ? "500px" : "auto");}

XMLHTTP是什么：最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应。
现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象（在IE7中已经支持通过xmlhttprequest来创建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是什么：XSLT的英文标准名称为eXtensible Stylesheet Language Transformation。根据W3C的规范说明书(http://www.w3.org/TR/xslt)，最早设计XSLT的用意是帮助XML文档(document)转换为其它文档。但是随着发展，XSLT已不仅仅用于将XML转换为HTML或其它文本格式，更全面的定义应该是：XSLT是一种用来转换XML文档结构的语言。

这里不对XSLT进行举例，关于XSLT的基础详情请参看《XSLT轻松入门》。

SGML是什么：SGML——标准通用标记语言（standard generalized markup language）。由于SGML的复杂，导致难以普及。这是一个SGML的例子：typically something like this 。同时SGML也是一个ISO标准: "ISO 8879:1986 Information processing -- Text and office systems -- Standard Generalized Markup Language (SGML)" SGML有非常强大的适应性，也正是因为同样的原因，导致在小型的应用中难以普及。HTML 和 XML 同样衍生于SGML：XML可以被认为是SGML的一个子集，而HTML是SGML的一个应用。XML的产生就是为了简化SGML，以便用于更加通用的目的。比如语义Web.它已经应用于大量的场合，比较著名的有XHTML 、RSS 、XML-RPC 和SOAP 。

XSL-FO是什么：XSL在转换XML文档时分为明显的两个过程，第一转换文档结构；其次将文档格式化输出。这两步可以分离开来并单独处理，因此XSL在发展过程中逐渐分裂为XSLT(结构转换)和XSL-FO(formatting objects)(格式化输出)两种分支语言，其中XSL-FO的作用就类似CSS在HTML中的作用。

AJAX是什么：终于到了最后这个爆炸式的东东了，这可是个重头戏，web2.0思想的核心。CSS+HTML+JS+XML+DOM+XSLT+XMLHTTP==AJAX。AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。

在AJAX中，xmlhttp用来在不改变页面的情况下传输数据，其中传输的数据即是XML，然后通过XSLT将其格式化，利用js通过dom对象将其显示到HTML中，同时利用CSS确定数据的显示及位置。

在2006年，是否掌握AJAX技术是对一个网站工程师水平的鉴定。07年，这项技术事实上已经延伸到了网络中的任何一个角落，譬如你的博客，你的网络邮箱，譬如某些搜索引擎，c2c平台等等。

总结：好啦，文章到这里就告一段落，我数了数，7000多字了哦，好像是我博客里原创的最多的一篇了。我从下午四点多一直打到现在九点多，晚饭还没有吃，希望你们能认认真真地读完这篇文章——因为它对你们对于网站建设（将来成为网站工程师哦）的理解至关重要，也会使你们在网站建设上少走一些弯路。文中对于“名词”定义的部分，为了追求严密性和完整性，我没有按自己的意识乱来，而是取各家之所长，再根据自己对它的理解进行相关补充结合来的产物，在此声明一下，以免有照抄之嫌。

声明：本文有版权，但可以随意转载，但是对于一切没有对本文声明版权或者对原文进行称谓更改的“转载”均视为抄袭。望谅解！

本文参考文献：《Professional AJAX》《XSL简明教程》《XSLT轻松入门》《css2.0中文手册》等。

monyer教你玩电脑——CSS、HTML、JS、XML的关系,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

monyer教你玩电脑——CSS、HTML、JS、XML的关系