AI专业者开发社区 1 号成员
  •  0 回帖  •  4 浏览  •  4 个月前
 

新手理解HTML、CSS、javascript之间的关系

http://www.cnblogs.com/dreamingbaobei/p/5062901.html

工作多年，一直忙忙碌碌的应用各种技术，现在不忙了，问问自己究竟在做什么，究竟会什么竟答不上来，回想起来工作中经常是被要求多快好省的去实现一个目标，用度娘解决问题，却没时间了解原因，今天就从宏观的角度入手来归纳总结一下。
最准确的网页设计思路是把网页分成三个层次，即：结构层 (HTML)、表示层 (CSS)、行为层 (Javascript)。
一、HTML、CSS、JavaScript 简介及简单分工

1、什么是 HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。
2、CSS( 层叠样式表 Cascading Style Sheets), 样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 { 属性：值})
3、JavaScript 是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行

对于一个网页，HTML 定义网页的结构，CSS 描述网页的样子，JavaScript 设置一个很经典的例子是说 HTML 就像 一个人的骨骼、器官，而 CSS 就是人的皮肤，有了这两样也就构成了一个植物人了，加上 javascript 这个植物人就可以对外界刺激做出反应，可以思 考、运动、可以给自己整容化妆（改变 CSS）等等，成为一个活生生的人。


如果说 HTML 是肉身、CSS 就是皮相、Javascript 就是灵魂。没有 Javascript,HTML+CSS 是植物人，没有 Javascript、CSS 是个毁容的植物人。
如果说 HTML 是建筑师，CSS 就是干装修的，Javascript 是魔术师。

怎么把这三者联系在一起呢，当然得通过网页的肉身 HTML,HTML 是一直描述语言，它是对着浏览器描述自己的，那么它通常怎么描述具体的这个网页呢？

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 网页标题 </title>
<link rel="stylesheet" type="text/css" href="mycss.css" />
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<p> 这是一个段落 </p>
</body>
</html>
复制代码

这是一个最简单的 HTML 文档，文档说的是，浏览器啊，我是遵循 W3C 标准 XHTML1.0 过渡版本规范（文件类型声明），我采用的编码是utf-8, 我的标题是“网页标题”，描述我的模样的样式表是我同目录的 mycss.css 文件，与我有关的 javascript 代码在我同级的 myks.js 文件中，我的内容有一个段落，段落的内容是“这是一个段落”。
二、HTML、CSS、JavaScript 发展
1、HTML 的版本
超文本标记语言（第一版）——在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
HTML 2.0——1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时
HTML 3.2——1997 年 1 月 14 日，W3C 推荐标准
html 5
html 5
HTML 4.0——1997 年 12 月 18 日，W3C 推荐标准
HTML 4.01（微小改进）——1999 年 12 月 24 日，W3C 推荐标准
HTML 5——2014 年 10 月 28 日，W3C 推荐标准 [4]  
现在我们只说 HTML 4.01 和 HTML5, 因为 2000 年国际万维网联盟（W3C）公布发行了 XHTML 1.0 版本。XHTML 1.0 是一种在 HTML 4.0 基础上优化和改进的的新语言，目的是基于 XML 应用。而 XHTML 与 HTML 4.01 几乎是相同的，HTML 从最初发展到 XHTML 的过程中变得更加的严谨，更加的灵活，与 CSS 结合的更好。原则上说现在能看到的大部分网页是使用 HTML4 或者 HTML5 这两个版本的。
HTML5
它是对 HTML5 的一次重大的修改，虽然 HTML5 标准还在制定中，但不能阻碍其势不可挡的脚步，不用 HTML5 你就 OUT 了，我们经常为 HTML5 而 HTML5, 其实对于比较低端的前端（我这样的），特别是用 div+CSS 实现网页来说，真的改变不大。
那么，HTML5 的精髓在哪呢？这个得单独说一下，请见《HTML5 的入门与深入理解》
2、CSS 的版本（Level）
1996 年 W3C 正式推出了 CSS1；
1998 年 W3C 正式推出了 CSS2；
CSS2.1 是 W3C 现在正在推荐使用的；
CSS3 现在还处于开发中。
如果说 HTML 的发展是一个不断修改的过程，那么 CSS 的发展就是一个不断补充的过程，所以在使用 CSS 的时候，不需要像 HTML 那行申明使用的标准，高版本的浏览器认识高版本的 CSS 定义，低版本的浏览器略过不认识的 CSS 定义。不管什么版本，CSS 的语法很简单，选择器：{属性：属性值}，所以火爆的 CSS3 无外乎是扩展了选择器和属性。
CSS3 新增的选择器和属性请见《CSS3 新增的选择器和属性》
3、JavaScript 的前世今生

