新手理解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。
新手理解HTML、CSS、javascript之间的关系的更多相关文章
- HTML,Css,JavaScript之间的关系
简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...
- html+css+javascript之间的关系与作用
三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...
- 浅析html+css+javascript之间的关系与作用
三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...
- 新手理解HTML、CSS、javascript之间的关系-修订
几年前写过一篇博文 <新手理解HTML.CSS.javascript之间的关系>,没想到网上出现了不少转载,当时没有太用心,里面的很多内容有待商榷,这里发布重新发布一篇. 网页主要有三部分 ...
- html、css、javascript之间的关系
网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior)HTML —— 结构, 决定网页的结构和内容( “是什么”)CSS —— 表现 ...
- async/await到底该怎么用？如何理解多线程与异步之间的关系？
前言 如标题所诉,本文主要是解决是什么,怎么用的问题,然后会说明为什么这么用.因为我发现很多萌新都会对之类的问题产生疑惑,包括我最初的我,网络上的博客大多知识零散,刚开始看相关博文的时候,就这样.然后 ...
- 如何理解Nginx, WSGI, Flask之间的关系
概览 之前对 Nginx,WSGI(或者 uWSGI,uwsgi),Flask(或者 Django),这几者的关系一存存在疑惑.通过查阅了些资料,总算把它们的关系理清了. 总括来说,客户端从发送一个 ...
- CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系
设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...
- iOS 深入理解UINavigationController 和 UIViewController 之间的关系
创建三个类 BasicViewController : UIViewController SecondViewController : UIViewController ThirdViewContro ...
随机推荐
- RMAN还原遭遇ORA-32006&ORA-27102错误
案例环境: 服务器A: 操作系统 : Red Hat Enterprise Linux ES release 4 (Nahant Update 6) 数据库版本: Oracle Database ...
- shell变量详解
1 shell变量基础 shell变量是一种很"弱"的变量,默认情况下,一个变量保存一个串,shell不关心这个串是什么含义.所以若要进行数学运算,必须使用一些命令例如let.de ...
- ubuntu系统安装软件方法
ubuntu系统安装软件方法 ubuntu下安装软件有三种方式,分别为在线安装apt-get方式,软件商店安装方式和 1. 软件商店安装方式 这种方式对经常使用windows系统的同学来说最为简单,因 ...
- C++基础——函数指针 函数指针数组
==================================声明================================== 本文版权归作者所有. 本文原创,转载必须在正文中显要地注明 ...
- linux中5条查找命令
1 which which命令的作用是,在PATH变量指定的路径中,搜索某个系统命令的位置,并且返回第一个搜索结果. which [文件...] 参 数: -n<文件名长度> 指定文件名长 ...
- netty4虚拟内存不断飙升
去年升级过一个老的netty3的程序到netty4,近期突然注意到一个问题,就是这个程序随着时间虚拟内存会不断升高.之前升级的时候担心存在内存泄露,所以还特意用jstate跟踪过gc回收的情况,并没有 ...
- [转]ASP.NET Core 之 Identity 入门（三）
本文转自:http://www.cnblogs.com/savorboard/p/aspnetcore-identity3.html 前言 在上一篇文章中,我们学习了 CookieAuthentica ...
- 基于Windows10 x64+visual Studio2013+Python2.7.12环境下的Caffe配置学习
本文在windows下使用visual studio2013配置关联python(python-2.7.12.amd64.msi)的caffe项目,如果有耐心的人,当然可以自己去下载caffe项目自己 ...
- NOIP2009Hankson 的趣味题[唯一分解定理|暴力]
题目描述 Hanks 博士是 BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫 Hankson.现 在,刚刚放学回家的 Hankson 正在思考一个有趣的问题. 今天在课堂上,老师讲 ...
- Spring多种注入方式及注解实现DI
一.Bean作用域 spring容器创建的时候,会将所有配置的bean对象创建出来,默认bean都是单例的.代码通过getBean()方法从容器获取指定的bean实例,容器首先会调用Bean类的无参构 ...