链接：https://www.zhihu.com/question/22689579/answer/22318058
来源：知乎

HTML 与 CSS
HTML.CSS,JS_第1张图片
你家电脑拿到一个 html （就是上图 HTTP 响应的 body 里的内容）之后，就会对它进行解析渲染。
服务器返回给你的html文件里面，写的是一些代码，大概是这样的：
HTML.CSS,JS_第2张图片
浏览器拿到这些代码之后，分析一下给你渲染好页面显示出来，如果不用css，效果是这样的，按照浏览器默认的样式显示出列表、图片、超链接、输入框、按钮等等：
HTML.CSS,JS_第3张图片
所以很多时候我们需要自定义样式，现行通用的规定样式的语言是CSS，我们可以用它写一些定义样式的代码，然后在 html 文件里用一个标签把这些规定样式的 CSS 代码与表达内容语义的 HTML 代码关联起来，然后你就能看到一个符合人类正常审美的页面了:
HTML.CSS,JS_第4张图片
CSS 代码的格式基本是
属性:值
比如知乎顶上那个蓝色的导航条，它的 CSS 大约是这样的
HTML.CSS,JS_第5张图片
第一个属性对应的代码翻译成人话，就是它的位置（position）应该是不动（fixed）的，浏览器会兢兢业业地去实现这段代码要求实现的效果，所以你在页面上翻来翻去顶上那个导航条都会死死地黏在窗口顶部不跟着滚动。再拿里面的其他几个属性做栗子解释一下就是：left 和 top 为零指明这个导航条要紧贴着窗口的左上角。width 和 height 指定这个导航条的宽和高。background 指明这个导航条的背景是一种渐变的蓝色。浏览器就会根据这些 CSS 代码，“画”出对应的样式。

HTML 5
有些浏览器支持一些标签，有一些又不支持，以及其他混乱的情况，为了防止大家鸡同鸭讲，我们需要对 HTML 代码里能有什么标签，标签怎么写，标签可以有什么属性这些东西有一定的共识，建立一个通行的标准，HTML5 就是其中一个比较新的标准。这个标准新加了很多可以用的标签和属性，然后各大浏览器也吭哧吭哧按这个标准去实现了很多这些新加的标签和属性，本来前端程序员要写一堆代码去实现的效果，现在浏览器都给你实现好了，只要写两三行，调用一下浏览器给你实现的部分就能搞定。

JavaScript 与浏览器脚本
有了表示内容和语义的 HTML，规定样式的 CSS，得到的是一个静态的页面，没什么动画。于是我们有了 Javascript（JS） 来给页面添加一些动态的效果，比如知乎问题的标签，鼠标移上去会弹出一个小窗口，这个就是 JS 实现的效果。
HTML.CSS,JS_第6张图片
浏览器都会帮你实现一些 JS 可以用的工具（函数，对象什么的），你只要写一些 JS 的代码，保存在 xxx.js 里，在 html 文件中用