JavaScript 一种直译式脚本语言，它的解释器被称为 JavaScript 引擎，是浏览器的一部分，即：JavaScript 是由客户端的浏览器解释执行的，所以在谈 JavaScript 的历史之前我们要先说一下浏览器，最早的 web 浏览器是创建于 1991 年的 WorldWideWeb，后来改名为 Nexus，之后出现了各类浏览器，直到 1994 年，网景公司（Netscape）发布了 Navigator 浏览器 0.9 版，这是历史上第一个比较成熟的网络浏览器，随后的 1995 年微软推出了IE 浏览器，从此掀起了浏览器大战，微软采取操作系统捆绑 IE 浏览器，最终获得压倒性胜利，战争失利的 Netscape 在之后被收购、合并、解散。之后一段时间 IE 独领风骚，之后被 Opera，Safari，Firefox，Chrome 陆续瓜分掉一些市场份额，改变了一家独大的局面。
但是谈到 JavaScript 的历史，必须提到一个公司和一个人，那就是 Netscape 公司及其员工 Brendan Eich，网景公司在发布了 Navigator 之后，急于解决浏览器与用户交互这个问题，Javascript 之父 Brendan Eich 只用了 10 天的时间发明了 livescript( 让我辈情何以堪）, 由于网景高层是 java 的粉丝，或者说为了抱上当时热炒的 java 的大腿，livascript 更名为 javascript,Brendan Eich 他的思路是：
      （1）借鉴 C 语言的基本语法；

　　（2）借鉴 Java 语言的数据类型和内存管理；

　　（3）借鉴 Scheme 语言，将函数提升到 "第一等公民"（first class）的地位；

　　（4）借鉴Self 语言，使用基于原型（prototype）的继承机制。
所以，Javascript 语言实际上是两种语言风格的混合产物 ----（简化的）函数式编程 +（简化的）面向对象编程。
Javascript 1.0 获得了巨大的成功，Netscape 随后推出了 1.1，之后作为竞争对手的微软在自家的 IE3 中加入了名为 JScript （名称不同是为了避免侵权）的 JavaScript 实现。由此 JavaScript 的规范化被提上日程，1997 年，以 JavaScript1.1 为蓝本的建议被提交给了 欧洲计算机制造商协会 （ECMA），ECMA 牵头经过数月的努力完成了 ECMA-262 ——定义了一种名为 ECMAScript 的新脚本语言的标准。

虽然 JavaScript 和 ECMAScript 通常被人用来表达相同的意思，但 JavaScript 的含义去比 ECMA-262 中规定的多得多。
一个完整的 JavaScript 实现应由三个部分组成：

（1）核心（ECMAScript）， 描述了该语言的语法和基本对象。

（2）文档对象模型（DOM），描述处理网页内容的方法和接口。

（3）浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

1995 年发明了 Javascript,1997 年就推出了国际标准，迫切需要浏览器与用户相互的情况下，javascript 发展的太快了，Javascript 的规格还没来及调整，就固化了。相比之下，C 语言问世将近 20 年之后，国际标准才颁布。
Javascript 有很多缺陷，但是 JavaScript 在前端地位无可替代，

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：王集鹄
链接：http://www.zhihu.com/question/29898305/answer/45987802
来源：知乎
在 Web 开发中，后端有很多编程语言可以选择，但前端只有 JavaScript，JavaScript 是所有浏览器唯一都支持的编程语言。JavaScript 如此强势，尽量再不喜欢，不管是前端还是后端都要求有一定的 javascript 编程能力，但是有没有什么方法来简化 Javascript 的开发呢？答案是有的，各种 javascript 程序库应运而生，如 jQuery、Prototype、MooTools。