几年前写过一篇博文 《新手理解HTML、CSS、javascript之间的关系》，没想到网上出现了不少转载，当时没有太用心，里面的很多内容有待商榷，这里发布重新发布一篇。

网页主要有三部分组成，结构(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文档这样写的：

<!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文件中，我的内容有一个段落，段落的内容是“这是一个段落”。

到这里，我们不得不说说 浏览器了，前端不了解浏览器就好像农民不了解自己的地一样，前端程序猿土地就是浏览器了。 在浏览器能控制的领域，如果你只能完成页面布局的工作，而把事件绑定，前端验证，数据交互交给后端，无异于割地求饶， 由于这是篇入门文章，这里只讲浏览器为我们能做些什么，浏览器工作原理以后再说。

浏览器（web browser）

通俗的说浏览器用于通过网址（URL）来获取并显示Web网页的一种软件工具,最早的web浏览器是创建于1991年的WorldWideWeb，后来改名为Nexus，之后出现了各类浏览器，直到1994年，网景公司（Netscape）发布了Navigator浏览器0.9版，这是历史上第一个比较成熟的网络浏览器，随后的1995年微软推出了IE浏览器，从此掀起了浏览器大战，微软采取操作系统捆绑IE浏览器，最终获得压倒性胜利，战争失利的Netscape在之后被收购、合并、解散。之后一段时间IE独领风骚，之后被Opera，Safari，Firefox，Chrome陆续瓜分掉一些市场份额，改变了一家独大的局面。

当一个用户输入一个正确的网址，按下回车键，尽忠职守的浏览器经过一系列的工作（DNS解析->建立TCP连接->发起HTTP请求->接受服务器响应，得到html代码），千辛万苦地在互联网的某一台服务器上请求到了一个html文档，并下载该文档关联的资源（如css文件，图片，js文件），之后浏览器调动自己手下的一个部门：渲染引擎，把页面绘制出来， 让另一个部门：js引擎来解释javascript代码。

浏览器所渲染和解释的代码，html、css和javascript是由前端编写的，换言之前端程序猿编写的代码最终是要交给浏览器执行；由于浏览器的种类很多，前端要保证大部分主流浏览器对你的代码都能按你的想法正确的解析和执行，这是个很繁琐的工作，幸好出现了一个W3C组织(万维网联盟,创建于1994年), 大部分现代浏览器都遵从W3C规定的标准解析网页。

W3C标准规定了三个方面的标准：
1、结构化标准（HTML，XML）  2、表现标准（CSS）  3、行为标准（ECMAScript）

大部分浏览器执行这些标准的时候比较宽容，宽容的程度又有所不同，所以前端在编写网页的过程中要一定要遵从W3C标准。

二、HTML、CSS、JavaScript发展

1、HTML的版本历史

超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2——作为 W3C 标准发布于 1997 年 1 月 14 日

HTML 4.0——作为一项 W3C 推荐，HTML 4.0 被发布于 1997 年 12 月 18 日

HTML 4.01（微小改进）——作为一项 W3C 推荐，HTML 4.01 发布于 1999 年 12 月 24 日

XHTML 1.0——作为一项 W3C 推荐，XHTML 1.0 发布于 2000 年 1 月 20 日，XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。

HTML 5——W3C 于 2008 年 1 月 22 日发布 HTML 5 工作草案，html5的最新草案2010 年 6 月 24 日发布的，IE9以上Chrome,Firefox,Safari,Opera支持。

HTML6 展望,HTML6 规范还未正式发布。

目前我们只需要学习XHTML和HTML5，因为现在能看到的大部分网页是使用XHTML或者HTML5这两个版本的，
XHTML 与 HTML 4.01 几乎是相同的，HTML从最初发展到XHTML的过程中变得更加的严谨，更加的灵活，与CSS结合的更好。

HTML5
    
它是对HTML5的一次重大的修改，虽然HTML5 标准还在制定中，但不能阻碍其势不可挡的脚步，特别是移动端开发的大量普及，相信html5很快就会取代xhtml,不管是移动端还是pc端成为html应用的主流版本。但是对于前端切图狗来说，html5可能仅仅意味着更多的语义化标签，更加精简的代码，更加严谨的结构与表现分离，HTML5的精髓在哪呢？这个得单独说一下，请见《HTML5的入门与深入理解》

2、CSS的版本（Level）

1996年W3C正式推出了CSS1；

1998年W3C正式推出了CSS2；

CSS2.1是W3C现在正在推荐使用的；

CSS3最新的 CSS 标准,IE9以上Chrome,Firefox,Safari,Opera支持。

如果说HTML的发展是一个不断修改的过程，那么CSS的发展就是一个不断补充的过程，所以在使用CSS的时候，不需要像HTML那行申明使用的标准，高版本的浏览器认识高版本的CSS定义，低版本的浏览器略过不认识的CSS定义。不管什么版本，CSS的语法很简单，选择器：{属性：属性值}，所以火爆的CSS3无外乎是扩展了选择器和属性。
    CSS3新增的选择器和属性请见《CSS3新增的选择器和属性》

3、JavaScript的前世今生

JavaScript一种直译式脚本语言，它的解释器被称为JavaScript引擎，是浏览器的一部分，即：JavaScript是由客户端的浏览器解释执行的。

遥想1994年网景公司（Netscape）在发布了Navigator之后，急于解决浏览器与用户交互这个问题，在1995年在网景公司高层的要求下，Javascript之父Brendan Eich只用了10天的时间发明了livescript,
由于网景高层是java的粉丝，或者说为了抱上当时热炒的java的大腿，LiveScript更名为javascript。
    Javascript1995年5月定稿，12月推向市场，立刻被广泛接受，全世界的用户大量使用。不得不说，这是个奇迹，奇迹的产生的根源是Brendan Eich吗？并不是，Brendan Eich对自己的作品并不满意，根源来自于迫切的需求，世界太需要用户能够与浏览器互动了。但是，有过项目开发经验的人都知道
，对后期的维护来说将是灾难性的，雪上加霜的是，1996年8月，微软宣布推出自己的脚本语言Jscript；11月，为了压制强势的微软，网景公司决定申请Javascript的国际标准；1997年6月，第一个国际标准ECMA-262正式颁布。

    浏览器与用户相互的迫切需要下，javascript发展的太快了，两年的时间，从开发到固化，Javascript的规范还没来及调整。相比之下，C语言问世将近20年之后，国际标准才颁布。
由于这些历史的原因Javascript有很多缺陷，但是JavaScript在前端的地位已经无可替代。

通常说的JavaScript 由核心（ECMAScript）和浏览器给JS提供的API（Web API）构成，这些API中最基础和著名的就是DOM（文档对象模型）和BOM（浏览器对象模型）,直到现在还有人说JavaScript=ECMAScript+DOM+BOM，其实现代浏览器为JS提供了很多API，除了DOM和BOM，还有用于从服务器获取数据的API，如XHR，Fetch,用于客户端存储的API，如：cookie,localStorage,用户数据管理的API，如IndexedDB，绘制和操作图形的API，如Canvas,地理定位API,音频和视频API等等。

ECMAScript(JavaScript语言的标准)的版本

ECMAScript 1.0——1997年6月，第一个国际标准ECMA-262正式发布

ECMAScript 2.0——1998年6月发布

ECMAScript 3.0——1999年12月发布，，成为JavaScript的通行标准，得到了广泛支持。标志着 ECMAScript 成为一种真正的编程语言。

ECMAScript 4.0—— 2008年7月，各方分歧太大，ECMA开会决定，中止ECMAScript 4.0的开发。

ECMAScript 3.1—— 2008年7月对ES3有些增强，没有ES4那么激进

ECMAScript 5.0—— 2009.12发布， 同时发布JavaScript.next(ES 6.0)，浏览器支持：Internet Explorer 9*，Firefox 4，Chrome 13，Safari 5.1**，Opera 11.60

ECMAScript 5.1—— 2011.06发布，成为ISO国际标准，这个规范在所有现代浏览器中都相当完全的实现了。

ECMAScript 6——2015年6月正式发布，ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。
可以使用babelES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

新手理解HTML、CSS、javascript之间的关系-修订的更多相关文章

  1. HTML,Css,JavaScript之间的关系

    简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...

  2. html+css+javascript之间的关系与作用

    三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...

  3. 浅析html+css+javascript之间的关系与作用

    三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成. html是主体,装载各种dom元素:css用来装饰dom元素:javascript控制dom元素. ...

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

    http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...

  5. html、css、javascript之间的关系

    网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior)HTML —— 结构, 决定网页的结构和内容( “是什么”)CSS —— 表现 ...

  6. async/await到底该怎么用？如何理解多线程与异步之间的关系？

    前言 如标题所诉,本文主要是解决是什么,怎么用的问题,然后会说明为什么这么用.因为我发现很多萌新都会对之类的问题产生疑惑,包括我最初的我,网络上的博客大多知识零散,刚开始看相关博文的时候,就这样.然后 ...

  7. 如何理解Nginx, WSGI, Flask之间的关系

    概览 之前对 Nginx,WSGI(或者 uWSGI,uwsgi),Flask(或者 Django),这几者的关系一存存在疑惑.通过查阅了些资料,总算把它们的关系理清了. 总括来说,客户端从发送一个 ...

  8. CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系

    设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...

  9. iOS 深入理解UINavigationController 和 UIViewController 之间的关系

    创建三个类 BasicViewController : UIViewController SecondViewController : UIViewController ThirdViewContro ...

