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

最新推荐文章于 2024-09-23 09:45:00 发布

原创最新推荐文章于 2024-09-23 09:45:00 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

前端进阶之路同时被 3 个专栏收录

110 篇文章

订阅专栏

Javascript

88 篇文章

订阅专栏

CSS

24 篇文章

订阅专栏

本文深入剖析HTML、CSS和JavaScript在网页开发中的角色与分工，回顾其发展历程，阐述前端程序猿如何运用三者构建现代网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

网页主要有三部分组成，结构(HTML)、表现(CSS)、行为(Javascript)。

一、HTML、CSS、JavaScript简介和分工

什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。
CSS(层叠样式表 Cascading Style Sheets),用来定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})
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，因为现在能看到的大部分网页是使用HTML4或者HTML5这两个版本的， XHTML 与 HTML 4.01 几乎是相同的，HTML从最初发展到XHTML的过程中变得更加的严谨，更加的灵活，与CSS结合的更好。

HTML5

它是对HTML5的一次重大的修改，虽然HTML5 标准还在制定中，但不能阻碍其势不可挡的脚步，不用HTML5你就OUT了，对于前端切图狗来说，html5可能仅仅意味着更多的语义化标签，更加严谨的结构与表现分离，HTML5的精髓在哪呢？这个得单独说一下，请见《HTML5的入门与深入理解》

2、CSS的版本（Level）

1996年W3C正式推出了CSS1
1998年W3C正式推出了CSS2
CSS2.1是W3C现在正在推荐使用的
CSS3最新的 CSS 标准,IE9以上Chrome,Firefox,Safari,Opera支持

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

3、JavaScript的前世今生

Javascript的诞生

1994年网景公司（Netscape）在发布了Navigator之后，急于解决浏览器与用户交互这个问题，在1995年在网景公司高层的要求下，Javascript之父Brendan Eich只用了10天的时间发明了livescript, 由于网景高层是java的粉丝，或者说为了抱上当时热炒的java的大腿，LiveScript更名为javascript。

Javascript第一个国际标准ECMA-262的诞生

Javascript1995年5月定稿，12月推向市场，立刻被广泛接受，全世界的用户大量使用。
1996年6月，微软实现了自己版本的 JavaScript，叫做 JScript，JScript 不仅仅是名称上的不同。它在实现上也略有不同，特别是与某些 DOM 函数有关的实现上有所不同，由此产生的影响一直波及到多年之后的未来。
11月，为了压制微软，网景公司决定申请Javascript的国际标准；
1997年6月，第一个国际标准ECMA-262正式颁布。

对于Javascript来说，标准化是一个重要的步骤，在标准化的目的是解决分歧，因为ECMA-262诞生时，已经有Javascript和JScript实现浏览器与用户交互这个问题的两条支路，ECMAScript充当了约束其它实现者的用途，后来的实现者遵循ECMA的标准，就能走上ECMAScript进化的康庄大道，使得同样的代码在不同的浏览器中呈现相同的效果。

ECMAScript确实做到了，几乎市面上所有的浏览器都支持ECMAScript标准，不过，支持的版本有差异，如果ie6,ie7发布的时候ECMAScript5还没有发布，多以很抱歉，如果你写ECMAScript5的新语法，ie6,ie7必然不能支持。

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

ECMAScript 1(1997年)— 第一个国际标准ECMA-262正式发布，去除了针对平台（浏览器）的特性
ECMAScript 2(1998年)— 没有大的变化
ECMAScript 3（1999年）— 新增了对正则表达式、新控制语句、try-catch异常处理的支持。标志着 ECMAScript 成为一种真正的编程语言。
ECMAScript 4( 2008年)— 发布前被废弃, 但是它的大部分内容被ES6继承了。
ECMAScript 5（2009）— 添加了新的功能，包括：原生JSON对象、继承的方法、高级属性的定义以及引入严格模式。浏览器支持：Internet Explorer 9*，Firefox 4，Chrome 13，Safari 5.1**，Opera 11.60
ECMAScript 6（2015年）——继ES5之后的一次主要改进，增添了许多必要的特性，例如：模块和类以及一些实用特性，Maps、Sets、Promises、生成器（Generators）等。

ECMAScript和 JavaScript的区别

ECMAScript作为一种编程语言，它是独立于运行环境的，JavaScript可以看做是是ECMAScript的实现和扩展。

ECMAScript和JavaScript的关系，我举个例子：
假设很久以前有个组织定义了一个英语的标准，所有说英语的国际决定遵守，摒弃与标准相悖的语法和词汇，标准英语在各个国家落地后，为了适应其自身的特殊情况和国人的发音特点，逐渐加入自己的语言元素，发展成各种方言。
上例中ECMAScript就好像是英语的标准，ECMAScript在各种不同的使用环境中（宿主）发展出了各自的JavaScript。如果说node和浏览器中的JavaScript是ECMAScript的大方言的话，不同浏览器中JavaScript就是大方言中的小方言。

JavaScript的组成

通常说的JavaScript 由核心（ECMAScript）和浏览器给JS提供的API构成,即浏览器提供给JS使用的一套操作浏览器自身功能和页面元素的API。
简单的说JS可以通过API来控制浏览器，上面我说了ECMAScript是独立于运行环境的，浏览器是ECMAScript的运行环境，要使用ECMAScript控制浏览器就要通过浏览器提供的API。

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