如果你是一个 web 开发初学者, 那么你难免会在网上搜索 html, CSS, xml, JS(JavaScript), DOM, XSL 等等这些词的意思, 然而, 随着学习的深入.
当你把他们搅在一起, 你又糊涂了, 你会不停的问:
HTML 是什么?
CSS 是什么?
xml 是什么?
JS 是什么?
它们到底有什么用?
在这里, 我争取用最根本的语言向大家分别说明 HTML, CSS, xml, JS 到底是什么, 有什么用. 然后我们再来看把他们组合起来是什么, 有什么用. 当然如果你对 HTML, CSS, xml, JS 有足够了解, 可以直接跳过, 看文章的后半部分, 那里才是本文核心所在.
第一部分
**1. HTML 超文本标记语言 **(Hyper Text Markup Language) , 是用来描述网页的一种标记语言.
<HTML> <head> <title>HTML</title> </head> <body> <p id="num1">Hello World! I'm HTML</p> </body> </HTML>
网页文件本身是一种文本文件, 通过在文本文件中添加标记, 可以告诉浏览器如何显示其中的内容(如: 文字如何处理, 画面如何安排, 图片如何显示等).
HTML 之所以称为超文本标记语言, 是因为文本中包含了所谓 "超链接" 点. 超文本 (Hypertext) 是用超链接的方法, 将各种不同空间的文字信息组织在一起的网状文本.
概括, HTML 就是整合网页结构和内容显示的一种语言.
Hello World! I'm HTML
浏览器按顺序阅读网页文件, 然后根据标记符解释和显示其标记的内容.
这段内容在浏览器上显示的结果是: Hello World! I'm HTML
我们看标签上有一个 id, 这是这个标签的唯一标识, 方便别人找到它, 对它进行操作.
2. CSS 层叠样式表单(Cascading StyleSheet). 是将样式信息与网页内容分离的一种标记性语言 . 作为网站开发者, 你能够为每个 HTML 元素定义样式, 并将之应用于你希望的任意多的页面中. 如需进行全局的更新, 只需简单地改变样式, 然后网站中的所有元素均会自动地更新. 这样, 即设计人员能够将更多的时间用在设计方面, 而不是费力克服 HTML 的限制. 说白了, CSS 就是设置网页上 HTML 元素属性的语言.
CSS 代码:
#hello{ color:blue; }
当把这段 CSS 代码应用于 HTML 中, 它会找到 id 为 "hello" 的 HTML 标签, 将其中的内容以蓝色显示出来; 具体的插入 HTML 的方法这里不再赘述(说一句, 只说明是什么, 有什么用的问题, 不关注技术细节, 技术细节网上很好找).
3. JavaScript, 首先说明 JavaScript 和 Java 无关, JavaScript 是属于网络的脚本语言! 那么为什么名字如此相似? 这是典型的市场营销方面的成功, 它的推广成功, 也是借了 Java 的东风. 当微软开始意识到 JavaScript 在 Web 开发人员中流行起来时, 微软还是一贯风格, 建立了自己的脚本语言, JScript.
JavaScript 是一种基于对象 (Object) 和事件驱动 (Event Driven) 并具有安全性能的脚本语言. 使用它的目的是与 HTML 超文本标记语言, Java 脚本语言 (Java 小程序) 一起实现在一个 Web 页面中链接多个对象, 与 Web 客户交互作用. 例如可以设置鼠标悬停效果, 在客户端验证表单, 创建定制的 HTML 页面, 显示警告框, 设置 cookie 等等.
网页中所有的对数据进行判断, 操作以及向浏览者反馈信息的本地代码实现部分均是 JavaScript(当然也有其他的), 这样既可以使网页更具交互性, 给用户提供更令人兴奋的体验, 同时减轻了服务器负担.
JS 的代码如下:
function jsHello(){ alert('Hello World!'); }
当把以上代码应用于 HTML 代码, 它会在你的 HTML 载入时, 弹出一个内容为 "Hello World!" 的对话框. 同样, 它是通过嵌入或调入在标准的 HTML 语言中实现的, 至于如何嵌入或调入不再赘述, 理由上面提到了.
4. 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 中会给你带来大麻烦.
铺垫终于完了, 在进入正题之前, 建议大家对比着图来理解后边的内容, 废话不多说, 开始进入正题.
第二部分
image
这里的 DOM 指的是 HTML DOM.HTML DOM 是 W3C 的标准, 同时它也是 HTML 的文档对象模型的缩写(the Document Object Model for HTML).HTML DOM 定义了用于 HTML 的一系列标准的对象, 以及访问和处理 HTML 文档的标准方法.
通过 DOM, 可以访问所有的 HTML 元素, 连同它们所包含的文本和属性. 其中的内容可以修改和删除, 同时也可以创建新的元素. HTML DOM 独立于平台和编程语言. 它可被任何编程语言诸如 Java,JavaScript 和 VBScript 所使用. HTML DOM 就是 HTML 语言对外界开通的接口, 以便其他语言能够访问或修改 HTML 内部的元素.
当 JS 需要对 HTML 元素进行操作时, DOM 是一个很必要的对象.
你便可以通过利用 DOM 对象构造如下代码并插入到 HTML 代码中的任何位置来实现.
<script> Windows.onload=function hello(){ document.getElementById("hello").innerHTML="Hello China!"; } </script>
image
当用 CSS 去修饰 HTML 中的元素, 这一过程可以称为声明 HTML 元素样式的过程.
image
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 脚本, 使其能根据用户的动作作出一定的响应, 如鼠标移动到图片上, 图片改变颜色, 移动到导航栏, 弹出一个动态菜单等等.
一般如:
image
Expression 是微软为了使样式表能够在修饰 HTML 样式的同时执行 JavaScript 脚本而在 IE 浏览器中增加的一个功能, 这样你可以做譬如: 图片的自适应宽度, 表格的隔行换色等等.
如: img{max-width:500px;width:expression(document.body.clientWidth> 200 ? "200px": "auto");}
image
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 等通过 Windows.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); } }
image
XSLT(eXtensibleStylesheet LanguageTransformation)最早设计 XSLT 的用意是帮助 xml 文档 (document) 转换为其它文档. 但是随着发展, XSLT 已不仅仅用于将 xml 转换为 HTML 或其它文本格式, 更全面的定义应该是: XSLT 是一种用来转换 xml 文档结构的语言.
XSL-FO:XSL 在转换 xml 文档时分为明显的两个过程, 第一转换文档结构; 其次将文档格式化输出. 这两步可以分离开来并单独处理, 因此 XSL 在发展过程中逐渐分裂为 XSLT(结构转换)和 XSL-FO(formattingobjects)(格式化输出)两种分支语言, 其中 XSL-FO 的作用就类似 CSS 在 HTML 中的作用.
image
Ajax: 异步 JavaScript 和 xml(AsynchronousJavaScript and xml).
最后一个东东, 它算得上是 web2.0 思想的心.
Ajax=CSS+HTML+JS+xml+DOM+XSLT+XMLHTTP. 是指一种创建交互式网页应用的网页开发技术. Ajax 不是一种单一的新技术, 而是有机地利用了一系列相关的技术.
在 2005 年, Google 通过其 Google Suggest 使 Ajax 变得流行起来.
Google Suggest 使用 Ajax 创造出动态性极强的 Web 界面: 当您在谷歌的搜索框输入关键字时, JavaScript 会把这些字符发送到服务器, 然后服务器会返回一个搜索建议的列表.
在 Ajax 中, XmlHttp 用来在不改变页面的情况下传输数据, 其中传输的数据即是 xml, 然后通过 XSLT 将其格式化, 利用 JS 通过 dom 对象将其显示到 HTML 中, 同时利用 CSS 确定数据的显示及位置.
这项技术在网络上的应用无处不在, 如你的微博, 你的邮箱, 你的 QQ 空间, 再如搜索引擎, 电子商务平台, 网络地图等等.
总结
本文主要探讨了 Web 开发技术之间的关系, 以及他们组合起来到底有什么用的问题. 希望对挣扎在 Web 开发学习前线的朋友有所帮助.
多年编程经验, 今年 1 月整理了一批 2019 年最新 Web 前端教学视频, 不论是零基础想要学习前端还是学完在工作想要提升自己, 这些资料都会给你带来帮助, 从 HTML 到各种框架, 帮助所有想要学好前端的同学, 学习规划, 学习路线, 学习资料, 问题解答. 只要加入 Web 前端学习交流 qun:296,212,562, 即可免费获取, 学习不怕从零开始, 就怕从不开始.
来源: http://www.jianshu.com/p/a85ed6d96961