随机推荐

  1. PIE SDK临时元素的绘制

    1. 功能简介 在数据的处理中会用到临时元素的绘制,用于当前显示:临时元素包括点.线.面.文本.图片五种元素:目前PIE SDK支持这五种元素的绘制,下面对五种临时元素的绘制功能进行介绍. 2. 功能 ...

  2. 网页引用Font Awesome图标

    问题:最近在IIS上部署web项目的时候,发现浏览器总是报找不到woff.woff2字体的错误.导致浏览器加载字体报404错误,白白消耗了100-200毫秒的加载时间. 原因:因为服务器IIS不认SV ...

  3. zookeeper 节点信息

    使用get命令获取指定节点的数据时, 同时也将返回该节点的状态信息, 称为Stat. 其包含如下字段: czxid. 节点创建时的zxid. mzxid. 节点最新一次更新发生时的zxid. ctim ...

  4. TOJ 2641 Gene

    描述 How can millions of different and complex structures be built using only a few simple building bl ...

  5. Java入门系列-08-选择结构

    这篇文章为你搞懂2个问题 if-else选择结构的使用? switch 的使用? 前面我们学习的代码都是直上直下的执行,还不会"拐弯",这篇文章带大家来看一下会"拐弯&q ...

  6. [转]Asp.net Core 使用Redis存储Session

    本文转自:http://www.cnblogs.com/hantianwei/p/5723959.html 前言 Asp.net Core 改变了之前的封闭,现在开源且开放,下面我们来用Redis存储 ...

  7. UWP 应用获取各类系统、用户信息 (1) - 设备和系统的基本信息、应用包信息、用户数据账户信息和用户账户信息

    应用开发中,开发者时常需要获取一些系统.用户信息用于数据统计遥测.问题反馈.用户识别等功能.本文旨在介绍在 Windows UWP 应用中获取一些常用系统.用户信息的方法.示例项目代码可参见 Gith ...

  8. Xcode10 闪退问题

    最新更新了iOS12,mac10.13.6,xcode10之后,打开之前的项目,只要进行import,xcode就会闪退.那么就来看一下解决方案: Xcode10 新增了一个构建系统起名“New Bu ...

  9. L1-002 打印沙漏 （20 分)

    L1-002 打印沙漏 (20 分) 方法:清晰思路,纸上写出实例,注意循环使用 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * ** ...

  10. 冒泡排序——Java实现

    一.排序思想 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复以上的步骤, ...